Sibling view ports - migrating from v1

Help Requests
1

I’m migrating v1 app and looking how my named view port configurations can be converted. I have a “2-panel” layout app, which uses sibling view ports (as being called here: Viewports - The Aurelia 2 Docs)

<au-viewport name="left"></au-viewport>
<au-viewport name="right"></au-viewport>

Generally, all view models appearing in routing could be rendered each side, so my route setup (in v1) is a set of left-right combination, ie:

export const routes = [
{
  route: 'students',
  name: 'student-filter-list',
  viewPorts: {
    left: 'routes/student/filter',
    right: 'routes/student/list',
 }
},
{
  route: 'students/:studentId',
  name: 'student-list-detail',
  viewPorts: {
    left: 'routes/student/list',
    right: 'routes/student/detail',
 }
},
{
  route: 'students/:studentId/courses',
  name: 'student-detail-courses',
  viewPorts: {
    left: 'routes/student/detail',
    right: 'routes/courses/per-student-list',
 }
},
// and so on
];

How can this be converted to v2?

From the docs, I found a way to load content into multiple viewports simultaneously: Navigating - The Aurelia 2 Docs. But I’d rather just refer to route id and define required parameters. I’d also define routes to be loaded by paths. From source & type information, I’d assume I have to look into IRoute.children, is this correct?

2

If I try this:

const routes: IRoute[] = [{
    path: 'students',
    id: 'student-filter-list',
    children: [{
        viewport: 'left',
        component: StudentFilterViewModel
    }, {
        viewport: 'right',
        component: StudentListViewModel
    }]
}, {
    path: 'students/:studentId',
    id: 'student-list-detail',
    children: [{
        viewport: 'left',
        component: StudentListViewModel
    }, {
        viewport: 'right',
        component: StudentDetailViewModel
    }]
},];

will give me:
Error: 1 remaining instructions after 100 iterations; there is likely an infinite loop. at createUnresolvedinstructionsError (index.dev.mjs:7883:1)

3

Okay, I’ve found this:
aurelia/app.ts at ce87339db2e80484785a7c86053d8ae3780abfa9 · aurelia/aurelia (github.com),

so it seems the correct way would be:

const routes = [{
    path: 'students',
    id: 'student-filter-list',
    instructions: [{
        viewport: 'left',
        component: StudentFilterViewModel
    }, {
        viewport: 'right',
        component: StudentListViewModel
    }]
}, {
    path: 'students/:studentId',
    id: 'student-list-detail',
    instructions: [{
        viewport: 'left',
        component: StudentListViewModel
    }, {
        viewport: 'right',
        component: StudentDetailViewModel
    }]
},];
4

Hi @balazsmeszegeto! I have a feeling that you are mixing imports from both router and router-lite, as the docs links provided by you point to router-lite docs, but the error you are facing points to router. Make sure that you are importing from the router, you want to use.

If you intend to use router-lite, then this configuration looks right. If you still have issues, after you have fixed the imports, please let me know.

5

I did not mix imports. The error is when importing @aurelia/router and trying a solution based on the type information of the router. But luckily I’ve found a sample exactly what I was looking for.

1 Like