Angular 8 项目在 Microsoft Edge 和 IE11 中不起作用 [英] Angular 8 project not working in Microsoft Edge and IE11

问题描述

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

这是我所做的:

npm 版本:

$npm -v6.10.2

角度版本:

$ng v角 CLI:8.1.3节点:10.15.1操作系统:win32 x64角度:8.1.3... 动画、cli、common、编译器、编译器-cli、核心、表单...语言服务，平台浏览器，平台浏览器动态...路由器套餐版本-----------------------------------------------------------@angular-devkit/架构师 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/核心 8.1.3@angular-devkit/schematics 8.1.3@ngtools/webpack 8.1.3@原理图/角度 8.1.3@原理图/更新 0.801.3rxjs 6.4.0打字稿 3.4.5网络包 4.35.2

我创建了一个简单的项目

ng 新的 ie-test

我按照 polyfills.ts 中的描述安装了所需的包，

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

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

import 'classlist.js';//运行 `npm install --save classlist.js`.导入网络动画-js"；//运行 `npm install --save web-animations-js`.

然后运行应用程序.

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

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

我错过了什么吗?

边缘黑色且没有错误:

边缘空应用程序根:

Chrome 工作正常:

更新

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

但仍然不能使用 ng serve

解决方案

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

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

1. 完全禁用差分加载.(不推荐)

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

2. 有多种服务配置.

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

   <代码>{"extends": "./tsconfig.app.json",编译器选项":{目标":es5"}}

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

   构建":{"builder": "@angular-devkit/build-angular:browser",选项": {...},配置":{生产": {...},es5":{"tsConfig": "./tsconfig-es5.app.json"}}},服务": {"builder": "@angular-devkit/build-angular:dev-server",选项": {...},配置":{生产": {...},es5":{"browserTarget": "<您的应用程序名称>:build:es5"}}},

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

   ng serve --configuration es5

此外，浏览器列表文件内容如下:

<代码>>0.5%最后 2 个版本火狐ESR没死IE 9-11 # 对于 IE 9-11 支持，删除 'not'.

I need to make my Angular project work on both IE11 and Edge, but a very simple hello world is not even showing in these two browsers.

Here's what I did:

npm version:

$npm -v
6.10.2

Angular version:

$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

I create a simple project

ng new ie-test

I install the needed packages as described in the polyfills.ts,

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

I uncomment the imports lines in polyfills.ts

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

And then run the application.

Works on Chrome and Firefox, but not in IE11 or Edge.

When I checked the console in the developer tools, I've found that the app-root tag is completely empty! And no errors are showing up.

Am I missing something?

Edge black and no error:

Edge empty app-root:

Chrome works fine:

EDIT : Update

When I deploy the app in tomcat it works (after building it with ng build --base-href=/ietest/).

But still not working with ng serve

解决方案

By default in angular version 8, differential loading for ng build is enabled. However for ng test and ng serve, it only generates a single ES2015 build which cannot run in IE11.

There're two ways to have ES5 code during serve which make angular 8 app work in IE11.

1. Disable differential loading completely. (Not recommended)

   You can turn differential loading off by changing the target from "es2015" to "es5" in your tsconfig.json.

2. Have multiple configurations for serve.

   Create a new tsconfig tsconfig-es5.app.json next to tsconfig.app.json with the below contents:

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

   In your angular.json add two new configuration section (es5 node) under the build and serve target to provide a new 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"
   }
   }
   },
   

   You can then run the serve with this configuration using the below command:

   ng serve --configuration es5
   

Besides, the browserslist file content as below:

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

这篇关于Angular 8 项目在 Microsoft Edge 和 IE11 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！