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?
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)
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
}]
},];
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.
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