问题描述

我需要让我的 Angular 项目同时在 IE11 和 Edge 上运行，但是在这两个浏览器中甚至没有显示一个非常简单的 hello world。

这是我所做的：

npm 版本：

$npm -v
6.10.2

角度版本：

$ng v
Angular CLI: 8.1.3
Node: 10.15.1
OS: win32 x64
Angular: 8.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.3
@angular-devkit/build-angular     0.801.3
@angular-devkit/build-optimizer   0.801.3
@angular-devkit/build-webpack     0.801.3
@angular-devkit/core              8.1.3
@angular-devkit/schematics        8.1.3
@ngtools/webpack                  8.1.3
@schematics/angular               8.1.3
@schematics/update                0.801.3
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.35.2

我创建了一个简单的项目

ng new ie-test

我按照 polyfills.ts 中的说明安装所需的软件包，

npm install --save classlist.js
npm install --save web-animations-js

我取消注释 polyfills.ts 中的导入行

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

然后运行应用程序。

适用于 Chrome 和 Firefox，但不适用于 IE11 或 Edge。

当我在开发者工具中查看控制台时，我发现 app-root 标签完全是空的！并且没有出现任何错误。

我错过了什么吗？

边缘黑色且没有错误：

边缘空应用程序根：

铬工作正常：

编辑：更新

当我在 tomcat 中部署应用程序时，它可以工作（在使用构建它之后ng build --base-href=/ietest/）。

但仍然无法使用ng serve

标签： angularinternet-explorer-11microsoft-edgeangular8

解决方案

默认情况下，在角度版本 8 中，ng build启用了差异加载。但是对于ng testand ng serve，它只生成一个无法在 IE11 中运行的 ES2015 构建。

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

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

您可以通过将 tsconfig.json 中的目标从“es2015”更改为“ es5 ”来关闭差异加载。

有多种服务配置。

在 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"
}
}
},

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

ng serve --configuration es5

此外，browserslist 文件内容如下：

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

angular - Angular 8 项目在 Microsoft Edge 和 IE11 中不起作用