角度 8 应用程序 UI 未在 IE 中呈现

Posted 2023-03-06

【中文标题】角度 8 应用程序 UI 未在 IE 中呈现

【英文标题】：angular 8 application UI not rendering in IE

【发布时间】：2020-10-13 03:20:38

【问题描述】：

您好，我在 angular8 中有一个应用程序，它在所有浏览器中都可以正常工作，但在 IE 中却不行。我已经尝试了许多在线可用的解决方案，但到目前为止都没有成功，这是我的

polyfills.ts :-

         * BROWSER POLYFILLS
         */

        /** IE9, IE10 and IE11 requires all of the following polyfills. **/
        import 'core-js/es6/symbol';
        import 'core-js/es6/object';
        import 'core-js/es6/function';
        import 'core-js/es6/parse-int';
        import 'core-js/es6/parse-float';
        import 'core-js/es6/number';
        import 'core-js/es6/math';
        import 'core-js/es6/string';
        import 'core-js/es6/date';
        import 'core-js/es6/array';
        import 'core-js/es6/regexp';
        import 'core-js/es6/map';
        import 'core-js/es6/weak-map';
        import 'core-js/es6/set';

        /** IE10 and IE11 requires the following for NgClass support on SVG elements */
        import 'classlist.js';  // Run `npm install --save classlist.js`.

        /** IE10 and IE11 requires the following for the Reflect API. */
        // import 'core-js/es6/reflect';


        /** Evergreen browsers require these. **/
        // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
        import 'core-js/es7/reflect';


        // import 'web-animations-js';  // Run `npm install --save web-animations-js`.

     

   

        /***************************************************************************************************
         * Zone JS is required by default for Angular itself.
         */
        import 'zone.js/dist/zone';  // Included with Angular CLI.

浏览器列表文件

            # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
        # For additional information regarding the format and rule options, please see:
        # https://github.com/browserslist/browserslist#queries
        # For IE 9-11 support, please uncomment the last line of the file and adjust as needed
        > 0.5%
        last 2 versions
        Firefox ESR
        not dead
        IE 9-11

tsConfig.ts

      
    "compileOnSave": false,
    "compilerOptions": 
      "baseUrl": "./",
      "outDir": "./dist/out-tsc",
      "sourceMap": true,
      "declaration": false,
      "module": "es2015",
      "moduleResolution": "node",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "target": "es5",
      "typeRoots": [
        "node_modules/@types"
      ],
      "lib": [
        "es2017",
        "dom"
      ]
    
  

请帮帮我，我怎样才能让它在 Internet Explorer 中运行。

【参考方案1】：

默认情况下，在版本 8 中，如果我们使用 ng serve 或 ng test，它将生成无法在 IE 11 中运行的单个 ES2015 构建。

根据this link，在服务期间有两种方法可以让 ES5 代码在 IE11 中运行 Angular 8 应用程序。

完全禁用差分加载。 （不推荐）

您可以通过在 tsconfig.json 中将目标从 "es2015" 更改为 "es5" 来关闭差异加载。 p>

有多种服务配置。

在 tsconfig.app.json 旁边创建一个新的 tsconfig tsconfig-es5.app.json，内容如下：

  
  "extends": "./tsconfig.app.json",
  "compilerOptions":  
  "target": "es5"   
   
 

在您的 angular.json 中，在 build 和 serve 目标下添加两个新的配置部分（es5 节点）以提供新的 tsconfig。

 "build": 
     "builder": "@angular-devkit/build-angular:browser",
     "options": 
         ...
 ,
 "configurations": 
 "production": 
     ...
 ,
 "es5": 
     "tsConfig": "./tsconfig-es5.app.json"
 
 
 ,
 "serve": 
 "builder": "@angular-devkit/build-angular:dev-server",
 "options": 
     ...
 ,
 "configurations": 
 "production": 
 ...
 ,
 "es5": 
     "browserTarget": "<your application name>:build:es5"
 
 
 ,

[注意] 将应用名称更改为您自己的。

另外，browserslist文件内容如下：

 > 0.5%
 last 2 versions
 Firefox ESR
 not dead
 IE 9-11 # For IE 9-11 support, remove 'not'.

然后您可以使用以下命令使用此配置运行服务：

 ng serve --configuration es5

【参考方案2】：

试试下面的代码，它适用于我的情况。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />