找不到管道“异步”答案

【问题标题】：The pipe 'async' could not be found找不到管道“异步”
【发布时间】：2017-01-30 05:19:05
【问题描述】：

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

zone.js:344Unhandled Promise 拒绝：模板解析错误：找不到管道“异步”（“

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

"): BlogComponent@6:3 ; 区域: ; 任务: Promise.then ; 值: 错误: 模板解析错误:(...) 错误: 模板解析错误: 找不到管道“异步”（“

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 中工作？

【问题讨论】：

尝试将CommonModule 添加到您的BlogModule 的imports
太棒了，非常感谢！那行得通。回复为答案，我将标记为正确答案。
谢谢它的工作:)
我在子模块的声明中缺少组件，这就是我收到错误的原因。如果这对某人有帮助。

标签： asynchronous angular firebase firebase-realtime-database angular2-observables

【解决方案1】：

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

所有核心管道的模块是CommonModule from @angular/common

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

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

它在app.component 中起作用的原因是因为您很可能将BrowserModule 导入AppModule。 BrowserModule 再导出CommonModule，所以通过导入BrowserModule，就好像也导入了CommonModule。

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

【讨论】：

这个答案还解决了我在共享模块中声明/导出的组件中使用date 管道的情况。谢谢。

【解决方案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 {}

【讨论】：

【解决方案3】：

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

例如：

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

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

【讨论】：

这确实有效，但我希望看到除了禁用核心系统功能之外的真正修复。
我正在阅读某处以全局导入CommonModule 也可以解决此问题，但我还没有测试过。
Ivy 尚未准备好生产，因此请跳过 Angular 7，启用 Angular 8 以后
一旦 Ivy 准备好投入生产，异步管道可能还有其他解决方法，我知道人们已经针对这个问题提出了错误。
不是正确的答案。禁用 Ivy 是一种解决方法。

【解决方案4】：

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

ng serve --hmr

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

【讨论】：

如果您重新安排相关服务，也会发生这种情况。例如，我有一个SavingsService，我将其拆分为SavingsService 和SavingsUIService。重新编译后，我得到了真正的错误，即新服务没有在任何地方提供。所以是的，这绝对是一个需要完全重新编译的红鲱鱼
@MikeGledhill 我认为这与使用 HMR 时执行的优化有关，以防止重新加载整个组件树。很可能包含异步管道的包没有为新组件注入。

【解决方案5】：

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

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

当我检查所有导入时，通常这会让我发疯，“通用模块”的答案通常是有道理的，但万一有人发现我面临的同样愚蠢的情况，现在你知道该怎么做了。

【讨论】：

这就是我的情况。我对模块进行了更改，不得不停止并重新启动应用程序。谢谢。

【解决方案6】：

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

【讨论】：

太奇怪了——但它帮助我。可能它以更好的方式重新启动角度服务器？
是的，有时在大型重构期间，这是唯一的解决方案...

【解决方案7】：

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

【讨论】：

或者这个答案的一个微妙变化：忘记在你的TestBed.configureTestingModule调用中声明被测组件。 ?
谢谢。每个人都在谈论“你只需要导入 CommonModule”，没有人说这也是原因之一。
谢谢@Jeroen 我花了一个多小时弄清楚为什么我已经导入了CommonModule
@StephaneJanicaud 是的，编程很有趣，除非它不是?
@Jeroen 是的，再次感谢你写的关于 OAuth2 + OIDC 和 SPA 的文章，我认为它也会对我使用同一个库时可能遇到的静默刷新问题有很大帮助:)

【解决方案8】：

如果您在优化的生产版本中获得此问题，则可能是由于树抖动，尤其是在您使用 sideEffects: false 时。现在这是 Angular 10 中通过ng new --strict 鼓励的设置。

Still have yet to figure out how to fix my project，但现在将它设置为 true 为我修复了它。

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

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

当我的组件中有一个空的（实际注释的）函数实现时，我收到了这个错误

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

在.ts中

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

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

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

【讨论】：