Angular 2 named router has strange url

I am getting some weird urls when using Angular 2 named router. I know there is a similar answer ( this one ), but my scenario is slightly different. If it was similar to these questions, I might be able to fix it.

The thing is, I have a limited area in my application, admin dashboard. This admin module is lazyloaded when the user is logged in, so I have two routing configurations, one when the 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's 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 leads to two main problems:

  • I can't get it to work unless I define /adm

    the admin module on the parent router. I prefer to use a simple url like: mysite.com/home

    instead ofmysite.com/adm/home

  • The url is very weird as in the other question, it is something like this: mysite.com/adm/(adminoutlet:home), I would like it to be mysite.com/adm/home

    or even better, like the element in front of this, just a simple url:mysite.com/home

It is currently working, but I would like to fix these "problems".

How can i do this?


One of the problems I am facing is removing the URL prefix adm

. Since it's lazy, I still get the error:

ERROR: impurity (in promise): error: cannot match any routes. URL segment: "home"

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

+3


source to share





All Articles