lazy loading angular 2 module

Question

I have an angular 2 project with 3 modules. AppModule, Shared module and a lazy loaded module. I want both the modules (lazy loaded and App) to import the shared module so they both can use the pipes etc.. provided by the shared module. Is this possible?

I have tried but I get errors telling me that the shared module has already been loaded. And to only load it in the AppModule only but then the lazy loaded module doesn't have access to provided elements.

Am I misunderstanding the angular modules?

Answer 1

yes, you can use share NgModule for both lazy and non-lazy Module

app/shared/shared.module.ts

import { NgModule } from '@angular/core';
import { MustSharedService } from './must-shared.service';

@NgModule({
  providers: [MustSharedService]
})
export class SharedModule {}

app/app.module.ts

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

@NgModule({
  imports: [
    SharedModule,
    ...
  ],
})
export class AppModule {}

app/lazy/lazy.module.ts

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

@NgModule({
  imports: [
    SharedModule,
    ...
  ],
})
export class LazyModule {}

from there any service, for example, you provide in SharedModule will available in both 2 Module.

please see this demo https://plnkr.co/edit/L2ypUQZiltSPXnLlxBoa?p=preview