在Angular2组件中找不到管道"async"

Question

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

zone.js:344Unhandled Promise rejection:模板解析错误:找不到管道'async'("

[错误 - >] {{(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文件中使用async时才会出现问题.如果我尝试在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

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

Answer 3

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

ng serve --hmr

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

Answer 4

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

Answer 5

如果您尝试了上述所有答案，但它不起作用意味着，只要这样做npm run start就会起作用，在我的情况下，在某些编译问题之后，此错误出现了。

Answer 6

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

例如:

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

这解决了我的问题,可能也会节省别人的时间.

Answer 7

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

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

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

Answer 8

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