Lazy loading Angular modules with latest Angular material design gives error

Question

I am using latest versions of Angular and Angular Material. I have implemented lazy loading feature modules which is working fine without material design.

I need the below three material components/modules to be used in my view -

MatSidenavModule, MatIconModule, MatListModule

only when implementing lazy load I get the template parse error. Please fin d attached the screen shot for errors.

I have created material shared module as below and importing in feature modules. Code for material shared module.

import { NgModule, ModuleWithProviders } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// material designs
import {
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatIconRegistry
  } from '@angular/material';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MatSidenavModule,
      MatIconModule,
      MatListModule
    ],
  exports: [
    BrowserModule,
    BrowserAnimationsModule,
      MatSidenavModule,
      MatIconModule,
      MatListModule
    ]
})
export class MaterialSharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: MaterialSharedModule,
      providers: [MatIconRegistry]
    };
  }
}

I am importing in my feature module "LandingPage.module.ts" like below -

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

/* // material designs
import {
  MatSidenavModule,
  MatIconModule,
  MatListModule
} from '@angular/material'; */

import { AppSharedModule } from '../shared.module';


import { SharedModule } from '../shared/shared.module';
import { LandingRoutingModule } from './landing-routings.module';
import { **MaterialSharedModule** } from '../material.shared.module';
@NgModule({
  imports: [
    CommonModule,
    **MaterialSharedModule**,
    SharedModule,
    LandingRoutingModule
  ],
  declarations: [
  ]
})
export class LandingPageModule { }

Below is LandingFeature module routings -

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
    { path: '', pathMatch: 'prefix', redirectTo: 'dashboard' },
    { path: 'dashboard', component: HomeComponent, data: { title: 'Dashboard', path : 'dashboard' } },
    /* {
      path: 'tenantManagement',
      loadChildren: 'app/tenant/tenant-routings.module#TenantRoutingModule'
    },
    {
        path: 'application',
        loadChildren: 'app/application-registraion/application-routings.module#ApplicationRoutingModule',
       data : {title: 'application', path: 'application'}
    } */
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  declarations: [
    HomeComponent
  ]
})
export class LandingRoutingModule { }

Mehmet Sunkur · Accepted Answer · 2018-02-26 09:18:13Z

2

LandingPageModule imports MaterialSharedModule but it doesn't import your HomeComponent. MaterialSharedModule and HomeComponent should be imported in the same module.

In short if your component uses another module the module which it is belong to should import the modules.

"LandingRoutingModule" has "HomeComponent" in its declarations. This makes "HomeComponent" belong to "LandingRoutingModule" but "LandingRoutingModule" doesn't import "MaterialSharedModule". So "HomeComponent" doesn't know about "MaterialSharedModule" This causes the error which you got.

By convention routing modules just contains routes and doesn't have components in its declarations.

I suggest you to remove "HomeComponent" declaration from "LandingRoutingModule" and add it to" LandingPageModule". "LandingPageModule" already imports "MaterialSharedModule". So this should work.

edited Feb 26, 2018 at 9:18

answered Feb 26, 2018 at 8:00

Mehmet Sunkur

2,43318 silver badges22 bronze badges

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

4 Comments

satyendra kumar Over a year ago

I have imported "HomeComponent" in "Landing-routings.module". Do I need to import "HomeComponent" in LandingPageModule as well?

satyendra kumar Over a year ago

Got your point and it worked for me. I had to import "homeComponnet" in Landing-routings.module.ts and worked. :)

Mehmet Sunkur Over a year ago

I added more details to my answer

Antoniossss Over a year ago

By convention routing modules just contains routes and doesn't have components in its declarations. That is so wrong.

Collectives™ on Stack Overflow

Lazy loading Angular modules with latest Angular material design gives error

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related