Angular 8项目在Microsoft Edge和IE11中不起作用 [英] Angular 8 project not working in Microsoft Edge and IE11
问题描述
我需要使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中取消对导入行的注释
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标记完全为空！而且没有错误出现.
我错过了什么吗?
边缘为黑色，无错误:
边缘为空的应用程序根目录:
Chrome可以正常运行:
更新
当我在tomcat中部署该应用程序时，它可以正常工作(用ng build --base-href=/ietest/构建它之后).
但仍不能与ng serve
默认情况下，角度版本8中启用了ng build的差分加载.但是，对于ng test和ng serve，它仅生成一个不能在IE11中运行的ES2015构建.
有两种方法可以在服务期间使用ES5代码，从而使Angular 8应用程序在IE11中正常工作.
-
完全禁用差分负载. (不推荐)
您可以通过将 tsconfig.json 中的目标从"es2015" 更改为"es5" 来关闭差分加载.
-
具有多种服务配置.
在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'.
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.
Disable differential loading completely. (Not recommended)
You can turn differential loading off by changing the target from "es2015" to "es5" in your tsconfig.json.
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屋！
