随着 Internet Explorer 浏览器的逐渐淘汰，越来越多的前端框架和库停止了对 IE 浏览器的支持，其中就包括 Angular 7。然而，在某些场景下，仍会有用户使用 IE 浏览器访问网站，为了保证用户体验和网站稳定性，我们需要解决 Angular 7 在 IE11 浏览器中的不兼容问题。
问题原因
首先，我们需要了解 Angular 7 在 IE11 浏览器中的不兼容问题的原因。Angular 7 使用了一些 ES6 和 ES7 的新特性，在老旧的 IE11 浏览器中并不支持这些特性，因此会出现无法加载网页或者网页渲染不正常等问题。
解决方案
安装 polyfills
为了解决 Angular 7 在 IE11 浏览器中的兼容问题，我们需要安装一些 polyfills，这些 polyfills 可以填补浏览器的功能缺失。Angular 官方也提供了一个脚本“polyfills.ts”来帮助我们自动添加这些 polyfills。
首先，我们需要安装一些依赖，打开命令行窗口并进入项目根目录，输入以下命令：
npm install --save classlist.js npm install --save web-animations-js npm install --save zone.js npm install --save core-js
然后，打开项目中的“polyfills.ts”文件，在文件末尾添加以下代码：
-- -------------------- ---- ------- --- ---- --- ---- -------- --- --------- --- ------- ------- -- --- -------- -- ------ --------------- -- --- ---- ------- ------ -------------- --- ---- --- ---- -------- --- --------- --- --- ------- ---- -- ------ ---------------------- --- --------- -------- ------- ------ --- -- ---- --- ---------------- -- ---- -- --- --- --- ---- ---- ------- ------------ --- --- ------- ------ ---------------------- --- - -------- -- ------- --- ---------- --------------------- - ------ ---- --- --- ------- ------- --- ------ -------------------------------------- --- ------ -------------------- -- --- ---- ------- ------ ------------------- --- - ---- -- -- -------- -- ------- ------- -- ------ -------------------- -- -------- ---- ------- ----
以上代码会自动引入必要的 polyfills，以保证 Angular 7 在 IE11 浏览器中能够正常工作。
修改配置文件
除了安装 polyfills，我们还需要修改项目中的 tsconfig.json 文件和 angular.json 文件，以确保生成的代码是 ES5 标准的。具体操作如下：
修改 tsconfig.json
在项目根目录找到 tsconfig.json 文件，修改以下两项：
"target": "es5", "lib": [ "es2018", "dom" ]
修改 angular.json
在项目根目录找到 angular.json 文件，修改以下两项：
-- -------------------- ---- -------
--------- -----
------------------ -
---------- -----
--------------------- -----
--------- ---------
------------------- -------
------------ -----
------------------------ -----
------------------------- -----
--------- ------
------------ -
---------------------
--
-------- -
------
-
-以上两项的修改可以确保 Angular 7 项目生成的代码符合 ES5 标准，以便在 IE11 中正确运行。
验证
完成以上步骤后，我们需要验证是否已经解决了 Angular 7 在 IE11 浏览器中的不兼容问题。可以通过以下两种方式进行验证：
本地测试
在本地电脑上打开 IE11 浏览器，输入项目网址，查看是否可以正常访问并渲染出网页。
使用开发工具模拟
打开 Google Chrome 浏览器，使用开发者工具模拟 IE11 浏览器，打开项目网址，查看是否可以正常访问并渲染出网页。
示例代码
这里提供一段示例代码，演示如何在 Angular 7 项目中解决 IE11 兼容问题：
-- -------------------- ---- -------
--- ---- --- ---- -------- --- --------- --- ------- ------- -- --- -------- --
------ --------------- -- --- ---- ------- ------ --------------
--- ---- --- ---- -------- --- --------- --- --- ------- ---- --
------ ----------------------
--- --------- -------- ------- ------ ---
-- ---- --- ---------------- -- ---- -- --- --- --- ---- ---- ------- ------------ --- --- -------
------ ----------------------
---
- -------- -- ------- --- ---------- ---------------------
- ------ ---- --- --- ------- ------- --- ------ --------------------------------------
---
------ -------------------- -- --- ---- ------- ------ -------------------
---
- ---- -- -- -------- -- ------- -------
--
------ -------------------- -- -------- ---- ------- ----
-- -------------
-
---------------- ------
------------------ -
---------- -----
--------------------- -----
--------- ---------
------------------- -------
------------ -----
------------------------ -----
------------------------- -----
--------- ------
------------ -
---------------------
--
-------- -
------
-
-
-
-- ------------
-------- -
---------- ----------------------------------------
---------- -
------------- ---------------
-------- -----------------
------- --------------
----------- ------------------------
------------ -------------------
--------- -
------------------
------------
--
--------- -
-----------------
--
---------- --
--
---
-结论
本文介绍了如何解决 Angular 7 在 IE11 浏览器中不兼容的问题，提供了详细的操作指导和示例代码，希望对开发者们有所帮助。实际项目中，我们需要根据具体情况进行调整，以保证 Angular 7 项目能够在各种浏览器中正常工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6707a270d91dce0dc86ae6fa