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％的时间中，使用provedIn ='root'。它将向根应用程序注入器注册该服务，将其摇晃，并将对需要它的任何组件可用。通过摇晃树，可以确保仅在使用服务的捆绑包中包含该服务。
如果只需要在组件及其嵌套子组件中提供服务，则在组件中使用providers数组。（用于在组件级别隔离服务，或者每个组件需要多个服务实例。）
不要在模块中使用providers数组（这是旧语法，不再建议使用）
如果您想将对服务的访问权限限制为特定的延迟加载模块，请使用providerIn ='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无法解决（未定义）。

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

注意您实际上看不到stackblitz上的依赖性问题，但是如果您在本地角度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

我认为在AppModule中使用providedIn没有任何意义，您最好也使用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已更正。谢谢你们！

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

4 个答案: