我正在尝试使用 Angular 2 和 Firebase 构建一个简单的博客，但在组件中使用异步管道时遇到问题。我在控制台中收到错误。
zone.js:344Unhandled Promise 拒绝：模板解析错误：找不到管道'async' (" [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>
博客服务.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
@NgModule.declarations 不被子模块继承。如果您需要模块中的管道、指令、组件，则应将该模块导入您的功能模块。
具有所有核心管道的模块是来自 @angular/common 的 CommonModule
import { CommonModule } from '@angular/common';
@NgModule({
imports: [ CommonModule ]
})
class BlogModule {}
它在 app.component 中起作用的原因是因为您很可能将 BrowserModule 导入 AppModule。 BrowserModule 重新导出 CommonModule，因此通过导入 BrowserModule，就好像也导入了 CommonModule。
还值得注意的是，CommonModule 也有核心指令，例如 ngFor 和 ngIf。因此，如果您有一个使用这些的功能模块，您还需要将 CommonModule 导入该模块。
如果您正在加载的路由上的组件未声明（通过 declarations:[]），那么您也会收到此类错误。
TestBed.configureTestingModule 调用中声明被测组件。 🙈
在 Angular 9 中添加新组件时，我不得不重新启动开发服务器，这可能也是因为 HMR：
ng serve --hmr
没有这个，应用程序根本没有加载所有依赖项并发出此错误。
SavingsService，我将其拆分为 SavingsService 和 SavingsUIService。重新编译后，我得到了真正的错误，即新服务没有在任何地方提供。所以是的，这绝对是一个需要完全重新编译的红鲱鱼
如果您尝试了上述所有答案但它不起作用，只需执行 npm run start 即可，在我的情况下，在一些编译问题之后出现此错误。
您尝试加载的组件未在声明数组中声明，那么您将收到此类错误，在我的情况下，这是运输组件，如下所述：
https://i.stack.imgur.com/zK2gd.png
如果您已升级到 Angular 6 或 7，请确保在 tsconfig.ts 中关闭 angularCompilerOptions 中的 enableIvy
例如：
angularCompilerOptions: {
enableIvy : false; // default is true
}
这解决了我的问题，也许它也会节省其他人的时间。
CommonModule 也可以解决此问题，但我尚未测试。
有时我在一次更改多个导入时发现了同样的问题。
我的应用程序在没有更改任何代码但重新启动 ng start 的情况下再次恢复正常。编码的惊喜之一直到很晚。
通常，当我检查所有导入时，这会让我发疯，“通用模块”的答案通常是有道理的，但万一有人发现我面临的同样愚蠢的情况，现在你知道该怎么做了。
在我的情况下，管道的输入为空。因此，在问题的情况下，请确保 <p>{{ (blog.user | async)?.first_name }}</p> 中的 blog.user 不为空。
edit：我一直在做自己的项目，我注意到当代码有任何类型的构建错误时可能会发生此错误，例如未关闭的 html 标签，如 {1 }。在那之后，我知道的唯一方法就是重置整个服务器。这很烦人，不应该那样。
当我的组件中有一个空的（实际注释的）函数实现时出现此错误
在 HTML 中：<div (click)="onClickFoo()">
在.ts
onClickFoo() {
// this.router.navigate([...])
}
如果您在 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 {}
如果您在优化的生产版本中获得此问题，则可能是由于摇晃树造成的，尤其是在您使用 sideEffects: false 的情况下。现在这是通过 ng new --strict 在 Angular 10 中鼓励的设置。
Still have yet to figure out how to fix my project，但现在将其设置为 true 为我修复了它。
当我尝试在用作对话框的组件中使用异步管道时，我遇到了这个问题。我通过在即时模块中声明组件来解决这个问题（我使用了延迟加载）。应用程序模块，如果你不是。
以前的答案很好（记得做 declarations:[]），但也要记得重启手表（仅当您使用 CMD npm-run webpack-development -- -- progress --watch.
date管道的情况。谢谢。