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

Question

我正在尝试将我的 angular 9 应用程序升级到 angular 10 版本，但在升级后低于警告

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

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

Answer 1

当您使用与 CommonJS 一起打包的依赖项时，可能会导致应用程序变大变慢

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

这是官方文档 -配置 CommonJS 依赖项

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

allowedCommonJsDependencies

如下所示 -

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

Answer 2

尝试更换rxjs进口rxjs/internal/operators用rxjs/operators。

前任：

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

和

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

Answer 3

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

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

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

来源

Answer 4

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

对于诸如'rxjs/internal/<anything>'and 之类的导入'rxjs/index'，请将其替换为 just 'rxjs'。

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

Answer 5

只需更改导入：

从：

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

到：

import { BehaviorSubject } from 'rxjs';

Answer 6

另一种情况是在使用以下导入样式时使用BehaviorSubjectfrom进行构建期间被警告的问题：rxjs

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

它会导致以下错误：

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

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

import { BehaviorSubject } from 'rxjs';

Answer 7

要在 angular.json 的终端上解决此问题，请将此行放入：

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