What is the "Angular way" of supporting old browsers?

默认情况下,Angular 14应用程序(内置angular-cli)仅支持20%的浏览器(browsersl.ist). 尽管阅读了相关的documentation,但我也不清楚如何启用对较旧浏览器的支持.

Changed .browserslistrc:

默认情况下,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

我已经将其修改为以下内容. 覆盖率应该从20%上升到90%. 然而,更老的设备正在显示"死亡的白屏".

> 0.2%, not dead

其他一些相关文件:

tsConfig.json

此处,Angular cli(V14)在默认情况下放置以下内容:

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

那么,我应该修改这个吗? 我见过使用单独的tsConfig.json来提供es6支持的方法.

polyfills.js:

该文件应该为较旧的浏览器提供"填充". 然而,根据我所读到的,这里我们应该只附加与Angular 无关的内容,因为任何与Angular 相关的内容都会自动被框架附加. 我的理解正确吗?

这就是为什么自动生成的polyfills.ts在下面的部分是空的,没有任何包含)

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

// ... stuff after polyfills

推荐答案

TLDR: 'scripts' optimization was the culprit!

缩小问题范围:

我在ios12个浏览器(iPhone 6S设备)上遇到了一些问题, 这是相当旧的,但我无法让它工作,尽管启用了.browserslistrc中的所有功能:

last 20 iOS major versions

--configuration=development was working:

我注意到本地版本可以在旧浏览器上很好地工作,但一旦部署就不能了.(我以前不能轻易地测试这一点).

因此,在为开发模式构建之后,部署的版本也可以工作.

--optimization=false was also working:

然后,我注意到为生产而建的建筑,但禁用了 优化措施也奏效了.于是,我开始寻找导致该问题的特定标志.



Solution:

在深入研究optimization flags之后,原来scripts优化才是问题所在. 因此,要做到以下几点:

‘Package.json’:

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


通知不受支持的浏览器:

在任何情况下,如果浏览器不受支持,最好显示一些相关消息.当ANGLE不能 bootstrap 时,下面的就是这样做的.

<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>

Angular相关问答推荐

Angular 形式验证:在空和不匹配的密码上显示错误

如何在@angular/material-experimental中使用自定义调色板-Expeded $connect.Color.primary将成为有效的M3调色板

无法执行CanDeactivateFn Karma Test Angular 16

在Angular中将路由解析器提供程序和组件提供程序相结合

如何在Angular中执行一个操作条件为多个可观测值?

图像未显示在视图屏幕上-Angular 投影

独立Angular 零部件不在辅零部件或共享零部件中工作

AG网格Angular 快捷菜单调用函数

向Anguar 17项目添加服务以启动和停止Loader-NGX-UI-Loader

如何从URL中角下载图片?

Angular 17:延迟加载带参数的独立组件?

Angular 按钮指令错误地附加子元素

角项目更新

Angular 2模板驱动表单访问组件中的ngForm

在 Angular material表上调用 renderRows()

Angular2 SVG xlink:href

如何在angular material中使用输入类型文件

Angular 5 手动导入语言环境

Angular-CLI 代理到后端不起作用

Angular 2+ ngModule 中导入/导出的作用