In this tutorial, I am going to create an angular lazy loading module example. This lazy loading concept will help us to imporve the angular application performace as it will load the only components that we are accessing. Before jumping into lazy load concept, you need to create an angular project with following command “ng new ang-lazyload”. Right after you execute this command you will be asked with couple of questions, type “Y” for angular routing and choose “CSS” for styling your angular application.
Now, navigate to “ang-lazyload” folder and then create an empoyee module with the below command, this will be create a module along with routing file. “ng g m feature/employee –routing=true“. Then create two components called “employee-list” and “add-employee” using the below commands: “ng g c feature/employee/employee-list“ “ng g c feature/employee/add-employee“
Now, i wanted to create a shared module along with header and footer components without router module. We don’t need a router module for this as we are going to utilize this folder components across the application. “ng g m shared“ “ng g c shared/header“ “ng g c shared/footer“
And I am using bootstrap in this tutorial for decent look & feel so we need to install bootstrap npm package with the command “npm install bootstrap –save-dev“ Then open up “angular.json” file and append in styles with the following line and you need to restart your app server to see the changes in browser. “node_modules/bootstrap/dist/css/bootstrap.min.css“
Now, import “employee” and “shared” module in “app.module.ts” file. Update the “app.module.ts” with “app-header”, “router-outlet” and “app-footer”.
Also open up app routing module and update the routes with the below code.