Nested router outlet in Angular

I am working on a project where I need to use a sub <router-outlet> on tabs level to load different child components on tabs, something like this

So, I created a user-outlet in my user-component to load the particular user pics, todo etc.

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

const USER_ROUTES: Routes = [
  {
    path: '',
    component: UserComponent,
    children: [
      {
        path: '',
        component: UserDefaultContentComponent,
        outlet: 'user-outlet',
      },
      { path: 'todo', component: UserTodoComponent, outlet: 'user-outlet' },      
      { path: 'pics', component: UserPicsComponent, outlet: 'user-outlet' },      
    ],
  },
];

export const userRouting = RouterModule.forChild(USER_ROUTES);

But Angular doesn't load the content on this sub router outlet and redirects to 404, Here is the stackblitz to reproduce the issue.

https://stackblitz.com/edit/angular-kvv1g4?file=src%2Fapp%2Fapp.component.ts

And example routes which redirects to 404

/user/todo
/user/pics

Solution

We very often add a name to a router-outlet when we want to have more than one on the same page. Have a look on official documentation. In your example it seems that this is not the case. removing user-outler at all levels should solve your problem. your stackblitz example updated.