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

Question

我需要使Angular项目在IE11和Edge上都能工作，但是在这两个浏览器中甚至都没有显示一个非常简单的问候世界。

这是我所做的：

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中取消对导入行的注释

$npm -v
6.10.2

然后运行该应用程序。

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

在开发人员工具中检查控制台时，我发现app-root标记完全为空！而且没有错误出现。

我想念什么吗？

边缘为黑色且无错误：

边缘空的应用程序根：

Chrome可以正常运行：

编辑：更新

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

但仍无法使用 ng serve

Answer 1

使用 Angular 8，您不必再直接接触 polyfill。browserslist您的 Angular 项目的根目录中有一个文件。您可以在其中指定应支持哪些浏览器以及不支持哪些浏览器。您可以使用以下命令检查您的浏览器

npx browserslist

例如您可以添加

ie 6-8

支持 Internet Explorer 版本 6 至 8。您可以在此处找到包含所有选项的详细列表。这会自动导入所需的 polyfill，并且还会区分现代浏览器和旧版浏览器以仅传送必要的代码，这称为“差异加载”。因此，您的./dist文件夹中有 es2015 和 es5 包。

Answer 2

默认情况下，在角度版本8中，ng build启用的差分加载。但是对于ng test和ng serve，它仅生成一个不能在IE11中运行的ES2015内部版本。

有两种方法可以在服务期间使用ES5代码，从而可以在IE11中使用angular 8应用程序。

1. 完全禁用差分负载。（不推荐）

   您可以通过改变目标转向差异载荷断“ES2015”到“ES5”你tsconfig.json。

2. 有多种服务配置。

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

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

   在您的angular.json中，在构建和服务目标下添加两个新的配置部分（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
   

此外，浏览器列出的文件内容如下：

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