3

I'm getting some weird urls when using Angular 2 router with named router outlet. I know there is a similar answer (this one), but my scenario is a bit different. If it was like that questions, I could fix this.

The point is, I have a restricted area in my application, an admin dashboard. This admin module is lazyloaded when user is autenticated, so I have 2 routing configurations, one when user is not logged in yet:

export const routing = [
    { path: '', redirectTo: '/adm/(adminoutlet:home)', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    {
        path: '',
        canLoad: [AuthGuard],
        loadChildren: './../admin/admin.module#AdminModule'
    },
    { path: '**', component: NotFoundComponent },
];

And one when he is already logged in:

export const adminRouting = [
    {
        path: 'adm',
        canActivateChild: [AuthGuard],
        component: AdminComponent,
        children: [
            { path: 'home', component: HomeComponent, outlet: "adminoutlet" },
            { path: 'client', component: ClientComponent, outlet: "adminoutlet" },
            // etc...
        ]
    },
];

And my admin html:

<ul>
    <li><a [routerLink]="[{outlets: { adminoutlet: ['home']} }]">Home</a></li>
    <li><a [routerLink]="[{outlets: { adminoutlet: ['client']} }]">Client</a></li>
    <!-- etc... -->
</ul>

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

This brings me 2 main problems:

  • I can't make it work when not defining /adm on the admin module parent router. I prefer to use a simple url, e.g.: mysite.com/home instead of mysite.com/adm/home

  • The url is very weird, like in the other question, it's something like this: mysite.com/adm/(adminoutlet:home), I'd like it to be mysite.com/adm/home, or even better, like the item before this, just a simple url: mysite.com/home

Currently it's working, but I'd like to fix these "issues".

How can I do this?


One of the problems I'm facing is when I remove the url prefix adm. Since it's being lazy loaded, I keep getting an error:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home'

I think this has something to do with the error, but then again, I don't know how to solve this.

celsomtrindade
  • 4,501
  • 18
  • 61
  • 116

0 Answers0