feedback module application starts loading all other module which are not required by you. And surely if the application is big then it is going to take lot of time to load and surely this is very bad user experience and you are not going to give any feedback. Here Lazy loading comes for rescue.
Lazy loading for Feature Module
- Reservation Module
- Passenger Module
- We will create a routing module for both App, Passenger and Reservation Module.
- Remove the imports of Reservation module from import array of App.module.ts.
- Add routes to Passenger and Reservation Module to app-routing.module.ts you created in second step.
Step 1 : Adding routing module to App, Passenger and Reservation module
Create reservation-routing.module.ts to your Reservation module i.e app/reservation folder. and add below code.
Create passenger-routing.module.ts to your Passenger module i.e app/passenger folder. and add below code.
Now your folder structure will be look something like this.
Step 2 : Remove the imports of Reservation module from import array of App.module.ts.
Step 3 : Add routes to Passenger and Reservation Module to app-routing.module.ts
Step 4: Add <router-outlet></router-outlet> in app.component.html
Here in app.component.html we have created two buttons which will make request to passenger and reservation modules individually. we have <router-outlet></router-outlet> so that passenger and reservation modules will be rendered at this position.
Now you are all done lets run our app using ng serve –open
your application will look like this.
Now right click->inspect element and go to network and click on passenger button. When you click on passenger and reservation module each module will be loaded on request basis as shown in images below. This is to be noted that
|After clicking on Passenger button|
|After clicking on reservation button|
Note : each module will be loaded only once at first request only.