Angular14：支持旧版浏览器的官方方式是什么？

Question

What is the "Angular way" of supporting old browsers?支持旧浏览器的“Angular 方式”是什么？

By default an Angular 14 app (built with angular-cli ) supports only 20% of the browsers ( browsersl.ist ).默认情况下，一个 Angular 14 应用程序（使用angular-cli构建）仅支持 20% 的浏览器 ( browsersl.ist )。 Despite reading the relevant documentation , it is not clear to me how to enable support for older browsers too.尽管阅读了相关文档，但我也不清楚如何启用对旧浏览器的支持。

Changed `.browserslistrc` :更改了`.browserslistrc` ：

By default angular-cli (v14) generates this config:默认情况下 angular-cli (v14) 生成这个配置：

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

I have modified this to the below.我已将其修改为以下内容。 The coverage coverage should go from 20% goes up to 90%.覆盖范围应为 go 从 20% 上升到 90%。 However, still older devices are showing the "white screen of death".但是，仍然有较旧的设备显示“死亡白屏”。

> 0.2%, not dead

Some other related files:其他一些相关文件：

`tsConfig.json`

Here angular cli (v14) puts these by default:这里 angular cli (v14) 默认放置这些：

...
    "target": "es2020",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ],
...

So, am I supposed to modify this?那么，我应该修改这个吗？ I've seen approaches that use separate tsConfig.json , for providing es6 support too.我见过使用单独的tsConfig.json来提供es6支持的方法。

`polyfills.js` : `polyfills.js` ：

This file is supposed to provide "fills" for older browsers.该文件应该为旧浏览器提供“填充”。 However, from what I've read, here we should append only stuff unrelated to Angular, as anything that is angular-related will be automatically appended by the framework.然而，根据我的阅读，这里我们应该 append 只有与 Angular 无关的东西，因为任何与角度相关的东西都会被框架自动附加。 Is my understanding correct?我的理解正确吗？

Which is why the auto-generated polyfills.ts has the below section empty, without any inclussions)这就是为什么自动生成的polyfills.ts下面的部分是空的，没有任何内容）

// .... other stuff
/***************************************************************************************************
 * BROWSER POLYFILLS
 */

// ... stuff after polyfills

Answer 1

TLDR: 'scripts' optimization was the culprit! TLDR：“脚本”优化是罪魁祸首！

Narrowing down the issue:缩小问题范围：

I was having some issues on ios12 browsers (iphone 6S device), which is quite old, but I couldn't get it to work despite enabling everything in .browserslistrc :我在ios12浏览器（iphone 6S 设备）上遇到了一些问题，它已经很老了，但尽管启用了.browserslistrc中的所有内容，我还是无法让它工作：

last 20 iOS major versions

`--configuration=development` was working: `--configuration=development`正在运行：

I noticed that the local version would work just fine on the old browser, but once deployed it would not.我注意到本地版本在旧浏览器上工作得很好，但一旦部署就不行了。 (I could not test that easily before). （我以前无法轻松测试）。

So after building for development mode, the deployed version also worked.所以在为开发模式构建之后，部署的版本也可以工作。

`--optimization=false` was also working: `--optimization=false`也有效：

Then, I noticed that building for production, but disabling optimizations also worked.然后，我注意到为生产而构建，但禁用优化也有效。 So then I started looking for the specific flag that was causing the issue.因此，我开始寻找导致问题的特定标志。

Solution:解决方案：

After digging into the optimization flags , it turns out that scripts optimization was the problem.在深入研究优化标志后，发现scripts优化是问题所在。 So doing the below works:所以做以下工作：

'package.json': '包.json'：

"optimization": {
  "scripts": false, <- DISABLED
  "styles": {
    "minify": true,
    "inlineCritical": true
    },
   "fonts": true
},

Notifying unsupported browsers:通知不支持的浏览器：

In any case, if a browser is not supported, is good to show some relevant message.无论如何，如果不支持浏览器，最好显示一些相关消息。 The below will do just that, when angular has failed to bootstrap.当 angular 引导失败时，下面将执行此操作。

<html>
<!-- other stuff .. -->
<script>
  function handleUnsupportedBrowsers() {
    var appRoot = document.getElementsByTagName('app-root')[0];
    if (appRoot && appRoot.innerHTML === '') {
      appRoot.innerHTML = '<<h1>Unsupported Browser</h1>' +
        '<p>Please use a modern  browser!</p>';
    }
  }
</script>
<body onload="handleUnsupportedBrowsers()">
  <app-root></app-root>
</body>
</html>

Angular14：支持旧版浏览器的官方方式是什么？

问题描述

What is the "Angular way" of supporting old browsers?支持旧浏览器的“Angular 方式”是什么？

Changed `.browserslistrc` :更改了`.browserslistrc` ：

Some other related files:其他一些相关文件：

`tsConfig.json`

`polyfills.js` : `polyfills.js` ：

1 个解决方案

解决方案1
3 已采纳 2022-11-17 21:14:35

TLDR: 'scripts' optimization was the culprit! TLDR：“脚本”优化是罪魁祸首！

Narrowing down the issue:缩小问题范围：

`--configuration=development` was working: `--configuration=development`正在运行：

`--optimization=false` was also working: `--optimization=false`也有效：

Solution:解决方案：

'package.json': '包.json'：

Notifying unsupported browsers:通知不支持的浏览器：

Angular14：支持旧版浏览器的官方方式是什么？

问题描述

What is the "Angular way" of supporting old browsers?支持旧浏览器的“Angular 方式”是什么？

Changed .browserslistrc :更改了.browserslistrc ：

Some other related files:其他一些相关文件：

tsConfig.json

polyfills.js : polyfills.js ：

1 个解决方案

解决方案1 3 已采纳 2022-11-17 21:14:35

TLDR: 'scripts' optimization was the culprit! TLDR：“脚本”优化是罪魁祸首！

Narrowing down the issue:缩小问题范围：

--configuration=development was working: --configuration=development正在运行：

--optimization=false was also working: --optimization=false也有效：

Solution:解决方案：

'package.json': '包.json'：

Notifying unsupported browsers:通知不支持的浏览器：

Changed `.browserslistrc` :更改了`.browserslistrc` ：

`tsConfig.json`

`polyfills.js` : `polyfills.js` ：

解决方案1
3 已采纳 2022-11-17 21:14:35

`--configuration=development` was working: `--configuration=development`正在运行：

`--optimization=false` was also working: `--optimization=false`也有效：