Question

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

zone.js：344Unhandled Promise rejection：模板解析错误：   无法找到管道'async'（“


[错误 - ＆gt;] {{（blog.user | async）？。first_name}}

“）：BlogComponent @ 6：3;区域：;任务：Promise.then;值：错误：模板解析错误：（...）错误：模板解析错误：   无法找到管道'async'（“

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

在Angular 9中添加新组件时，可能也由于HMR而不得不重新启动开发服务器：

ng serve --hmr

否则，应用程序将不会完全加载所有依赖项并发出此错误。

Answer 3

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

例如：

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

那解决了我的问题，也许也可以节省其他人的时间。

Answer 4

如果未声明您正在加载的路径上的组件（通过declarations:[]），则也会出现这种类型的错误。

Answer 5

如果您尝试了上述所有答案，但不是有效的方法，只需执行npm run start即可，就我而言，经过一些编译问题后，出现了此错误。

Answer 6

有时一次更改多个导入时，我发现了相同的问题。

我的应用可以再次正常工作，无需更改任何代码，而是重新启动ng start。编码迟到的惊喜之一。

通常，当我检查所有进口商品时，这会让我发疯，并且“通用模块”的答案通常很有意义，但以防万一有人发现我所面临的同样愚蠢的情况，现在您知道该怎么做了。 / p>

Answer 7

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

Answer 8

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

Answer 9

如果您在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 10

如果要在优化的生产版本中获得此功能，可能是由于摇树，尤其是在使用sideEffects: false的情况下。现在，这是通过ng new --strict在Angular 10中鼓励使用的设置。

Still have yet to figure out how to fix my project，但暂时将其设置为true。

Answer 11

编辑：我一直在做自己的项目，并且我注意到当代码具有任何种构建错误（例如未封闭的html标记）时，可能会发生此错误。像<label>foo<label>。在那之后，我知道的唯一方法是只重置整个服务器。这很烦人，不应该那样。

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

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

在.ts

中

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

Answer 12

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

在Angular2组件

12 个答案: