Angular version ^13.3.9
Challenge Encountering an issue when utilizing multiple outlets and attempting to render them in a lazy module with the Angular router. The routes are being mapped correctly, but the outlet itself is not being displayed.
Sequence of Events (Refer to example) User visits the home page url=''. This utilizes the primary outlet (unnamed).
User navigates to the parent page url='Parent:parent', which generates the layout for that page and its corresponding children. Parents have their own outlet named 'parentRoutes' which is converted to 'Parent:' for a cleaner URL. This transformation occurs in src/app/CustomUrlSerializer.
User proceeds to the child page url='Parent:parent/Child:'. Children have their own outlet named 'childRoutes' which is transformed to 'Child:' for easier visibility in the URL. Transformation also takes place in src/app/CustomUrlSerializer.
Example https://stackblitz.com/edit/angular-p9qjhw?file=src%2Fapp%2Fapp.component.ts
Routing is functioning correctly. Tried Solutions:
- 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
Managed to get it to work for the first clicked child. However, thereafter it ceases to function properly :(