运行 Internet Explorer 10、11 上的 Angular 8 应用

Question

我在让我的 Angular 8 应用程序在 Internet Explorer 10 和 11 上显示时遇到了很多麻烦。目前它只加载一个包含空组件的空白页面。我已经在网上关注了 giudes 和像

这样的 Whosebug 答案

但是页面还是空白。这是我的配置文件：

tsconfig.es5.json

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

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "AppName": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/AppName",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              {
                "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
              },
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "es5": {
              "tsConfig": "./tsconfig.es5.json"
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "AppName:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "AppName:build:production"
            },
            "es5": {
              "browserTarget": "AppName:build:es5"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "AppName:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "AppName:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "AppName:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "AppName"
}

polyfills.js

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/guide/browser-support
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

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

/* Evergreen browsers require these. */
import 'core-js/es6/reflect';

/* IE10 and IE11 requires the following to support `@angular/animation`. ALL Firefox browsers require the following to support `@angular/animation`. */
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

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

/***************************************************************************************************
 * APPLICATION IMPORTS
 * You can include your own polyfills here (e.g. CSS custom properties).
 */

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

这里是生成的索引文件

<!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>AppName</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
    <app-root></app-root>
    <script src="runtime.js"></script>
    <script src="polyfills-es5.js" nomodule></script>
    <script src="polyfills.js"></script>
    <script src="styles.js"></script>
    <script src="vendor.js"></script><script src="main.js"></script>
    </body>
    </html>

浏览器列表

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
#   npx browserslist

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

这是 npx browserlist

的输出

npx browserslist
and_chr 75
and_ff 67
and_qq 1.2
and_uc 11.8
android 67
baidu 7.12
chrome 75
chrome 74
chrome 73
chrome 72
edge 18
edge 17
firefox 67
firefox 66
firefox 60
ie 11
ie 10
ie 9
ie_mob 11
ios_saf 12.2
ios_saf 12.0-12.1
ios_saf 11.3-11.4
kaios 2.5
op_mini all
op_mob 46
opera 58
opera 57
safari 12.1
safari 12
safari 5.1
samsung 9.2
samsung 8.2
samsung 4

在现代浏览器中效果很好，但我们需要支持 IE 10 和 11。如果这有所不同，我也使用最新的 angular material。我试过了

ng build

和

ng build --configration="es5"

非常感谢任何帮助。

谢谢

更新：

ng serve --configutation=es5

在 IE 中加载页面！！

ng build 生成的 dist 没有。

Answer 1

我在 Chrome 和 Safari 上遇到了很多这样的问题。不仅是IE。所以，我有一些建议给你，因为你的代码看起来没有问题。

确保基本 href 正确。因为，有时我们部署到开发服务器和 xx.xxx.xx.xxx:1024/your-frontend/ 之类的 url。这意味着您必须将 your-frontend 作为基本 href 添加到 angular.json 或从构建命令行添加。

如何检查这个？

您观察您的网络并注意到您的脚本和资产加载失败。
有时是因为 polyfill 问题。也许不是来自您的项目。它来自 node_modules 中的图书馆。上次，我无法在 IE 上运行我的 angular 项目，因为我使用 ngxs 作为状态管理并且它在 IE 上不起作用。

然后，我必须在我的 polyfills.ts 中添加这样的内容以支持 ngxs
```
if (!Object.entries) {
    Object.entries = function (obj) {
        var ownProps = Object.keys(obj),
            i = ownProps.length,
            resArray = new Array(i); // preallocate the Array
        while (i--)
            resArray[i] = [ownProps[i], obj[ownProps[i]]];

        return resArray;
    };
}
(window as any).__Zone_enable_cross_context_check = true;
```
如何检查这个问题？

通常情况下，您可以在 IE 的控制台上看到错误或警告。

这对我的 ex 项目来说太奇怪了。 angular 8 中的新延迟加载语法运行不佳。它不会加载您的组件。

我的解决方案：

删除 angular 8.

中的新加载子语法

const routes: Routes = [{
  path: 'lazy',
  // The new import() syntax
  loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
}];

到

const routes: Routes = [{
  path: 'lazy',
  loadChildren: () => LazyModule
}];

希望对您有所帮助。

Answer 2

试试用F12开发者工具看看有没有报错？

我创建了一个新的angular示例（然后，根据配置ES5），并使用类似的tsconfig.es5.json、angular.json和tsconfig.json 个文件。但是polyfills.ts文件只包含以下内容：

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

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

/* IE10 and IE11 requires the following to support `@angular/animation`. ALL Firefox browsers require the following to support `@angular/animation`. */
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

[注意] polyfills.ts 文件不包含 "core-js/es6/XXX" 导入，如果我添加它们，它将显示 "Module not found error".

然后使用 ng serve --configuration es5 到运行与 ES5 配置，在 IE 浏览器 (IE 10+) 中一切正常。

并使用 ng build --configuration es5 --prod 构建应用程序，然后，将输出文件夹（默认为 dist/）中的所有内容复制到服务器上的文件夹并将其托管在 IIS 上，之后，浏览网站使用IE浏览器，一切正常

您可以按照上述步骤新建一个angular8应用程序进行测试。

运行 Internet Explorer 10、11 上的 Angular 8 应用

Running an Angular 8 app on Internet Explorer 10, 11

internet-explorer

angular-material

angular