Angular 2延迟加载模块 - 服务不是单例答案

【问题标题】：Angular 2 lazy loaded module - service not singletonAngular 2延迟加载模块 - 服务不是单例
【发布时间】：2017-06-21 06:06:05
【问题描述】：

我已经在我的应用程序中实现了延迟加载模块，app.module.ts 配置正确。

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

路由配置

const APP_ROUTES: Routes = [
  { path: '', component: HomeComponent },
  { path: 'tools', loadChildren: 'app/tools/tools.module#ToolsModule' }
];

export const routing = RouterModule.forRoot(APP_ROUTES);

通过子模块中的 providers 字段提供服务并在该模块的组件之间切换会重新实例化该服务（通过登录服务构造函数进行测试）。

该服务仅在模块中提供。

@NgModule({
  declarations: [
    ToolsComponent,
    ToolsCartComponent,
    ToolsContainerComponent,
    ToolsFormComponent
  ],
  imports: [
    CommonModule,
    toolsRouting
  ],
  providers: [ToolsService]
})
export class ToolsModule { }

为什么提供的服务不是单例？

编辑：

我已经修改了一个延迟加载模块的 plunker 示例，方法是添加一个仅限于该模块的服务（在本例中为后端模块）。在 BackendComponent 和 BackendSecondComponent 之间切换（它们都在延迟加载模块下声明）服务被重新实例化（在控制台中可见）

Plunker link

【问题讨论】：

有同样的问题，我相信这是因为延迟加载模块时没有调用 .forRoot() 方法......我正在寻找类似的解决方案，但我需要我的服务一个单身汉.. .. .cheers
有类似的问题。每次我打开带有延迟加载模块的路由时，都会创建新服务，尽管服务提供者处于模块级别。
我相信您已经知道解决方法（在应用程序模块中提供服务）工作插件：plnkr.co/edit/UnxciqNLfL80BotWsYri?p=preview。需要注意的一点是这个警告：Angular2 Module documentation link 在文档中它说 “不要在共享模块中指定应用程序范围的单例提供程序。导入该共享模块的延迟加载模块将制作自己的副本服务。” 与此有关，但我不知道核心原因。

标签： javascript angular typescript angular2-services

【解决方案1】：

我相信这是一个已知问题，在此处跟踪 https://github.com/angular/angular/issues/12869。

【讨论】：

【解决方案2】：

我认为这与 Stackoverflow 帖子的问题相同：How do I provide a service in a lazy-loaded module and have that service scoped to just the lazy-loaded module and its components?

解决方案是在延迟加载的模块中创建一个“根组件”，并将组件添加到这个新的根组件中。

【讨论】：