Angular 6 提供的不起作用-> StaticInjectorError

Question

我正在尝试在 Angular 中使用“providedin”功能，但收到错误“StaticInjectorError(AppModule)[DashboardComponent -> DashboardService]:”

@Injectable({
  providedIn: DashboardModule
})
export class DashboardService {
  getContent() {
    return 'Dashboard Service works!!!';
  }
}

完整演示https://stackblitz.com/edit/angular-kbkjet 感谢您的努力！

Answer 1

• 98% 的情况下，使用 providedIn = 'root'。它将向根应用程序注入器注册服务，将被摇树，并将可供任何需要它的组件使用。摇树将确保服务仅包含在使用它的捆绑包中。
• 如果只需要在组件及其嵌套子项中提供服务，则在组件中使用 providers 数组。 （用于组件级别的服务隔离，或者每个组件需要多个服务实例。）
• 不要在模块中使用 providers 数组（这是旧语法，不再推荐）
• 如果您想限制对特定延迟加载模块的服务访问，请使用 providedIn='lazymodule'。然后它将需要一个额外的模块来防止循环依赖问题。这提供了模块级别的服务隔离。如果此延迟加载模块之外的应用程序中的任何其他组件尝试引用该服务，则会生成“超出注入器范围”错误。

有关“附加模块”的更多信息，请参阅此：https://www.youtube.com/watch?v=jigR_jBhDMs&feature=youtu.be

此处的示例代码：https://github.com/web-dave/provide-in-test

这里讨论循环依赖问题：https://github.com/web-dave/provide-in-test/issues/1

Answer 2

Stepan Suvorov 发布的stackblitz example 在使用时不起作用

providedIn: AppModule

因为依赖问题，导致AppModule 未解决（未定义）。

如果您在@Injectable 装饰器上方添加console.log(AppModule)，则输出为undefined。

注意 您实际上看不到 stackblitz 上的依赖问题，但如果您在本地 Angular cli 上复制项目，您会看到以下警告。

检测到循环依赖中的警告： src\app\app.component.ts -> src\app\my.service.ts -> src\app\app.module.ts -> src\app\app.component.ts

检测到循环依赖中的警告： src\app\app.module.ts -> src\app\app.component.ts -> src\app\my.service.ts -> src\app\app.module.ts

检测到循环依赖中的警告： src\app\my.service.ts -> src\app\app.module.ts -> src\app\app.component.ts -> src\app\my.service.ts

我认为在providedIn 中使用AppModule 没有任何意义，您不妨使用root。但是如果你希望你的服务只在子模块中提供，这应该像stackblitz demo

这是related github issue

注意：在声明一个可注入服务时，如果你使用providedIn和一个模块值，指定的模块不能是声明一个使用该服务的组件的模块（相当拗口）

Answer 3

确保您在测试中导入了这样的模块：

beforeEach(() => TestBed.configureTestingModule({
  imports: [DashboardModule]
}));

Answer 4

终于找到了解决办法：https://angular.io/guide/providers#providedin-and-ngmodules 服务也应该在模块的提供者部分提及。

@NgModule({
  imports: [CommonModule],
  declarations: [DashboardComponent],
  exports: [DashboardComponent],
  providers: [DashboardService]
})

Demo 已更正。 谢谢各位！