Ionic/Angular报错：async管道未找到，已导入CommonModule仍未解决

你遇到的这个问题挺常见的——明明已经导入了CommonModule，但还是提示async pipe找不到。别着急，我们一步步排查可能的疏漏：

1. 确认组件与模块的归属关系是否正确 #

从你的代码来看，HolidaysPage组件的selector是app-tab2，且被声明在HolidaysPageModule中。请重点检查：

• 这个组件没有被其他模块重复声明（Angular不允许同一个组件在多个模块中声明，否则会导致模块依赖混乱）。
• 你编写的模板代码是否确实属于HolidaysPage？有没有可能误将HTML代码写在了另一个组件的模板文件中，而那个组件所在的模块并未导入CommonModule？

2. 验证模块是否被正确加载 #

如果HolidaysPageModule是惰性加载模块，请确认它的路由配置是否正确，确保模块在访问时能被正常加载。比如检查HolidaysPageRoutingModule的路由定义：

// HolidaysPageRoutingModule 示例代码
const routes: Routes = [
  {
    path: '',
    component: HolidaysPage
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HolidaysPageRoutingModule {}

3. 清理缓存确保CommonModule导入生效 #

有时候IDE缓存或Angular构建缓存会导致模块导入不生效，可以尝试：

• 停止当前开发服务器，执行ng clean清理构建缓存，再重新启动ng serve。
• 确认CommonModule的导入语句完全正确，必须从@angular/common导入：

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

4. 检查模板语法的隐藏问题 #

虽然你的模板代码看起来没问题，但可以再仔细核对：

• async pipe的拼写必须是全小写（Angular的pipe名称区分大小写，只能写async而非Async）。
• 确认holidayEntries$确实是Observable<HolidayEntry[]>类型，有没有可能在代码中被意外赋值为非Observable类型？比如不小心转换成了普通数组，这时候使用async pipe也会触发异常（虽然错误信息可能有差异，但也可能造成混淆）。

5. 排查模块导出/导入的遗漏（针对共享组件场景） #

如果HolidaysPage是需要被其他模块复用的共享组件，那么HolidaysPageModule不仅要导入CommonModule，还要将其导出；同时使用该组件的模块需要导入HolidaysPageModule。不过从你的场景来看，这应该是页面级组件，大概率不需要导出，但可以快速确认一下。

如果以上步骤都排查过仍未解决，可以尝试创建一个极简测试组件，只保留async pipe的基础使用，看看是否能正常运行，以此定位问题是否出在当前组件的其他代码逻辑上。

内容的提问来源于stack exchange，提问作者Deitsch