延迟加载 angular 2 个模块

Question

我有一个包含 3 个模块的 angular 2 项目。 AppModule、共享模块和延迟加载模块。我希望这两个模块（延迟加载和应用程序）都导入共享模块，以便它们都可以使用共享模块提供的管道等。这可能吗？

我试过了，但我收到错误消息，告诉我共享模块已经加载。并且仅将其加载到 AppModule 中，但延迟加载的模块无法访问提供的元素。

我是否误解了 angular 模块？

Answer 1

是的，您可以将共享 NgModule 用于惰性和 non-lazy 模块

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

例如，您在 SharedModule 中提供的任何服务都将在两个模块中可用。

请看这个演示https://plnkr.co/edit/L2ypUQZiltSPXnLlxBoa?p=preview

延迟加载 angular 2 个模块

lazy loading angular 2 module

module

loading

lazy-evaluation

angular