Angular 8 - Lazy Loading of Module not working

Question

As shown in https://stackblitz.com/edit/angular-qbbhgp, I am trying to achieve a very simple routing which involve lazy loading of module. When I click on the "link", it seems not working. I expected to see the word "Student Page" appear, but it did not happen.

Note that I would like the solution to involve the use of import api (the newer syntax to lazy load module)

Answer 1

It's because you haven't added routing to your student module.

Fork of your stackblitz: https://stackblitz.com/edit/angular-zrnrxj

The student module needs to use .forChild() when declaring routes since it is a child module.

const routes:Routes = [
  { path: '', component: StudentComponent } 
]

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [StudentComponent]
})
export class StudentModule { }