Angular 9应用程序未在IE11上运行 [英] Angular 9 Application Not running on IE11
本文介绍了Angular 9应用程序未在IE11上运行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我们的团队创建了一个9号角的新项目，在Google Chrome和Firefox上运行正常，但在IE11上我什么都看不到.我尝试了互联网上的所有内容，并关注了与此相关的每个博客，但我无法实现目标.
这是我的tsconfig.json
{"compileOnSave":false，"compilerOptions":{"baseUrl":"./"，"outDir":"./dist/out-tsc"，" sourceMap" ;:是的，声明":false，"downlevelIteration":是的，"experimentalDecorators":是的，"allowSyntheticDefaultImports":是的，模块":"esnext"，"moduleResolution":节点"，" importHelpers" ;:是的，目标":"es2015"，"lib":["es2018"，"dom"]，路径":{" @app/*":["src/app/*"]，"@modules/*":["src/app/modules/*"]，"@services/*":["src/app/services/*"]，"@shared/*":["src/app/shared/*"]，"@env/*":["src/environments/*"]，"@mocks/*":["mocks/*"]，"@models/*":["src/app/models/*"]}}，"angularCompilerOptions":{" fullTemplateTypeCheck" ;:是的，"strictInjectionParameters":true}} tsconfig-es5.app.json
{"extends":"./tsconfig.app.json"，"compilerOptions":{目标":"es5"；}} package.json
{名称":"connect-ui"，版本":"0.0.0&"，脚本":{"ng":"ng"，"start":"ng serve --port 6574"，" start:dev":"同时\\ npm run模拟\\"\"npm start \"，"mocks":"json-server --watch db.json --routes db.routes.json --port 6575"，"build":"ng build --base-href/ng/"，"test":"ng test"，"lint":"ng lint"，"e2e":"ng e2e"，"storybook":"start-storybook -p 6576"，"build-storybook":"build-storybook"；}，私人":是的，依赖项":{"@ angular/animations":"^ 9.1.9"，" @ angular/common":〜9.1.0&"，" @ angular/compiler":〜9.1.0&"，"@ angular/core":〜9.1.0&"，"@ angular/forms":〜9.1.0&"，"@ angular/localize":〜9.1.0&"，"@ angular/platform-browser":〜9.1.0&"，"@ angular/platform-browser-dynamic":〜9.1.0&"，" @ angular/router":〜9.1.0&"，"@ fortawesome/angular-fontawesome":"^ 0.6.1"，" @ fortawesome/fontawesome-svg-core":"^ 1.2.28"，"@ fortawesome/free-brands-svg-icons":"^ 5.13.0"，"@ fortawesome/free-regular-svg-icons":"^ 5.13.0"，"@ ng-bootstrap/ng-bootstrap":"^ 6.1.0&"，"@ ngx-gallery/core":"^ 5.0.0-beta.0&"，"@ ngx-translate/core":"^ 12.1.2"，"@ ngx-translate/http-loader":"^ 4.0.0&"，"@ types/zingchart":"^ 2.8.0&"，"angular-gridster2":"^ 9.1.0&"，"angular2-uuid":"^ 1.1.1"，"bootstrap":"^ 4.4.0&"，" classlist.js":"^ 1.1.20150312"，同时":"^ 5.2.0&"，"core-js":"^ 2.5.5"，"flatpickr":"^ 4.6.3"，" json-server" ;:" ^ 0.16.1" ;，时刻":"^ 2.26.0"，"ng2-flatpickr":"^ 9.0.0&"，"normalize.css":"^ 8.0.1"，"resize-observer-polyfill":"^ 1.5.1"，"rxjs":〜6.5.4"，"shortcut-buttons-flatpickr":"^ 0.3.0&"，"tslib":"^ 1.10.0"，"web-animations-js":"^ 2.3.2"，"zingchart":"^ 2.9.0&"，"zingchart-angleular":"0.0.6"，"zinggrid":"^ 1.2.0&"，"zone.js":〜0.10.2"}，"devDependencies":{"@ angular-devkit/build-angular":"^ 0.901.7"，" @ angular/cli":〜9.1.0&"，" @ angular/compiler-cli":〜9.1.0&"，" @ angular/language-service":〜9.1.0&"，"@ babel/core":"^ 7.10.3"，"@ storybook/addon-actions":"^ 5.3.19"，"@ storybook/addon-docs":"^ 5.3.19"，"@ storybook/addon-knobs":"^ 5.3.19"，"@ storybook/addon-links":"^ 5.3.19"，"@ storybook/addon-notes":"^ 5.3.19"，"@ storybook/addons":"^ 5.3.19"，"@ storybook/angular":"^ 5.3.19"，"@ types/茉莉花":〜3.5.0&"，"@ types/jasminewd2":〜2.0.3"，"babel-loader":"^ 8.1.0&"，"codelyzer":"^ 5.1.2"，" ember-cli-cors":"0.0.2"，茉莉花芯":〜3.5.0&"，"jasmine-spec-reporter":〜4.2.1"，业力":〜4.4.1"，"karma-chrome-launcher":〜3.1.0&"，业报覆盖率伊斯坦布尔报告者":〜2.1.0&"，业力茉莉花":〜3.0.1"，"karma-jasmine-html-reporter":"^ 1.4.2"，量角器":〜5.4.3"，"ts-node":〜8.3.0&"，"tslint":〜6.1.0&"，打字稿":〜3.8.3"；}} 我已点击此链接
pollyfills.ts
<代码>/************************************************************************************************************将$ localize加载到全局范围内-如果i18n标签出现在Angular模板中则使用.*/导入'@ angular/localize/init';/***此文件包含Angular所需的polyfill，并且在应用程序之前加载.*您可以将自己的多余的polyfill添加到此文件中.**此文件分为2个部分:* 1.浏览器polyfills.这些是在加载ZoneJS之前应用的，并按浏览器排序.* 2.应用程序导入.在ZoneJS之后导入的文件，应在主文件之前加载* 文件.**当前设置适用于所谓的常绿"模式.浏览器；最新版本的浏览器*自动更新自己.这包括Safari> = 10，Chrome> = 55(包括Opera)，*在台式机上为Edge> = 13，在移动设备上为iOS 10和Chrome.**在https://angular.io/guide/browser-support中了解更多*//************************************************************************************************************浏览器填充*//**对于SVG元素的NgClass支持，IE10和IE11需要以下内容*/导入'classlist.js';//运行`npm install --save classlist.js`导入'core-js/es6/reflect';/***网络动画`@ angular/platform-browser/animations`*仅当在应用程序内使用AnimationBuilder并使用IE/Edge或Safari时才需要.* Angular中的标准动画支持不需要任何polyfill(自Angular 6.0起).*/导入'web-animations-js';//运行`npm install --save web-animations-js`./***默认情况下，zone.js将修补所有可能的macroTask和DomEvents*用户可以通过设置以下标志来禁用macroTask/DomEvents补丁的一部分*因为需要在加载"zone.js"和webpack之前设置这些标志*会将导入放在包的顶部，因此用户需要创建一个单独的文件*在此目录中(例如:zone-flags.ts)，并放置以下标志*到该文件中，然后在导入zone.js之前添加以下代码.*导入"./zone-flags"；**这里列出了zone-flags.ts中允许的标志.**以下标志适用于所有浏览器.**(任何窗口).__Zone_disable_requestAnimationFrame = true;//禁用补丁requestAnimationFrame*(任何窗口).__Zone_disable_on_property = true;//禁用补丁onProperty，例如onclick*(任何窗口).__zone_symbol__UNPATCHED_EVENTS = ['scroll'，'mousemove'];//禁用补丁指定的eventNames**在IE/Edge开发人员工具中，addEventListener也将由zone.js包装*带有以下标志，它将绕过IE/Edge的"zone.js"补丁**(任何窗口).__Zone_enable_cross_context_check = true;**//************************************************************************************************************ Angular本身默认需要Zone JS.*/导入'zone.js/dist/zone';//包含在Angular CLI中./************************************************************************************************************应用程序导入*/
--------------- EDIT --------------------
解决方案
您是否编辑了浏览器列表文件?您应该在 IE 9-11 之前删除 not .浏览器列表如下:
>0.5％最近2个版本Firefox ESR没死IE 9-11#要获得IE 9-11支持，请删除否". 我还制作了一个新的angular 9应用程序，它可以在IE 11中正常运行.我添加了一个新的 tsconfig-es5.app.json 文件，并更新了 angular.json >配置，请编辑浏览器列表，然后运行 ng serve --configuration es5 .结果是类似.此外，您无需在 polyfills.ts 中取消注释.
我的tsconfig.json:
{"compileOnSave":false，"compilerOptions":{"baseUrl":"./"，"outDir":"./dist/out-tsc"，" sourceMap" ;:是的，声明":false，"downlevelIteration":是的，"experimentalDecorators":是的，模块":"esnext"，"moduleResolution":节点"，" importHelpers" ;:是的，目标":"es2015"，"lib":["es2018"，"dom"]}，"angularCompilerOptions":{" fullTemplateTypeCheck" ;:是的，"strictInjectionParameters":true}} 我的package.json:
{名称":"angular9"，版本":"0.0.0&"，脚本":{"ng":"ng"，开始":"ng服务"，"build":"ng build"，"test":"ng test"，"lint":"ng lint"，"e2e":"ng e2e"；}，私人":是的，依赖项":{" @ angular/animations":〜9.1.0&"，" @ angular/common":〜9.1.0&"，" @ angular/compiler":〜9.1.0&"，"@ angular/core":〜9.1.0&"，"@ angular/forms":〜9.1.0&"，"@ angular/platform-browser":〜9.1.0&"，"@ angular/platform-browser-dynamic":〜9.1.0&"，" @ angular/router":〜9.1.0&"，"rxjs":〜6.5.4"，"tslib":"^ 1.10.0"，"zone.js":〜0.10.2"}，"devDependencies":{" @ angular-devkit/build-angular":〜0.901.0&"，" @ angular/cli":〜9.1.0&"，" @ angular/compiler-cli":〜9.1.0&"，" @ angular/language-service":〜9.1.0&"，"@ types/node":"^ 12.11.1"，"@ types/茉莉花":〜3.5.0&"，"@ types/jasminewd2":〜2.0.3"，"codelyzer":"^ 5.1.2"，茉莉花芯":〜3.5.0&"，"jasmine-spec-reporter":〜4.2.1"，业力":〜4.4.1"，"karma-chrome-launcher":〜3.1.0&"，业报覆盖率伊斯坦布尔报告者":〜2.1.0&"，业力茉莉花":〜3.0.1"，"karma-jasmine-html-reporter":"^ 1.4.2"，量角器":〜5.4.3"，"ts-node":〜8.3.0&"，"tslint":〜6.1.0&"，打字稿":〜3.8.3"；}} Our team has created an angular 9 new project and it is working perfectly fine on Google Chrome and Firefox but on IE11 I cant see anything. I have tried everything on from the internet followed every blog related to this but I unable to achieve the goal.
Here is my tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"lib": [
"es2018",
"dom"
],
"paths": {
"@app/*": ["src/app/*"],
"@modules/*": ["src/app/modules/*"],
"@services/*": ["src/app/services/*"],
"@shared/*": ["src/app/shared/*"],
"@env/*": ["src/environments/*"],
"@mocks/*": ["mocks/*"],
"@models/*": ["src/app/models/*"]
}
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
tsconfig-es5.app.json
{
"extends": "./tsconfig.app.json",
"compilerOptions": {
"target": "es5"
}
}
package.json
{
"name": "connect-ui",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --port 6574",
"start:dev": "concurrently \"npm run mocks\" \"npm start\"",
"mocks": "json-server --watch db.json --routes db.routes.json --port 6575",
"build": "ng build --base-href /ng/",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"storybook": "start-storybook -p 6576",
"build-storybook": "build-storybook"
},
"private": true,
"dependencies": {
"@angular/animations": "^9.1.9",
"@angular/common": "~9.1.0",
"@angular/compiler": "~9.1.0",
"@angular/core": "~9.1.0",
"@angular/forms": "~9.1.0",
"@angular/localize": "~9.1.0",
"@angular/platform-browser": "~9.1.0",
"@angular/platform-browser-dynamic": "~9.1.0",
"@angular/router": "~9.1.0",
"@fortawesome/angular-fontawesome": "^0.6.1",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-brands-svg-icons": "^5.13.0",
"@fortawesome/free-regular-svg-icons": "^5.13.0",
"@ng-bootstrap/ng-bootstrap": "^6.1.0",
"@ngx-gallery/core": "^5.0.0-beta.0",
"@ngx-translate/core": "^12.1.2",
"@ngx-translate/http-loader": "^4.0.0",
"@types/zingchart": "^2.8.0",
"angular-gridster2": "^9.1.0",
"angular2-uuid": "^1.1.1",
"bootstrap": "^4.4.0",
"classlist.js": "^1.1.20150312",
"concurrently": "^5.2.0",
"core-js": "^2.5.5",
"flatpickr": "^4.6.3",
"json-server": "^0.16.1",
"moment": "^2.26.0",
"ng2-flatpickr": "^9.0.0",
"normalize.css": "^8.0.1",
"resize-observer-polyfill": "^1.5.1",
"rxjs": "~6.5.4",
"shortcut-buttons-flatpickr": "^0.3.0",
"tslib": "^1.10.0",
"web-animations-js": "^2.3.2",
"zingchart": "^2.9.0",
"zingchart-angular": "0.0.6",
"zinggrid": "^1.2.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.901.7",
"@angular/cli": "~9.1.0",
"@angular/compiler-cli": "~9.1.0",
"@angular/language-service": "~9.1.0",
"@babel/core": "^7.10.3",
"@storybook/addon-actions": "^5.3.19",
"@storybook/addon-docs": "^5.3.19",
"@storybook/addon-knobs": "^5.3.19",
"@storybook/addon-links": "^5.3.19",
"@storybook/addon-notes": "^5.3.19",
"@storybook/addons": "^5.3.19",
"@storybook/angular": "^5.3.19",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"babel-loader": "^8.1.0",
"codelyzer": "^5.1.2",
"ember-cli-cors": "0.0.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3"
}
}
I have followed this link https://medium.com/better-programming/how-to-fix-your-angular-app-when-its-not-working-in-ie11-eb24cb6d9920
Also I have seen for others in the posts that they had some error in their console of IE11 but there is no as such any error in my Console window of IE11. Please check this screenshot of IE11.
pollyfills.ts
/***************************************************************************************************
* Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
*/
import '@angular/localize/init';
/**
* 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 requires the following for NgClass support on SVG elements */
import 'classlist.js'; //Run `npm install --save classlist.js`.
import 'core-js/es6/reflect';
/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
*/
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
* because those flags need to be set before `zone.js` being loaded, and webpack
* will put import in the top of bundle, so user need to create a separate file
* in this directory (for example: zone-flags.ts), and put the following flags
* into that file, and then add the following code before importing zone.js.
* import './zone-flags';
*
* The flags allowed in zone-flags.ts are listed here.
*
* The following flags will work for all browsers.
*
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*
* (window as any).__Zone_enable_cross_context_check = true;
*
*/
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
---------------EDIT--------------------
解决方案
Have you edited the browserslist file? You should remove not before IE 9-11. The browserslist is like below:
> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.
I also made a new angular 9 app and it can work well in IE 11. I added a new tsconfig-es5.app.json file, updated angular.json configuration, edited browserslist then run ng serve --configuration es5. The result is like this. Besides, you don't need to uncomment in polyfills.ts.
My 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": "es2015",
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
My package.json:
{
"name": "angular9",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~9.1.0",
"@angular/common": "~9.1.0",
"@angular/compiler": "~9.1.0",
"@angular/core": "~9.1.0",
"@angular/forms": "~9.1.0",
"@angular/platform-browser": "~9.1.0",
"@angular/platform-browser-dynamic": "~9.1.0",
"@angular/router": "~9.1.0",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.901.0",
"@angular/cli": "~9.1.0",
"@angular/compiler-cli": "~9.1.0",
"@angular/language-service": "~9.1.0",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3"
}
}
这篇关于Angular 9应用程序未在IE11上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
