CODEWITHSUNDEEP
angularangular-materialangular-material2angular5
satyendra kumar
satyendra kumar

Reputation: 759

Lazy loading Angular modules with latest Angular material design gives error

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.

enter image description here

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

Upvotes: 1

Views: 8151

Answers (1)

Mehmet Sunkur
Mehmet Sunkur

Reputation: 2423

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.

Upvotes: 2

Related Questions