119

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

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

[错误->]{{ (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>

博客服务.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 中工作？

4

12 回答 12

202

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

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

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

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

它在. app.component_ 再出口，所以通过进口，就像进口一样。BrowserModuleAppModuleBrowserModuleCommonModuleBrowserModuleCommonModule

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

于 2016-09-21T20:26:23.870 回答
43

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

于 2020-06-22T18:38:50.457 回答
22

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

ng serve --hmr

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

于 2020-03-15T09:49:27.080 回答
14

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

于 2020-05-14T11:18:10.340 回答
11

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

在此处输入图像描述

于 2021-03-12T07:13:27.767 回答
11

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

例如：

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

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

于 2018-11-02T14:50:49.317 回答
7

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

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

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

于 2020-05-04T23:43:57.193 回答
5

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

于 2020-07-13T12:56:57.697 回答
3

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

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

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

在.ts

onClickFoo() {
     // this.router.navigate([...])
}
于 2020-08-13T15:13:30.400 回答
1

如果您在 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 {}
于 2018-04-11T14:47:31.440 回答
1

如果您在优化的生产版本中获得此信息，则可能是由于摇晃树造成的，尤其是在您使用sideEffects: false. 现在这是 Angular 10 中鼓励使用的设置ng new --strict。

还没有弄清楚如何修复我的项目，但是现在将它设置为 true 为我修复了它。

于 2020-06-28T17:14:31.073 回答
0

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

于 2021-04-17T15:57:46.763 回答