Angular构建报错：未找到名为‘async’的管道（No pipe found with name 'async'）

嘿，我之前也踩过这个坑！别慌，这个报错其实是Angular里超常见的小问题，咱们一步步排查解决~

最常见的原因：组件所属模块没导入CommonModule #

Angular的async管道是内置在CommonModule里的，根模块（比如AppModule）因为导入了BrowserModule（它包含了CommonModule），所以根组件用async完全没问题，但如果你是在特性模块里写的组件，特性模块不会自动继承根模块的导入，必须手动加CommonModule才行！

举个例子，假设你的组件在StageModule里，那模块代码要改成这样：

import { NgModule } from '@angular/core';
// 特性模块用CommonModule，根模块用BrowserModule也可以，但特性模块建议用CommonModule
import { CommonModule } from '@angular/common';
import { StageDialogComponent } from './stage-dialog.component';
import { MatDialogModule } from '@angular/material/dialog'; // 你的其他依赖模块

@NgModule({
  declarations: [StageDialogComponent],
  imports: [
    CommonModule, // 这行是关键！必须加上
    MatDialogModule
  ]
})
export class StageModule { }

其次检查模板里的拼写和用法 #

别笑，我真的见过把async写成Async（大写A）或者asyn（少了个c）的情况！Angular的管道是区分大小写的，必须是全小写的async。

正确用法示例：

<!-- 用async管道订阅Observable，同时把结果赋值给stages变量 -->
<div *ngIf="stageList$ | async as stages">
  <ul>
    <li *ngFor="let stage of stages">{{ stage.name }}</li>
  </ul>
</div>

<!-- 直接显示Observable的最新值 -->
<p>当前选中阶段：{{ currentStage$ | async }}</p>

最后再确认下你的Observable是否有效 #

虽然这个一般不会直接报“找不到管道”的错，但如果你的Observable是null或者没正确初始化，也可能间接导致奇怪的报错。可以在组件里加个日志，确认下stageList$这类Observable是不是真的被正确创建了：

ngOnInit() {
  console.log('stageList$ observable:', this.stageList$);
}

基本上按这几步来，这个报错就能解决啦！

备注：内容来源于stack exchange，提问作者samuel wong