Error in lazy load module in angular 4.x

Question

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:

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

score 2 · Accepted Answer · answered Jun 23 '17 at 12:24

2

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{}

answered Jun 23 '17 at 12:24

Stefan Svrkota

48,787
9
98
87

still getting this error `Can't bind to 'disabled' since it isn't a known property of 'md-input-container` ? – Ghanshyam Singh Jun 23 '17 at 12:27
1

@GhanshyamSingh Well, that's entirely other error, you should check Material Angular docs to solve that one, I haven't used it personally. And it's obvious what the error is to be honest, you are using `disabled` property on `md-input-container`, but it doesn't exist. – Stefan Svrkota Jun 23 '17 at 12:29
Do I have to import the modules in each and every lazy load modules? Is there any way to import just once? – Ghanshyam Singh Jun 23 '17 at 12:30
3

@GhanshyamSingh You can create shared module and export modules that you use very often and then only import shared module in lazy loaded modules instead of importing each one separately. – Stefan Svrkota Jun 23 '17 at 12:31

Error in lazy load module in angular 4.x

1 Answers1