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

Question

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

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

我该如何修复这个问题？

- Ora

---

你能否检查一下，你是否曾经从rxjs中导入过behaviorsubject而不是rxjs/behaviorsubject。 - Jonathan Stellwag

@JonathanStellwag 我已经像这样导入它 - import { BehaviorSubject } from 'rxjs'，对于 Angular 9 一切正常。但对于 Angular 10 不行。我在使用 map 操作符时也遇到了同样的问题 - 它显示 WARNING in ..\node_modules\rxjs\operators\map.js depends on rxjs-compat/operators/map. CommonJS 或 AMD 依赖项可能会导致优化失败。 - Ora

这个问题是否得到了解答？Angular 10升级-修复CommonJS或AMD依赖项可能导致优化失败 - JSON Derulo

Answer 1

当你使用 CommonJS 打包的依赖时，会导致应用程序变得更大、更慢， 详情请见

从版本 10 开始，Angular 会在构建过程中提示你是否引用了这些包。如果你看到了这些警告，请告诉相关依赖项，你希望使用 ECMAScript 模块（ESM）打包。

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

在你的 angular.json 文件中查找 build 对象并添加

allowedCommonJsDependencies

如下所示 -

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

- Gunjan Khanwilkar

---

尝试将以下内容添加到Firebase依赖项中： "allowedCommonJsDependencies": [ "firebase", "@firebase/app", "firebase/app", "@firebase/functions", "@firebase/performance", "@firebase/remote-config", "@firebase/component" ], 在您的情况下，只需在现有列表中添加 '@firebase/component' 关键字即可解决问题。 - Gunjan Khanwilkar

@freedev 我已经更新了我的回答中的链接！你可以在这里找到一个很好的解释 - https://web.dev/commonjs-larger-bundles/干杯！ - Gunjan Khanwilkar

对于任何搜索应该添加文件的人-在你的项目根目录中的angular.json。 - Maxim Georgievskiy

@MaximGeorgievskiy 好发现，新手可能会难以找到该文件.. 我已经更新了相同的答案，谢谢！ - Gunjan Khanwilkar

工作在 Angular@12。 - mstgnz

Answer 2

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

示例：

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

随着

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

- Janardhan Burle

Answer 3

建议您在 Angular 应用程序中避免使用 CommonJS 模块。依赖于 CommonJS 模块可能会阻止捆绑和最小化器优化您的应用程序，导致包大小变大。相反，建议您在整个应用程序中使用 ECMAScript 模块。

然而，如果您不关心打包大小，并且希望禁用这些警告，则可以将 CommonJS 模块名称添加到位于 angular.json 文件中的构建选项的 allowedCommonJsDependencies 选项中。

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

源代码

- Arun Kumar

---

谢谢您的回答。我仍然想知道是否有任何推荐的ECMAScript模块可以替代禁用警告，而不是禁用警告。 - Ora

这对我来说并没有消除警告信息。 - StackOverflowUser

我也一样，我正在使用lodash，并将其添加到“allowedCommonJsDependencies”中，但仍然出现相同的警告。有什么想法吗？ - Niral Munjariya

@StackOverflowUser 请看一下这个答案：https://dev59.com/4VIG5IYBdhLWcg3w21eA#62589268 - JSON Derulo

虽然这个建议是正确的，但它假设我使用CommonJS或AMD，而最常见的情况是我使用依赖于它们的第三方库。 - Antoniossss

使用lodash-es代替lodash：https://www.npmjs.com/package/lodash-es - Raphael Pinel

Answer 4

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

对于导入，例如'rxjs/internal/<anything>'和'rxjs/index'，请用'rxjs'替换它们。

对于像'rxjs/internal/operators'这样的导入，请使用'rxjs/operators'替换它们。

或仅替换rxjs。

- ymssa___

---

只需将“'rxjs'”替换即可解决我的问题，谢谢。 - bene-we

用 'rxjs' 直接替换也对我有帮助，谢谢。 - Aniket kale

这个修复是否解决了问题还是只是隐藏了警告？ - Brian Reinhold

这个修复了问题还是只是隐藏了警告？ - undefined

@ymssa___ 我注意到了。它显著地缩小了我构建的大小！ - Brian Reinhold

Answer 5

只需要更改导入方式：

从：

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

到:

import { BehaviorSubject } from 'rxjs';

- Adel Kedjour

---

这只是抑制警告，还是对优化有所帮助？ - liakoyras

@liakoyras 这是在 RxJS v6+ 中如何导入 BehaviorSubject 的方式： https://www.learnrxjs.io/learn-rxjs/subjects/behaviorsubject - Adel Kedjour

是的，我理解了，我的问题是新的方式是否仅有助于抑制编译器警告，还是v6+确实是rxjs的新ES6模块化（而旧版本是CommonJS）。 - liakoyras

嗨@liakoyras，抱歉晚回复。RxJS 6在模块化方面进行了改进，提高了性能并且易于调试调用栈。 RxJS团队已经做出了扎实的努力，尽可能地向后兼容这个版本。https://auth0.com/blog/whats-new-in-rxjs-6/ - Adel Kedjour

Answer 6

另一个类似的情况是，在使用以下类型导入时，使用rxjs中的BehaviorSubject会在构建期间出现警告：

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

它会导致以下错误： ``` Warning: my.service.ts depends on 'rxjs/BehaviorSubject'. CommonJS or AMD dependencies can cause optimization bailouts. ```

通过从根模块导入，可以在构建期间消除此警告：

`import { BehaviorSubject } from 'rxjs';`

- atconway

Answer 7

在终端上解决这个问题，只需在angular.json中添加以下代码行：

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

- Laith Bzour

---

这是一个修复吗？这只是隐藏了警告，对吧？问题仍然存在。 - Brian Reinhold

Answer 8

我曾经遇到过类似的问题（app.module.ts 依赖于 'ngx-google-places-autocomplete'），但是很多答案都没有帮助到我。

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

- Dacili

---

这只会消除警告，依赖项将包括整个commonjs在您的捆绑包中，导致比必要更大的捆绑包大小。 - Benjamin Aronsson

Answer 9

在我的情况下（升级到TypeScript版本3.9.7之后），flatMap已被弃用（从rxjs/operators中）。这是mergeMap的别名，所以我只需将以下内容替换即可： import { flatMap } from 'rxjs/internal/operators'; 替换为 import { mergeMap } from 'rxjs/operators';

- wajdar_pl

Answer 10

我在 Angular - 15.1.1 的生产构建中遇到了同样的问题。

在构建中添加缺失/建议的依赖项 -> allowedCommonJsDependencies

- Abdullah