Angular version ^13.3.9

Problem When using multiple outlets and trying to render multiple of then in a lazy module makes the angular router route correctly BUT the outlet is not being rendered.

Flow (See example) User goes to home page url=''. This uses the primary outlet (no name)

User goes to parent page url='Parent:parent' , which creates the Layout for that page and its children. Parents have their own outlet named 'parentRoutes' which gets transformed to 'Parent:' for a cleaner url. Transformation happens in src/app/CustomUrlSerializer

User goes to child page url='Parent:parent/Child:'. Children have their own outlet named 'childRoutes' which gets transformed to 'Child:' for a cleaner url. Transformation happens in src/app/CustomUrlSerializer

Example https://stackblitz.com/edit/angular-p9qjhw?file=src/app/app.component.ts

Routing routes correctly. Have already tried:

• Angular2 Routing on lazy-loaded module with multiple named outlets
• Angular 10 auxiliary router outlet not working when placed in lazy loaded module

UPDATE/PROGRESS

Currently got it to work for the first child clicked. Then it no longer works :(

CodePudding user response：

Do you have to use named outlets? When using parent and child components you do not need them, as child components are automatically rendered in the router-outlet of the parent component. Named outlets are only used when you are required to have two (or more) outlets on the same component level.

Here is a working stackblitz from your example: https://stackblitz.com/edit/angular-ycn6cn?file=src/app/app.routing.ts