NullInjectorError：没有提供 DecimalPipe

Posted 2023-03-13

【中文标题】NullInjectorError：没有提供 DecimalPipe

【英文标题】：NullInjectorError: No provider for DecimalPipe

【发布时间】：2020-02-05 05:22:07

【问题描述】：

我在我的应用程序中实现了延迟加载。我的一项服务需要包含 DecimalPipe。

服务 --> 共享模块 --> 应用模块

这是我的结构。我已经在 app.module.ts 中包含了“CommonModule”，并且我的服务也需要十进制管道。

在我的共享模块中包含“十进制管道”会出现以下错误：

类型 DecimalPipe 是 2 个模块声明的一部分： CommonModule 和 SharedModule！请考虑将 DecimalPipe 移至 导入 CommonModule 和 SharedModule 的更高模块。你也可以 创建一个新的 NgModule 导出并包含 DecimalPipe 然后 在 CommonModule 和 SharedModule 中导入该 NgModule。

既然它已经是 Commons Module 的一部分，为什么不从 Commons Module 获取 Decimal 管道。 ? 如果未声明，则会显示以下错误

NullInjectorError: 没有 DecimalPipe 的提供者！

请告诉我如何处理此错误。 提前致谢！

【问题讨论】：

您的CommonModule 是否导出DecimalPipe 以允许其他模块访问它？您能否向我们展示模块的缩写代码 sn-p，以便我们了解您是如何导出/导入的？

CommonModule 来自'@angular/common'

我在导入和导出中都声明了“CommonModule”

你能解决这个问题吗？

【参考方案1】：

您需要在提供服务的模块中提供 DecimalPipe

例如，如果您的服务是“providedIn: 'root'” 那么你应该像这样在你的 AppModule 中提供 DecimalPipe：

import DecimalPipe from '@angular/common';
@NgModule(
  declarations: [
    AppComponent,
  ],
  imports: [ ],
  providers: [DecimalPipe],
  exports: [],
  bootstrap: [AppComponent]
)
export class AppModule 

【讨论】：

这种方法帮助我解决了这个问题。

【参考方案2】：

如果你想创建一个共享的 NgModule，在你的所有功能模块中导入 而不是 CommonModule。你会做这样的事情：

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';

...
@NgModule(
  imports: [CommonModule],
  declarations: [...],
  exports: [CommonModule, ...]
)
export class SharedModule 

然后，在您的所有功能模块中，您将放弃导入CommonModule，而是导入您的SharedModule。这应该使您的自定义代码可以访问CommonModule 中的所有管道和组件。

您不应在 NgModules 的声明中包含 Angular 的内置管道或组件，因为它们已在 Angular 的 NgModules 中声明。

如果您所做的只是尝试在组件中使用 DecimalPipe，那么在您提供服务的 NgModule 中导入 CommonModule 应该可以让您访问管道。

【讨论】：

这不起作用，我有一个共享模块将 CommonModule 导入和导出到所有模块中，但是如果我想在组件中使用 decimalPipe，我仍然必须在组件级别提供它