Angular - 未找到带有名称的管道

Question

我使用“ng g pipeline”命令创建了一个管道。当我在代码中使用它时，我收到控制台错误。 下面附有代码的屏幕截图。 错误：错误 NG8004：找不到名称为“filterByPrcName”的管道。

Answer 1

如果您的组件不在其父模块的声明数组中，您也会收到此错误。

Answer 2

您需要打开声明组件的 Angular 模块，然后将其添加到声明中，并添加所需的导入。

示例：

 <td>{{product.productCode | lowercase | convertToSpaces: '-' }}</td>

src/app/products/product-list.component.html 中的错误：48:61 - 错误 NG8004：找不到名为“convertToSpaces”的管道。

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ProductListComponent } from './products/product-list.component';
import { ConvertToSpacesPipe } from './shared/convert-to-spaces.pipe'; // <-- Add this

@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent,
    ConvertToSpacesPipe  // <-- Add this
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  bootstrap: [AppComponent],

  //exports: [AppComponent],

})
export class AppModule { }

转换为空间.pipe.ts

import { Pipe, PipeTransform } from '@angular/core'

@Pipe({ name: 'convertToSpaces' })

export class ConvertToSpacesPipe implements PipeTransform {

    transform(value: string, character: string): string {
        return value.replace(character, ' ');
    }

}

Answer 3

当我在延迟加载模块中使用货币管道时，我遇到了这个错误，为此你必须在当前模块和 app.module.ts 中导入 CommonModule

对于非延迟加载的模块无需导入

CommonModule

Answer 4

在修改其他人实现的代码时，我花了很长时间试图解决这个问题，并努力解决 app.module.ts 中缺少的内容（最新版本的 Angular 是否改变了一些东西），最后我发现还有另一个“模块”除了 app.module.ts 之外，还在代码库中。

当我最终弄清楚这一点并按照

@live-love 的答案进行代码修改时，包括在另一个模块而不是 app.module.ts 中进行管道声明，它终于起作用了 - 唷！

Answer 5

除了上面的答案之外，如果您在 SharedModule 中有管道，请确保也在其导出数组中添加管道

Answer 6

如果您在 HTML 模板中使用管道的类名称，而不是使用声明管道时使用的实际名称，则可能会发生这种情况

在我的模板中，我使用“TrustHTMLPipe”而不是“trustHTML”

Answer 7

如果您已经构建了 Angular 库（作为多项目），请务必将

my-thing.module.ts

 添加到 

public-api.ts

我的片段

public-api.ts

export * from "./my-thing/my-thing.module";  // Don't forget this line!
export * from "./my-thing/my-thing.service";
export * from "./my-thing/list-my-thing/list-my-thing.resolver.service";
export * from "./my-thing/list-my-thing/list-my-thing.component";
...

Answer 8

如果您将管道导入到

sharedmodule 的声明中，首先将此模块添加到当前组件的模块中。

样品：

import { SharedModule } from '@shared/shared.module';

  imports: [
  ...
  SharedModule ,
  ...
]
})
export class SettingsModule { }