CODEWITHSUNDEEP
javascriptangulartypescript
user2640254
user2640254

Reputation: 137

Angular 6: How to use multiple loadChildren with same route?

I have something like:

const routes: Routes = [
  {
    path: ':path', component: SiteRoot, children: [
      { path: '', loadChildren: '../modules/maple/template.module#TemplateModule' }
    ]
  }
];

I wish to use this :path url to match multiple module dynamically. each module have there own internal Route.

Is there any way I can achieve this?

I tried ViewContainerRef with ResolveComponentFactory but it does not work with module only component. Event with NgModuleFactoryLoader, Routes cannot be applied.

EDIT, to make everything clear:

What I am trying to achieve is to have different module display on same route path. For example user can see user dashboard at "home" path, and admin can see admin dashboard at "home" path as well.

This feature is defined by business logic, so, I cannot change admin dashboard to another url

Upvotes: 2

Views: 7172

Answers (1)

Dato Gogshelidze
Dato Gogshelidze

Reputation: 746

I think you are trying to create your routing module incorrectly. Anyway, you should write why you need this. I'll try to answer. Every module should have it's own path, so routing module should be strict and static. If you trying it for security, use guards and hide item from menu component.

If you need URLs like this: "/username1/profile", "/username2/profile" you can simply use code like yours, or use lazy loading. create routing file for parent module: 

{ path: ':username', loadChildren: '../users/user.module#UserModule' }

Than create routing file for child module:

{ path: '', loadChildren: 'UserComponent', children: [
  { path: '', redirectTo: 'profile' },
  { path: 'profile', component: ProfileComponent}
 ]
}

Updated By your case:

by your case you can change your HTML file. For example in app.component.html if your code is:

 <div>
   <router-outlet></router-outlet>
 </div>

You can change it with:

 <div *ngIf="isLoggedIn | async">
   <admin-panel></admin-panel>
 </div>
 <div *ngIf="(!isLoggedIn | async)">
   <router-outlet></router-outlet>
 </div>

Upvotes: 3

Related Questions