升级到角度10-修复 CommonJS 或 AMD 依赖可能导致优化救助

我试图升级我的角9应用程序角10版本，但我得到以下警告升级后

rxjs\BehaviorSubject.js depends on rxjs-compat/BehaviorSubject

我该怎么补救？

193105 次浏览
小开

建议您在角度应用程序中避免依赖于 CommonJS模块。根据 CommonJS 模块的不同，它们可以防止捆绑包和小型化程序优化您的应用程序，从而导致更大的捆绑包大小。相反，建议您在整个应用程序中使用 ECMAScript 模块。

不过，如果您不关心捆绑包的大小，要禁用这些警告，您可以在 Angular Json文件中的构建选项中将 CommonJS 模块名添加到 allowedCommonJsDependencies选项。

"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"allowedCommonJsDependencies": [
"rxjs-compat"
]
...
}
...
},

来源

小开

当您使用与 CommonJS 打包的依赖项时，它可能导致 更大更慢的应用程序

从版本10开始，Angular 现在会在你的版本引入这些捆绑包时发出警告。如果您已经开始看到依赖项的这些警告，请让依赖项知道您更喜欢 ECMAScript 模块(ESM)包。

这是一份官方文件 -配置 CommonJS 依赖项

在 Angular Json文件中查找生成对象并添加

AllowedCommonJsDependency 允许的共同 JsDependency

如下所示-

"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"allowedCommonJsDependencies": [
"rxjs-compat",
... few more commonjs dependencies ...
]
...
}
...
},
小开

尝试用 rxjs/operators替换 rxjs 导入的 rxjs/internal/operators。

例如:

import { catchError, retry } from 'rxjs/internal/operators';

和

import { catchError, retry } from 'rxjs/operators';
小开

对于 RXJS 库，可以进行以下更改。

对于导入，如 'rxjs/internal/<anything>'和 'rxjs/index'，只用 'rxjs'代替它。

对于导入，例如 'rxjs/internal/operators'，将其替换为 'rxjs/operators'。

或者只是取代 rxjs。

小开

这种情况的另一个例子是在构建过程中使用 rxjs中的 BehaviorSubject时遇到的问题，当使用以下风格的导入时:

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

它导致以下错误:

警告: my.service.ts 依赖于“ rxjs/Behavior orSubject” AMD 依赖可能导致优化紧急援助。

通过从根模块导入，警告在构建过程中不再出现:

import { BehaviorSubject } from 'rxjs';

小开

在我的例子中(在更新到 TypeScript 版本3.9.7之后) ，不推荐使用 flatMap(来自 rxjs/operators)。 这是 mergeMap的别名，所以我替换了:

import { flatMap } from 'rxjs/internal/operators';

到

import { mergeMap } from 'rxjs/operators';

小开

只要改变进口:

来自:

import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';

致:

import { BehaviorSubject } from 'rxjs';

小开

我有一个非常大的项目与废弃的进口’rxjs’，并创建 这个剧本升级所有废弃的进口:

python3.6 replace_imports.py PATH_TO_SRC_DIR

此脚本升级导入，如 "rxjs\/(internal|Observable|Subject|ReplaySubject|Subscription|BehaviorSubject)" 到 从 rxjs 导入{ * }

还要尝试升级 rxjs-compat。

小开

我也遇到过类似的问题(应用程序模块依赖于‘ ngx-google-place-autocomplete’) ，但是很多答案对我没有帮助。

因此，如果您有 X 取决于 强大，只需将 强大添加到 Angular Json文件的“ allowedCommonJsDependency”中。

小开

在终端上修复这个问题 在 angular.json 中加入了这句话:

“建筑师”: { 「建造」 : { “ Builder”: “@angle-devkit/build-angle: chrome”, “期权”: { “ allowedCommonJsDependency”: [ “ rxjs” ] ，


提交答案