Lazy loading routing not opening child module component

Question

I have an angular 6 Application in which I am using Lazy loading.

The lazy loading works well.

The problem I have is that I want to load different components within my child module based on the route.

Here is my App.Routes

export const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },        
    { path: 'login', component: HomeComponent },
    { path: 'manage/:id', loadChildren: './admin/admin.module#AdminModule' },
    { path: 'organisation-list', loadChildren: './admin/admin.module#AdminModule' }        
];

So for the url http:app.xxx.com/organisation-list it loads the Admin module with Routes

const routes: Routes = [
{ path: 'manage/:id', component: FlowListComponent },
{ path: 'organisation-list', component: PowerComponent },
{ path: '', component: FlowListComponent }

];

Now I was expecting the component PowerComponent to be loaded. This does not happen and instead it loads the default FlowListComponent?

I've tried various things but I think my basic understanding on how this works is wrong.

PowerComponent would be loaded for app.xxx.com/organisation-list/organisation-list. The child paths are added to the parent paths. — a better oliver
@abetteroliver so how would I get the component to load with my base url? or would I always need to have app.xxx.com/module/component — PNC
@PNC Do you really only have two routes in AdminModule? If yes, then you can directly inject one of these child components directly to your template conditionally. — Uğur Dinç
@abetteroliver no have many - I just built it without lazy loading intially, so all the routes have no concept of 'module'. If this is the only way, I'll need to change my urls to be 'admin/organisation-list' etc — PNC

wFitz wFitz · Accepted Answer · 2018-09-13T01:29:23

I think you can do it like this admin routes

const routes: Routes = [
  { path: '', component: PowerComponent },
  { path: 'manage/:id', component: FlowListComponent },
  { path: 'organisation-list', component: PowerComponent },
  { path: 'flow-list', component: FlowListComponent }

the one with path: '' is the default, I just checked it in a project I did a while ago.

Lazy loading routing not opening child module component

2 Answers