随着 IE11 的使用逐渐减少，越来越多的前端开发者选择在项目中放弃对 IE11 的支持。但是在一些特定场景下，我们仍然需要对 IE11 进行支持，因此，解决 Angular 6 在 IE11 中无法正常显示的问题也显得尤为重要。
问题描述
在使用 Angular 6 构建的 Web 应用中，在 IE11 中打开页面后，会出现空白或者部分内容无法正确渲染的情况。
问题原因
Angular 6 使用的默认 ES5 转译器无法兼容 IE11 中的所有 JavaScript 特性，因此在 IE11 中会出现部分代码无法正常执行的情况。
解决方案
要解决这个问题，需要进行以下两个步骤：
1. 安装额外的依赖
为了让 Angular 6 能够在 IE11 中正常使用，需要安装以下两个依赖：
npm install --save classlist.js npm install --save web-animations-js
其中，classlist.js 是用来让 IE11 支持 Element.classList 属性的库，web-animations-js 则是用来让 IE11 支持 CSS3 动画的库。
2. 配置 babel
安装完上述依赖后，我们需要配置 Angular CLI 使用 babel 而不是默认的 ES5 转译器。
2.1 安装 babel 相关依赖
首先，我们需要安装 babel 相关的依赖：
npm install --save-dev @babel/core @babel/preset-env babel-loader
其中，@babel/core 是 babel 的核心库，@babel/preset-env 是 babel 的预设库，用于根据当前的环境来决定需要使用哪些插件来进行转译，babel-loader 是用于在 webpack 中使用 babel 的 loader。
2.2 配置 Angular CLI
在安装好依赖后，需要对 Angular CLI 进行如下配置：
首先，在项目根目录下新建一个 .babelrc 文件，用于配置 babel 的相关选项：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------------- ------
---------- -
----- ----
-
-
-
-
-其中，useBuiltIns: false 表示禁止自动导入 polyfills，targets: { ie: '11' } 表示编译出的代码要兼容 IE11。
接着，在 angular.json 文件中添加以下配置：
-- -------------------- ---- -------
-
-------- -
---------- -
------------------------------ -
---------------
-------------------
--
----------- -----
----------- --------------------------
---------------------- -
------- ----------------------------
------------------ - ------------ --------- -
--
-------------------- -----
------ -----
---------------- ------
------------- -----
------------ -----
-
-
-其中，allowedCommonJsDependencies 表示允许在编译时使用 CommonJS 模块加载器来加载依赖项，es5BrowserSupport 表示编译出的代码要兼容 ES5，并禁止默认的 ES2015/ES2017 语法转换，customWebpackConfig 表示使用自定义的 webpack 配置，用于进行 babel 转译。
在 extra-webpack.config.js 文件中添加以下配置：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------------ - -------------------------
-------------- - -------- -------- -
------ -------------------- -
------- -
------ -
-
----- --------
---- -
------- ---------------
-------- -
-------- -
-
--------------------
-
------------ ------
-------- -
--- ----
-
-
-
-
-
--
-------- --------------
-
-
--
-------- -
--- -----------------------------
-------- -
----------- -
--------- -----
-
-
--
-
---
--在这个文件中，我们对 .js 文件使用 babel 进行转译，并设置相应的参数进行兼容性处理。
最后，在 polyfills.ts 文件中添加以下代码：
import 'classlist.js'; import 'web-animations-js';
这样，我们就完成了对 Angular 6 在 IE11 中的兼容性处理。
示例代码
下面，给出一个简单的示例代码。
首先，在项目根目录下执行以下命令创建新的 Angular 6 项目：
ng new IE11-demo
接着，在项目根目录下添加 extra-webpack.config.js 文件，内容如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------------ - -------------------------
-------------- - -------- -------- -
------ -------------------- -
------- -
------ -
-
----- --------
---- -
------- ---------------
-------- -
-------- -
-
--------------------
-
------------ ------
-------- -
--- ----
-
-
-
-
-
--
-------- --------------
-
-
--
-------- -
--- -----------------------------
-------- -
----------- -
--------- -----
-
-
--
-
---
--在 app.component.ts 中添加以下代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------------
--------- -----------
--------- -
---------- -----------
--
------- --
--
------ ----- ------------ ---------- ------ -
---------- --
-在 polyfills.ts 中添加以下代码：
import 'classlist.js'; import 'web-animations-js';
最后，在浏览器中运行项目，即可看到 Hello, world! 文字正常显示。
总结
本文介绍了解决 Angular 6 在 IE11 中无法正常显示的问题的方法，包括安装额外的依赖以及使用 babel 进行转译。通过本文的介绍，我们可以更好地了解到如何解决兼容性问题，让 Web 应用在更广泛的浏览器上正确运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6490fe8b48841e9894eff877