Angular lazyload child routes with outlet

Question

I have tried to reproduce my error in a stackblitz

What I try to accomplish

I am trying to have a route with a dynamic parameter, and have sub routes of that parameter. I want this module to be lazyloaded. I have made a working solution for the dynamic parameter using the :id definition in the route definition.

I want the child routes to output in a different router-outlet.

Specifically I want a component (UserComponent) loaded on the route user/:username - if the path is empty after the :username I want to load UserDefaultContentComponent in the router defined inside the UserComponent - If the path is having an extension like user/some-user/other I want the UserOtherComponent to load in the outlet. But ALWAYS have UserComponent loaded on user/:username - example user/some-user

Theories of what is breaking this

So the configuration I have created I am getting errors when I try to resolve the child routes. I was able to load UserComponent on empty user path without the lazyloading.

I also think having static subroutes to a dynamic :username route is caursing the issue.

The configuration

For full code see the stackblitz

Below is the code I find relevant. Please comment if I am missing something here:

App Routing (Root routing)

const APP_ROUTES: Routes = [
    { path: '', component: AppComponent, data: { state: 'home' }},
    { path: 'user/:username', loadChildren: './user-module/user.module#UserModule'}
];

export const appRouting = RouterModule.forRoot(APP_ROUTES); 

User routes (child routing)

const USER_ROUTES: Routes = [
    { path: '', component: UserComponent, children: [
      { path: '', component: UserDefaultContentComponent, outlet: 'user-outlet'},
      { path: 'other', component: UserOtherComponent, outlet: 'user-outlet'},
    ]}
];

export const userRouting = RouterModule.forChild(USER_ROUTES);

Imports of those is in the UserModule & the App module. I am also exporting the child routes from the User Module.

UserComponent - contains the named router outlet:

<div>
  THIS IS A USER
</div>

<router-outlet name="user-outlet"></router-outlet>

Urls to test

This url should load UserOtherComponent: /user/hello/other This url should load UserDefaultContentComponent: /user/hello Both should load inside the named router-outlet - So in both cases the UserComponent should load.

I get this console output when I am trying to load UserOtherComponent (or any defined subpath):

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'user/hello/other' Error: Cannot match any routes. URL Segment: 'user/hello/other'

While with an empty sub route I get no console error, but the UserComponent isn't loaded. In my own project (Not this reproduction) I get the UserComponent loaded - I can't seem to figure out why the empty path works in my own project. Maybe that information is of help.

EDIT:

Added the missing router-outlet in the app component. Now I am back to the exact issue I have in my full project.

the route user/user renders UserDefaultContentComponent. user/user/other still doesn't work

Answer 1

You forget to add a <router-outlet></router-outlet> in your app.component.html

EDIT :

update your APP_ROUTES

const APP_ROUTES: Routes = [
    { path: '', component: HelloComponent, data: { state: 'home' }},
    { path: 'user', loadChildren: './user-module/user.module#UserModule'}
];

and your USER_ROUTE

const USER_ROUTES: Routes = [
    { path: ':username', component: UserComponent, children: [
      { path: '', component: UserDefaultContentComponent},
      { path: 'other', component: UserOtherComponent},
    ]}
];

And replace

<router-outlet name="user-outlet"></router-outlet>

by

<router-outlet></router-outlet>