1

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 { }
satyendra kumar
  • 719
  • 2
  • 10
  • 19

1 Answers1

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.

Mehmet Sunkur
  • 2,373
  • 16
  • 22