Search code examples
angularlazy-loadingangular2-modules

Error in lazy load module in angular 4.x

I have implemented lazy loading module in angular 4.x application.

app.route.ts

const routes: Routes = [
  {
    path: '',redirectTo:'home',pathMatch:'full'
  },
  {
    path:'home',
    children:[
      {path:'',redirectTo:'index',pathMatch:'full'},
      {path:'index',component:HomeComponent},
      {path:'dashboard',component:DashBoardComponent}
    ]
  },
  {path:'pages',
   loadChildren:'./form/form.module#FormModule'
},
   {path:'buttons',component:ButtonsComponent},

   {path:'card',component:CardComponent},
   {path:'**',component:NotFoundComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

form.routing.ts

const routes: Routes = [
  {
      path:'',component:FormComponent,children:[
          {path:'',redirectTo:'login',pathMatch:'full'},
        {
            path:'signup',component:RegisterComponent
        },
  {
      path:'login',component:LoginComponent},
  ]
  },

];
export const FormRouting: ModuleWithProviders = RouterModule.forChild(routes);

Form.module.ts

@NgModule({
    imports:[
        CommonModule,
        FormRouting,
        ],
    declarations:[
        FormComponent,
        LoginComponent,
        RegisterComponent
    ]

})
export class FormModule{}

The application is working without lazy load, but after lazy load it is generating template parse error:

enter image description here

I have imported MaterialModule in app.module.ts. How can I resolve the issue? Thanks in advance.

Solution

  • You need to import MaterialModule to lazy loaded FormModule as well if components that are declared in FormModule are using MaterialModule:

    @NgModule({
    imports: [
        CommonModule,
        FormRouting,
        MaterialModule
        ],
    declarations: [
        FormComponent,
        LoginComponent,
        RegisterComponent
    ]

})
export class FormModule{}