logo标签列表

Angular - 没有找到名为的管道

angularangular8angular9web-frontendangular-pipe
60
9
你需要将它添加到模块的声明数组中。如果你希望将其暴露给导入该模块的其他模块，还需要将其添加到导出数组中。 - Jason White
1
谢谢@JasonWhite。我忘记导出它了。现在它运行得很好。 - user13652113
8个回答
92
确保将您的管道放在其模块的providers和declarations中，因为当您的组件不在声明数组中时，您也会遇到此错误。
@NgModule({
  imports: [
     ...  
  ],
  declarations: [
     MyComponent,
     FilterByPrcNamePipe           // <-- Add pipe here
  ],
  exports: [MyComponent],
  providers: [FilterByPrcNamePipe] // <-- And also here
})
export class MyModule {}
9
在我看来，这个答案非常被低估。通常这是一个很难捉摸的问题。 - TheZerg
3
这是每个人都需要知道的真相！ 请前往您的模块并在声明部分添加此特定类。 - Alok Rajasukumaran
1
我在 VS Code 中偶尔会收到这个错误信息，尽管我的代码是正确的。我只需要打开 xxx.module.ts 文件，这些问题就立刻消失了。也许还有其他人遇到了同样的问题...可能是未来将被修复的一个错误。 - MikhailRatner
1
补充一下 @MikhailRatner 的话 - 在沮丧的时候，我们经常会忘记使用 Ctrl + R 或者 F1 -> 重新加载窗口。 - Hari Reddy
36
您需要打开声明组件的 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 { }

将 convert-to-spaces.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, ' ');
    }

}
无法在Ionic 4中实现，对我没有效果。 - Pratik
1
仅仅声明是不够的，它还需要被导出。 - lilalinux
1
如果您想将管道注入到构造函数中，以便从代码中使用它，则还必须将其作为提供程序包含在内。 - lilalinux
8

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

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

2
这可能是因为您在HTML模板中使用了管道的类名，而不是在声明管道时使用的实际名称。
在我的模板中，我使用的是'TrustHTMLPipe'而不是'trustHTML' enter image description here
2
我花了很长时间尝试解决这个问题，因为我要修改别人实现的代码，在app.module.ts中努力寻找我错过的东西或者最新版本的Angular是否改变了某些东西，直到最后我发现除了app.module.ts之外，代码库中还有另一个“模块”。

当我终于弄清楚了这一点，并按照@live-love的答案进行了代码修改，包括在另一个模块中声明管道而不是在app.module.ts中，它终于起作用了 - 呼！
2
除了以上的答案，如果你在 SharedModule 中使用了管道，请确保你也将该管道添加到它的 exports 数组中。
0
如果您已经构建了一个 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";
...
0
如果您将管道导入到一个“sharedmodule”的声明中，首先将此模块添加到当前组件的模块中。
示例：
import { SharedModule } from '@shared/shared.module';

  imports: [
  ...
  SharedModule ,
  ...
]
})
export class SettingsModule { }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接