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 { }

Answer 2

You have not provided a Routes for Student.routing.module ?

Since you have directed the student.module , but you might have not provided from there what component you have been show.

If you have not created to Student.routing.module , create one and provide a default route in the same module.

const routes: Routes = [

  {path: '', component:StudentComponent } ];

Answer 3

您必须定义延迟加载模块的路由并指定延迟加载模块的根组件。