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)
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 { }
You have to define the routes of the lazy loaded module and specify the root component of the lazy loaded module.
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 } ];
