Angular 14 - Polyfills 不适用于旧版浏览器

Question

我有一个使用新项目的所有默认设置构建的 Angular 14 应用程序。这是我的 .browserlistrc。生成的 index.html 无法在 Chrome 74 或更早版本上加载。

Chrome > 50
Android > 50
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR

请注意，默认的 Angular 14 应用程序确实会在 Chrome 80 中加载

除了默认构建之外，我还尝试了提到的非 CLI polyfill 建议 here.

这也行不通。另请注意，Angular 14 网站引用了已弃用的 Core-JS@2 库，而最新的是 Core-js@3。

我之前使用 webpack 构建过应用程序(非 Angular 2)，只需将构建目标更新为“es5”或 @babel/preset-env 即可解决这些问题。

在 tsconfig.json 中，我注意到目标被设置为 es2020(这太激进了!)。我更新到 es5，它给出了一个错误，但 polyfills 工作了。 ES2015 目标和 polyfill 也能正常工作。

$ npx ng build --base-href="angular/test/dist/test/"
- Generating browser application bundles (phase: setup)...
    DEPRECATED: ES5 output is deprecated. Please update TypeScript `target` compiler option to ES2015 or later.
√ Browser application bundle generation complete.
√ Browser application bundle generation complete.
- Copying assets...
√ Copying assets complete.
- Generating index html...
√ Index html generation complete.

Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
main.7b49250bb40700d9.js      | main          | 141.52 kB |                39.53 kB
polyfills.c85a2de3019e0931.js | polyfills     |  37.35 kB |                11.70 kB
runtime.e09688b44ec1c7b7.js   | runtime       |   1.19 kB |               618 bytes
styles.ef46db3751d8e999.css   | styles        |   0 bytes |                       -

| Initial Total | 180.06 kB |                51.84 kB

Build at: 2022-10-26T15:39:21.007Z - Hash: 8c5f90cdcee46546 - Time: 20552ms

问题:是否有任何 Polyfill 可以像 Angular 14 (ES2020) 一样工作？

此外，更大的问题是，我有一个使用 Webpack 构建的 Angular 14 项目，其中上面生成的 Polyfill 根本不起作用，Angular 网站上提到的 Polyfill 也不起作用。

Answer 1

看起来这与 this change in the how the js bundles are served from the index.html file 有关Angular 团队添加了 type="module"到<src>元素。测试这是否是问题的一种简单方法是为您的应用程序构建静态 bundle ，然后编辑 index.html 以删除这些属性。

BEFORE
<script src="runtime.e2a47074b9fe2cd5.js" type="module"></script>
AFTER
<script src="runtime.e2a47074b9fe2cd5.js"></script>

如果您的应用程序在更改后正确加载，那么您可以自动删除该属性，或者链接的 github 问题有一些更复杂的解决方案，涉及修补 Angular CLI 代码。