Question

我正在关注Angular Documentation，并尝试向特定模块（OrdersModule）提供服务（OrderService）。将服务导入组件（OrderListComponent）后，出现错误。有人可以告诉我，我在这里做错了吗？

这是我的stackblitz代码中的link。

order.service.ts

import { Injectable } from '@angular/core';
import { OrdersModule } from './orders.module';

@Injectable({
  providedIn: OrdersModule
})
export class OrderService {
  constructor() {
  }

  ...
}

order-list.component.ts

import { Component, OnInit } from '@angular/core';
import { OrderService } from '../order.service';

@Component({
  selector: 'order-list',
  templateUrl: './order-list.component.html',
  styleUrls: [ './order-list.component.css' ]
})
export class OrderListComponent implements OnInit {
  ...

  constructor(private orderService: OrderService) {
    ...
  }

  ...
}

我遇到以下错误：

Error: Uncaught (in promise): 
Error: StaticInjectorError(AppModule)[OrderListComponent -> OrderService]:
StaticInjectorError(Platform: core)[OrderListComponent -> OrderService]:
NullInjectorError: No provider for OrderService!

Answer 1

大多数时候，在您的服务中使用providedIn = 'root'。它会注册使用根应用程序注入器进行服务，将被摇晃，并且将可用于需要它的任何组件。摇树将确保仅将服务包含在捆绑包中使用。
如果服务仅需要在组件中使用providers数组，在组件及其嵌套子组件中提供。
不建议在模块中使用providers数组。

如果要使用providedIn='OrdersModule' 将对服务的访问限制为特定的延迟加载模块（OrdersModule）。它然后将需要一个额外的模块来防止通函依赖问题。

这在模块上提供了服务隔离水平。如果应用程序中还有其他任何组件延迟加载的模块尝试引用服务“超出进样器范围”错误。

请参阅此answer

Answer 2

看起来好像有一个open issue。

如果您需要像示例中那样严格地在延迟加载的模块中提供服务，则有两种选择：

Answer 3

您应将OrderService添加到providers的{{1}}数组中。这是如何使用OrdersModule和providedIn的指南。 https://angular.io/guide/providers#providedin-and-ngmodules

特定NgModule的Angular服务

3 个答案: