错误：找不到管道“异步”！ AOT & IVY 更新后

Posted 2023-03-08

【中文标题】错误：找不到管道“异步”！ AOT & IVY 更新后

【英文标题】：Error: The pipe 'async' could not be found! after AOT & IVY update

【发布时间】：2021-10-17 03:32:31

【问题描述】：

我最近正在处理的项目升级到 AOT 合规性，自从那件事发生后，我在 html 中使用 | async 管道时遇到了问题。例如，我的 HTML 代码如下所示：

 <div *ngIf="(mySubscription$| async) !=null">
 //some more html code
</div>

如您所见，mySubscription$ 是一个订阅，我只是想使用异步管道对其执行一个简单的操作。此代码一直在工作，但自从 AOT 更新后，它停止工作并引发以下错误：

ERROR Error: Uncaught (in promise): Error: The pipe 'async' could not be found!

我浏览了多个帖子，并已尝试按照其他帖子中的建议将commonModule 添加到我的应用程序中，但到目前为止还没有运气。另外，我在这里从 Angular 官方网站上看到了这个文档：https://angular.io/guide/template-typecheck，但这似乎也不起作用。声明 observable 的方式，看起来像

public mySubscription$: Observable<string> = null;

同样，所有这些问题都是在启用 AOT 和 IVY 之后开始的。

现在，经过进一步调查，我认为我确信CommonModule 在应用程序中的加载方式存在一些问题，如下所述：The pipe 'async' could not be found

但是我在我的 App.Module、我的路由模块和我的功能模块中引用了 Common 模块。我还在应用程序中发现其他组件正在加载公共模块并使用| async 但听起来只有我的组件有问题。

另外，我注意到的另一件事是我的应用程序第一次加载良好，总是重新编译导致模块加载问题。现在我不确定第一次编译和重新编译之间有什么区别，可能是加载模块的顺序吗？但在这一点上，我不确定是什么原因造成的？

【问题讨论】：

这能回答你的问题吗？ The pipe 'async' could not be found

是的，我都试过了。需要明确的是，在 AOT 更新之前，我的代码最长没有问题。所以我认为这与 AOT 更新有关。

能否请您尝试删除空检查？

删除了，还是一样的问题。

作为“升级到 aot 合规性”的一部分，您到底做了什么？

【参考方案1】：

您能否检查一下您的组件是否在您的 app.module.ts 中声明？

这似乎与这个问题非常相似：https://fireflysemantics.medium.com/the-pipe-async-could-not-be-found-a42f8eb1b12d

【讨论】：

所以，我这个组件是在另一个模块中注册的。我们称它为功能模块。功能模块确实声明了组件。 App 模块，即引导模块，没有对该组件的引用。它需要它吗？

另外，非常奇怪的是它第一次编译得很好，然后当 ng serve 重新加载时，因为你可能做了一个微小的改变，它会因为这个特定的错误而失败。

您确定您的组件在您的功能模块中正确声明了吗？我不是角度模块的专业人士，但您可以尝试将组件移动到根模块并检查它是否正常工作，如果正常，然后再次将组件移动到 FeatureModule。

【参考方案2】：

我们得到这个错误的机会有两次

如果我们错过了添加通用模块

从“@angular/common”导入 CommonModule ；

@NgModule( 进口：[通用模块] ) 类 FeatureModule

如果我们错过了在 ngModule 的声明中添加组件：[]

您的功能模块在导入[] 中有 CommonModule 吗？您的组件是否添加在 ngModule 的声明中：[]？

【参考方案3】：

我不建议您保留此解决方案，但它可以帮助您在 ivy 更新后抽出时间进行清理时继续前进。

在您遇到以前可以解决的问题时，在您的 HTML 模板中...您可以尝试使用$any 作为一种以通用方式进行转换的方法。 这充其量只是一个 hack。

<div *ngFor="let banana of ($any(theThingHere) | async)">
   code or something...
</div>

如果这解决了问题，您可以查看以前版本的 Angular 和更新版本的语法和实现差异。对于 ivy 和相关版本更新，包括 TypeScript 语言更新和 RxJs 库更改在内，很多事情都发生了变化。

最好的情况是，生成一个新项目来实现异步管道并证明它在您的目标版本中有效，并在您当前的代码库中跟踪您的模块导入以检查可能导致它失败的原因。

【参考方案4】：

我相信这篇文章已经回答了

The pipe 'async' could not be found

TLDR 异步管道是 Angular 的 CommonModule 的一部分，它不被子模块继承。由于您的模块“导入”数组中没有 CommonModule，您可能会收到此错误。