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

Question

我正在尝试将我的 Angular 9 应用程序升级到 Angular 10 版本，但升级后收到以下警告

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

知道如何解决这个问题吗？

Answer 1

建议您避免在 Angular 应用程序中依赖 CommonJS 模块。依赖 CommonJS 模块可以防止打包程序和压缩程序优化您的应用程序，从而导致更大的包大小。相反，建议您在整个应用程序中使用 ECMAScript 模块。仍然不关心捆绑大小，

要禁用这些警告，您可以将 CommonJS 模块名称添加到位于 angular.json 文件中的构建选项中的 allowedCommonJsDependencies 选项。

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

Source

Answer 2

当你使用一个用 CommonJS 打包的依赖时，可能会导致larger slower applications

从版本 10 开始，Angular 现在会在您的构建拉入其中一个捆绑包时向您发出警告。如果您已经开始看到有关您的依赖项的这些警告，请让您的依赖项知道您更喜欢 ECMAScript 模块 (ESM) 包。

这是官方文档 - Configuring CommonJS dependencies

在您的 angular.json 文件中查找构建对象并添加

allowedCommonJsDependencies

如下图-

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

Answer 3

尝试将 rxjs 导入 rxjs/internal/operators 替换为 rxjs/operators。

例如：

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

与

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

Answer 4

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

对于 'rxjs/internal/<anything>' 和 'rxjs/index' 等导入，只需将其替换为 'rxjs'。

对于'rxjs/internal/operators' 等导入，将其替换为@Janardhan Burle 的回答中提到的'rxjs/operators'。

或者只替换rxjs

Answer 5

另一种情况是在构建过程中被警告的问题是在使用以下导入样式时使用来自rxjs 的BehaviorSubject：

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

这会导致以下错误：

警告：my.service.ts 取决于“rxjs/BehaviorSubject”。 CommonJS 或 AMD 依赖项可能会导致优化救助。

改为从根模块导入，构建过程中不再出现警告：

import { BehaviorSubject } from 'rxjs';

Answer 6

在我的情况下（更新到 TypeScript 版本 3.9.7 后）flatMap 已被弃用（来自rxjs/operators）。 这是mergeMap 的别名，所以我替换了：

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

到

import { mergeMap } from 'rxjs/operators';

Answer 7

只需更改导入：

来自：

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

收件人：

import { BehaviorSubject } from 'rxjs';

Answer 8

我有不同的大型项目，其中包含不推荐使用的导入 'rxjs'，并创建此 script 以升级所有不推荐使用的导入

$ python3.6 replace_imports.py PATH_TO_SRC_DIR 

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

也尝试升级 rxjs-compat

Answer 9

我有类似的问题（app.module.ts 依赖于 'ngx-google-places-autocomplete'），但许多答案对我没有帮助。

所以如果你有 x 依赖于 y，只需添加 y在“allowedCommonJsDependencies”中的 angular.json 文件中。