Angular 6 routing with lazy loading

Question

I have a github project which would explain the issue

Get Project Here

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: './admin/admin.module#AdminModule'
  },
  {
    path: '',
    component: HomeComponent
  }
];

this is from admin module routing

const routes: Routes = [{
  path: '',
  component: OverviewComponent
},
  {
    path: 'users',
    component: UserComponent
  }];

This project has home component with no paths in url

• http://localhost:4200 but it is loading empty path (OverviewComponent) defined in admin module which is lazy loaded.

  As per my understanding all the lazy loaded url path should be

• http://localhost:4200/admin (should load overview component). http://localhost:4200/admin/users (should load users component)

I see url paths are working even there is no module prefix.

• http://localhost:4200 (this is loading overview instead of home component)
• http://localhost:4200/users (this is loading user component instead of throwing error.)

Thanks in advance.

Answer 1

In AdminModule, you should one also in admin.component.html.

You need to create AdminComponent as well for this.

For reference : https://www.tektutorialshub.com/angular-child-routes-nested-routes/

Answer 2

It is because you have imported and declared admin components in app module itself. If you want lazy loading change app.module.ts file as below

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent

  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

and admin.module.ts as below

@NgModule({
  imports: [
    CommonModule,
    AdminRoutingModule
  ],
  declarations: [OverviewComponent, UserComponent]
})
export class AdminModule { }