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.

Stefan Svrkota · Accepted Answer · 2017-06-23 12:24:42Z

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, 2017 at 12:24

Stefan Svrkota

50.8k10 gold badges100 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ghanshyam Singh Over a year ago

still getting this error Can't bind to 'disabled' since it isn't a known property of 'md-input-container ?

Stefan Svrkota Over a year ago

@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.

Ghanshyam Singh Over a year ago

Do I have to import the modules in each and every lazy load modules? Is there any way to import just once?

Stefan Svrkota Over a year ago

@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.

Collectives™ on Stack Overflow

Error in lazy load module in angular 4.x

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related