IE 11 在推荐修复后未加载 Angular 10 个应用
IE 11 not loading Angular 10 app after recommended fixes
我已经对 Angular 10 个应用程序的 IE11 问题进行了标准修复(未加载字体,捆绑文件中某些字符的脚本错误)——通过添加 tsconfig -es5.app.json 文件,目标为 es5,我在 es5 中添加了 es5 条目=]配置对象。 polyfills.ts 正在导入 classlist.js 文件。我没有遗漏任何东西。这是我的 package.json 文件,其中包含我使用的构建和 运行 脚本:
你可以看到 dev:es5 和 dev:internal:es5 的配置都是 es5。现在这是我的 angular.json 文件构建配置:
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"aot": true,
"outputPath": "dist/{MyContent}/",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.scss"],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "{myEnvDevFile}",
"with": "{myEnvProdFile} }
],
"optimization": true,
"outputHashing": "none",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
]
},
"es5": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"tsConfig": "./tsconfig-es5.app.json"
}
}
}
这是我的原始 tsconfig.app.json 文件:
{
"extends": "./tsconfig.base.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": ["src/main.ts", "src/polyfills.ts"],
"include": ["src/**/*.d.ts"]
}
最后 tsconfig-es5.app.json 文件:
{
"extends": "./tsconfig.app.json",
"compilerOptions": {
"target": "es5"
}
}
我认为我没有遗漏任何东西。 Angular CLI 是 10,所以我觉得我很好。我犯了一个明显的错误吗?
对我来说,我一定是在 polyfill.ts 中遗漏了一个 polyfill,但我不知道是哪个。 zone.js 和 classlist.js 都被导入。
请按照以下步骤在 IE11 中 运行 Angular 10
应用程序。
第 1 步 :: 选中此 URL (medium.com) 并按说明进行操作。如果你很幸运,那么你的应用程序将在 IE11 上运行,如果不是,请按照第 2 步进行操作。
第 2 步 :: 您可能会在终端中遇到以下错误 -
ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es6/reflect' in '...\src'
然后你必须注释掉 import 'core-js/es6/reflect'
并在 polyfills.ts
-
中添加以下代码
/** Evergreen browsers require these. */
// import 'core-js/es6/reflect';
/** IE9, IE10 and IE11 requires all of the following polyfills. */
import 'core-js/es/reflect';
import 'core-js/es/symbol';
import 'core-js/es/object';
import 'core-js/es/array';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/regexp';
import 'core-js/es/map';
import 'core-js/es/set';
第 2 步参考 URL -
我已经对 Angular 10 个应用程序的 IE11 问题进行了标准修复(未加载字体,捆绑文件中某些字符的脚本错误)——通过添加 tsconfig -es5.app.json 文件,目标为 es5,我在 es5 中添加了 es5 条目=]配置对象。 polyfills.ts 正在导入 classlist.js 文件。我没有遗漏任何东西。这是我的 package.json 文件,其中包含我使用的构建和 运行 脚本:
你可以看到 dev:es5 和 dev:internal:es5 的配置都是 es5。现在这是我的 angular.json 文件构建配置:
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"aot": true,
"outputPath": "dist/{MyContent}/",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.scss"],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "{myEnvDevFile}",
"with": "{myEnvProdFile} }
],
"optimization": true,
"outputHashing": "none",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
]
},
"es5": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"tsConfig": "./tsconfig-es5.app.json"
}
}
}
这是我的原始 tsconfig.app.json 文件:
{
"extends": "./tsconfig.base.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": ["src/main.ts", "src/polyfills.ts"],
"include": ["src/**/*.d.ts"]
}
最后 tsconfig-es5.app.json 文件:
{
"extends": "./tsconfig.app.json",
"compilerOptions": {
"target": "es5"
}
}
我认为我没有遗漏任何东西。 Angular CLI 是 10,所以我觉得我很好。我犯了一个明显的错误吗?
对我来说,我一定是在 polyfill.ts 中遗漏了一个 polyfill,但我不知道是哪个。 zone.js 和 classlist.js 都被导入。
请按照以下步骤在 IE11 中 运行 Angular 10
应用程序。
第 1 步 :: 选中此 URL (medium.com) 并按说明进行操作。如果你很幸运,那么你的应用程序将在 IE11 上运行,如果不是,请按照第 2 步进行操作。
第 2 步 :: 您可能会在终端中遇到以下错误 -
ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es6/reflect' in '...\src'
然后你必须注释掉 import 'core-js/es6/reflect'
并在 polyfills.ts
-
/** Evergreen browsers require these. */
// import 'core-js/es6/reflect';
/** IE9, IE10 and IE11 requires all of the following polyfills. */
import 'core-js/es/reflect';
import 'core-js/es/symbol';
import 'core-js/es/object';
import 'core-js/es/array';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/regexp';
import 'core-js/es/map';
import 'core-js/es/set';
第 2 步参考 URL -