How to create a Component in Angular CLI for a specific Module? Lazy Loading in Angular 8+

By default when you creating any component in Angular 2+, it’ll declare under “app.module.ts” file.

But for example, there are so many components which not required to load at the time of page loading like “change password, User Profile etc…“. For that, you need to use the lazy loading concept of Angular and you need to create the component module-specific.

Step 1: Create a module with a lazy loading concept.

ng g module [module name] — route [routing path name]— module app.module

Example:

ng g module application — route application — module app.module

Step 2: To create any component for a specific module, the below code will help you.

ng generate component [component name] — module [module folder name]/[module name].module

Step 3: In the application routing. put the routing link as a children like below:

const routes: Routes = [
{
path: ‘’, component: ApplicationComponent,
children: [
{ path: ‘’, redirectTo: ‘manage-master’, pathMatch: ‘full’},
{path: ‘manage-master’, component: ManageMasterComponent}
]
}
];