2

我最近正在处理的项目升级到 AOT 合规性，自从那件事发生后，我| async在 HTML 中使用管道时遇到了问题。例如，我的 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但这似乎也不起作用。声明可观察的方式，看起来像

public mySubscription$: Observable<string> = null;

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

现在，经过进一步调查，我认为我确信CommonModule在应用程序中加载的方式存在一些问题，如此处所述：找不到管道“异步”

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

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

4

4 回答 4

1

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

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

    从“@angular/common”导入 { CommonModule }；

    @NgModule({ 导入：[ CommonModule ] }) 类 FeatureModule {}

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

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

于 2021-08-17T15:34:27.463 回答
1

我相信它在这篇文章中得到了回答

找不到管道“异步”

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

于 2021-08-20T14:38:08.737 回答
1

你能检查一下你的组件是否在你的app.module.ts?

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

于 2021-08-16T15:44:10.643 回答
1

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

每当您遇到以前可以解决的问题时，在您的 HTML 模板中...您可以尝试将$any其用作以通用方式投射事物的一种方式。这充其量只是一个hack。

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

如果这解决了问题，您可以查看以前版本的 Angular 和较新更新版本的语法和实现差异。ivy 和相关版本更新的引擎盖下发生了很多变化，包括 TypeScript 语言更新和 RxJs 库更改。

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

于 2021-08-17T18:48:56.700 回答