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

时间:2020-06-26 10:34:27

标签: javascript angular rxjs rxjs6 angular-upgrade

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

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

有什么解决方法吗?

谢谢!

9 个答案:

答案 0 :(得分:42)

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

例如:

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

使用

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

答案 1 :(得分:40)

当您使用CommonJS打包的依赖项时,它可能导致larger slower applications

从版本10开始,当您的构建引入这些捆绑软件之一时,Angular现在会警告您。如果您开始对依赖项看到这些警告,请让您的依赖项知道您更喜欢ECMAScript模块(ESM)捆绑包。

这是官方文档-Configuring CommonJS dependencies

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

答案 2 :(得分:19)

建议您避免依赖Angular应用程序中的CommonJS模块。取决于CommonJS模块,可能会阻止捆绑程序和压缩程序优化您的应用程序,从而导致更大的捆绑程序大小。相反,建议您在整个应用程序中使用ECMAScript模块。尽管如此,您仍然不必担心捆绑大小,

要禁用这些警告,可以在allowedCommonJsDependencies文件中的生成选项中,将CommonJS模块名称添加到angular.json选项中。

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

Source

答案 3 :(得分:3)

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

对于诸如'rxjs/internal/<anything>''rxjs/index'之类的导入,只需将其替换为'rxjs'

对于诸如'rxjs/internal/operators'之类的进口商品,请用@ {Janardhan Burle的答案中提到的'rxjs/operators'代替。

答案 4 :(得分:3)

只需更改导入:

来自:

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

致:

import { BehaviorSubject } from 'rxjs';

答案 5 :(得分:2)

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

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

它导致以下错误:

<块引用>

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

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

import { BehaviorSubject } from 'rxjs';

答案 6 :(得分:2)

就我而言(更新到 TypeScript 3.9.7 版后)flatMap 已弃用(来自 rxjs/operators)。 这是 mergeMap 的别名,所以我只是替换了:

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

import { mergeMap } from 'rxjs/operators';

答案 7 :(得分:0)

我有不同的大型项目,其中包含已弃用的导入 'rxjs' 并创建此 script 以升级所有已弃用的导入

$ python3.6 replace_imports.py PATH_TO_SRC_DIR 

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

也尝试升级 rxjs-compat

答案 8 :(得分:-2)

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

它在我的情况下适用于Angular CLI 10.1.0。参考:https://angular.io/guide/build#configuring-commonjs-dependencies