providedIn:LazyModule 失败,没有提供程序错误

providedIn: LazyModule fails with no provider error

我想将 providedIn 选项引用到提供可声明项和依赖项的 Angular 模块。我创建了一个附加模块 SharedModule 作为惰性模块 LazyModule 的子模块,以便它可以用作我想提供的惰性服务的“锚点”(CounterService 在我的例子中)。我一直在关注这个 guide 来实现它,但显然做错了什么。 此外,我做了一个小方案,但请查看 StackBlitz 以查看完整示例。

 Eager Part                                        Lazy Loaded Module

 +----------------------------------------------+  +--------------------------------------+
 |Routes:                                       |  | @NgModule({                          |
 |                                              |  |   imports: [SharedModule]            |
 |{                                             |  | }                                    |
 |  path: 'lazy',                               |  | export class LazyModule {}           |
 |  loadChildren: './lazy/lazy.module#LazyModule|  |                                      |
 |}                                             |  |                                      |
 +----------------------------------------------+  | SharedModule                         |
                                                   | +----------------------------------+ |
                                                   | |@NgModule({                       | |
                                                   | |  declarations: [SharedComponent],| |
                                                   | |  exports: [SharedComponent]      | |
                                                   | |})                                | |
                                                   | |export class SharedModule {}      | |
                                                   | +----------------------------------+ |
                                                   |                                      |
                                                   |                                      |
                                                   | LazyService                          |
                                                   | +----------------------------------+ |
                                                   | |@Injectable({                     | |
                                                   | |  providedIn: SharedModule        | |
                                                   | |})                                | |
                                                   | |export class CounterService {     | |
                                                   | |  counter = 0;                    | |
                                                   | |}                                 | |
                                                   | +----------------------------------+ |
                                                   |                                      |
                                                   +--------------------------------------+

正如 article that you cited 提到的,您需要在其自己的模块中定义服务以避免循环依赖问题。

counter.module.ts

import { NgModule, ModuleWithProviders } from "@angular/core";


@NgModule({
})
export class CounterModule {}

counter.service.ts

import { Injectable } from '@angular/core';
import { CounterModule } from "./counter.module";

@Injectable({
  providedIn: CounterModule
})
export class CounterService {
  counter = 0;
}

在共享模块中导入计数器模块。 shared.module.ts

@NgModule({
  imports: [
      CounterModule
  ],
  declarations: [SharedComponent],
  exports: [SharedComponent]
})
export class SharedModule {}

这是工作堆栈闪电战:https://stackblitz.com/edit/providedin-module-wglojs