Issue with RouterConfiguration.useViewPortDefaults

Help Requests
1

I’m having a whole lot of frustration with RouterConfiguration.useViewPortDefaults and ‘Optional View Ports’:

The expected behaviour is, according to the docs , that if I define view port defaults in the configureRouter function like so:

config.useViewPortDefaults({
  right: { moduleId: PLATFORM.moduleName('pages/placeholder') }
});

when I navigate directly to a route that does not have an explicit right view port, as in:

{
 route: 'users', 
 name: 'users', 
 viewPorts: { left: { moduleId: PLATFORM.moduleName('user/list' )} },
},

Then I should expect to see my placeholder module in the right viewPort and the users module (or whatever route I navigated to) in the left viewPort.

However this does not seem to be the case: from a browser refresh at the users route (eg: localhost/#/users) I will only see the users module and not the placeholder module. Only navigating to the users module from the placeholder module will display both modules in their correct view ports.

placeholder route looks something like this:

{
   route: ['', 'placeholder'],
   name: 'placeholder',
   viewPorts: { right: { moduleId: PLATFORM.moduleName('pages/placeholder') }, left: { moduleId: null } }
},

Any help is much appreciated!

2

Quoting the docs from the link you referred (emphasis mine):

The empty view port is actually the out-of-the-box default. You can override this default to load a specific moduleId whenever moduleId is null by passing a view port configuration to the router configuration. These overrides can be set specifically to each view port.

I think if you put right: { moduleId: null } into your users route’s viewPorts config, it will do what you want.

As for leaving out right: ... completely from your users route, I think the behavior is NOT TO TOUCH that viewport, meaning whatever loaded before that will stay. In case of first load, that would be empty.

3

Adding right: { moduleId: null } to the users route works, however, if you route-href to users from any route other than the placeholder route then the right view port gets replaced with the placeholder route. This is not the behaviour I’m looking for.

Reading the blog post from when this feature was implemented, the comments on app.js seem to suggest that you can leave out a view port route and it should fall back to the default moduleId defined in useViewPortDefaults (and not an empty state) :

// Now, since we don’t give Aurelia any instructions for the right view port on the ‘users’ route, Aurelia simply ignores the route.

and

// If the user navigates directly to the ‘users’ route however, Aurelia will populate the right view port with the placeholder page.

Another interesting thing: by leaving out the right: ... viewport from the users route and first loading into the users route all navigation to routes that use the right viewport will never be attached.

Edit: clarifaction

4

I’m not sure I understand anything you just said.

The blog post is in COMPLETE agreement with what I said before.

  • If you have right: { moduleId: null } in a route, loading that route (1st load or navigating from another route doesn’t matter here) means loading the default module into right viewport.
  • If you leave out right: ... completely, loading that route WILL NOT TOUCH the right viewport, so it will be whatever it was before. In case of 1st load, empty is “what it was before”.

So, what’s the behavior you are actually looking for here?

5

Maybe I’ve misinterpreted the documentation.

The behaviour I want is as follows:

  • On first load of app with the url pointing to the users route: the users route should be displayed in the left view port and the placeholder route should be displayed in the right view port.
  • From any route that uses the left view port (other than placeholder), lets say settings , when clicking on a link that navigates to the users route then settings should still be in the left view port and users should be in the right view port. (I hope this makes sense…)

As you said: by adding right: { moduleId: null } to the users route I achieve the first point however the second point is not achieved since loading users will always load placeholder on the left view port.

6

There are absolutely no ways I could ever guess what you really wanted to do from your first post, so I’m sorry my answer didn’t get to the point you were looking for.

With that said, your use case is indeed intriguing. I will play around a little bit and see if it’s achievable (it may not).

7

Off the top of my head, instead of setting users route’s viewPorts config, you should set a navigation strategy and do your special logic there.

See https://aurelia.io/docs/routing/configuration#dynamically-specify-route-components

8

Awesome, a navigation strategy did the trick.

Thanks a lot.