找不到管道 'async'

Question

我正在尝试使用 Angular 2 和 Firebase 构建一个简单的博客，但我在组件中使用异步管道时遇到问题。我在控制台中收到错误消息。

zone.js:344Unhandled Promise rejection: Template parse errors: The pipe 'async' could not be found ("

[ERROR ->]{{ (blog.user | async)?.first_name }}

"): BlogComponent@6:3 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: The pipe 'async' could not be found ("

blog.component.ts

import {Component, Input} from "@angular/core";

@Component({
  selector: 'blog-component',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css'],
})

export class BlogComponent {
  @Input() blog;
}

blog.component.html

<h1 class="article-title">{{ blog.title }}</h1>
<p>{{ (blog.user | async)?.first_name }}</p>

app.component.ts

import { Component } from '@angular/core';
import { BlogService } from "./services/services.module";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  constructor(private blogService: BlogService) {}
  articles = this.blogService.getAllArticles();
}

app.component.html

<article *ngFor="let article of articles | async">
  <blog-component [blog]="article"></blog-component>
</article>

blog.service.ts

import {Injectable} from "@angular/core";
import {AngularFire} from "angularfire2";
import {Observable} from "rxjs";
import "rxjs/add/operator/map";

@Injectable()
export class BlogService {
  constructor(private af: AngularFire) { }

  getAllArticles(): Observable<any[]> {
    return this.af.database.list('articles', {
      query: {
        orderByKey: true,
        limitToLast: 10
      }
    }).map((articles) => {
      return articles.map((article) => {
        article.user = this.af.database.object(`/users/${article.user_id}`);
        return article;
      });
    });
  }
}

仅当我尝试在 blog.component.html 文件中使用异步时才会出现问题。如果我尝试在 app.component.html 文件中打印用户名，它会起作用。我应该在 blog.module.ts 中注入 AsyncPipe 吗？如何让异步在 blog.component.ts 中工作？

Answer 1

@NgModule.declarations 不被子模块继承。如果您需要来自模块的管道、指令和组件，则应将该模块导入到您的功能模块中。

包含所有核心管道的模块是 CommonModule 来自 @angular/common

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [ CommonModule ]
})
class BlogModule {}

它在 app.component 中起作用的原因是因为您很可能将 BrowserModule 导入 AppModule。 BrowserModule 重新导出 CommonModule，因此通过导入 BrowserModule，就像同时导入 CommonModule.

还值得注意的是 CommonModule 也有核心指令，例如 ngFor 和 ngIf。因此，如果您有一个使用这些功能的模块，您还需要将 CommonModule 导入该模块。

Answer 2

如果您在 app.module.ts

中使用多个模块，您也可能会遇到同样的错误

import { MatCardModule } from '@angular/material';
import { AppComponent } from './app.component';

// module 1
@NgModule({ exports: [MatCardModule] })
export class MaterialModule {}

// module 2
@NgModule({
    imports: [MaterialModule]
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

那么如果你使用命令生成一个组件：

ng generate component example

它被添加到第一个模块，而不是第二个模块：

import { MatCardModule } from '@angular/material';
import { AppComponent } from './app.component';
import { ExampleComponent } from './example/example.component';

// module 1
@NgModule({ exports: [MatCardModule], declarations: [ExampleComponent] })
export class MaterialModule {}

// module 2
@NgModule({
    imports: [MaterialModule]
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

这会产生同样的错误！将组件移动到 AppModule 将修复它。

@NgModule({
    imports: [MaterialModule]
    declarations: [AppComponent, ExampleComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

Answer 3

如果您已升级到 Angular 6 或 7，请确保在您的 tsconfig.ts 中关闭 enableIvy angularCompilerOptions

例如：

angularCompilerOptions: {
enableIvy : false; // default is true
}

这解决了我的问题，也许它也会节省其他人的时间。

Answer 4

在 Angular9 中添加新组件时，我不得不重新启动开发服务器，可能也是因为 HMR:

ng serve --hmr

如果没有这个，应用程序根本不会加载所有依赖项并发出此错误。

Answer 5

我在一次更改多个导入时有时会发现同样的问题。

我的应用程序再次正常运行，无需更改任何代码，而是重新启动 ng start。编码到很晚的惊喜之一。

通常这让我发疯，因为我正在检查所有导入，"Common Module" 的答案通常是有道理的，但以防万一有人发现我遇到的同样愚蠢的情况，现在你知道该怎么做了做。

Answer 6

如果您尝试了上述所有答案但它不起作用，只需执行 npm run start 它就会起作用，在我的例子中，在一些编译问题之后出现了这个错误。

Answer 7

如果您正在加载的路径上的组件未声明（通过 declarations:[]），那么您也会遇到此类错误。

Answer 8

如果您在优化的生产版本中获得此功能，则可能是由于 tree shaking，尤其是在您使用 sideEffects: false 时。 Angular 10 via ng new --strict.

现在鼓励使用此设置

，但暂时将其设置为 true 为我修复了它。

Answer 9

在我的例子中，管道的输入为空。因此，在问题的情况下，请确保 <p>{{ (blog.user | async)?.first_name }}</p> 中的 blog.user 不为空。

Answer 10

edit: 我一直在做我自己的项目，我注意到当代码有 any 类型时可能会出现这个错误构建错误，例如未关闭的 html 标签，如 <label>foo<label>。在那之后，我知道的唯一方法就是重置整个服务器。这很烦人，不应该那样。

当我的组件中有一个空的（实际上是注释的）函数实现时出现此错误

在html中： <div (click)="onClickFoo()">

在 .ts 中

onClickFoo() {
     // this.router.navigate([...])
}

Answer 11

您尝试加载的组件未在声明数组中声明，那么您将收到此类错误，在我的例子中，这是运输组件，如下所述：

Answer 12

当我尝试在用作对话框的组件中使用异步管道时，我遇到了这个问题。我通过在即时模块中声明组件来解决这个问题（我使用延迟加载）。应用程序模块，如果你不是。

找不到管道 'async'

The pipe 'async' could not be found

asynchronous

angular

firebase

firebase-realtime-database

angular2-observables