Issue
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.
Answered By - Oscar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.