После обновления до Angular 8 ng build генерирует правильный index.html, который поддерживает дифференциальную загрузку, однако ng serve генерирует другой index.html, который содержит ссылки только на некоторые из сгенерированных сценариев 'es5'.В результате приложение не работает в браузерах ES5, таких как IE 11.
. До сих пор я получил:
- подтвердил, что приложение работает должным образом в современных браузерах ES2015 +, таких как Chrome * 1008.*
- подтвердил, что приложение работало в IE 11 до обновления до Angular 8
- сравнил источник index.html в IE 11 с источником, сгенерированным в каталоге dist из
ng build, может видеть различия в ссылках на сценарии (см.пример кода ниже) - искал проблемы angular и angular-cli на Github и stackoverflow для похожих проблем
- пробовал создавать и обслуживать с опцией es5BrowserSupport и без нее в angular.json
- обновлено до последних версий пакетов @ angular-devkit и @angular
Репозиторий, над которым я работаю, содержит проект приложения и проект библиотеки.Вот соответствующие цели архитектора из angular.json после обновления до Angular 8:
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/ng-shared-components-tester",
"index": "projects/ng-shared-components-tester/src/index.html",
"main": "projects/ng-shared-components-tester/src/main.ts",
"polyfills": "projects/ng-shared-components-tester/src/polyfills.ts",
"tsConfig": "projects/ng-shared-components-tester/tsconfig.app.json",
"assets": [
"projects/ng-shared-components-tester/src/favicon.ico",
"projects/ng-shared-components-tester/src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"projects/ng-shared-components-tester/src/styles.css",
"node_modules/abc-emerald-standards/dist/emerald/assets/css/default.css",
"node_modules/abc-emerald-standards/dist/emerald/assets/css/forms.css"
],
"scripts": [],
"es5BrowserSupport": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "projects/ng-shared-components-tester/src/environments/environment.ts",
"with": "projects/ng-shared-components-tester/src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "ng-shared-components-tester:build"
},
"configurations": {
"production": {
"browserTarget": "ng-shared-components-tester:build:production"
}
}
},
Вот файл списка браузеров с включенной поддержкой IE 11:
> 0.5%
last 4 versions
IE 11
not dead
tsconfig.json:
{
"compileOnSave": false,
"compilerOptions": {
"importHelpers": true,
"outDir": "./dist/out-tsc",
"baseUrl": "./",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
],
"module": "esnext",
"paths": {
"@abc/ng-shared-components": [
"dist/abc/ng-shared-components"
],
"@abc/ng-shared-components/*": [
"dist/abc/ng-shared-components/*"
]
}
},
"angularCompilerOptions": {
"annotateForClosureCompiler": true,
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
},
}
Ожидаемый результат
ng build генерирует ожидаемый результат в dist / ng-shared-components-tester / index.html:
<body>
<app-root></app-root>
<script src="runtime-es2015.js" type="module"></script>
<script src="polyfills-es2015.js" type="module"></script>
<script src="runtime-es5.js" nomodule></script>
<script src="polyfills-es5.js" nomodule></script>
<script src="styles-es2015.js" type="module"></script>
<script src="styles-es5.js" nomodule></script>
<script src="vendor-es2015.js" type="module"></script>
<script src="main-es2015.js" type="module"></script>
<script src="vendor-es5.js" nomodule></script>
<script src="main-es5.js" nomodule></script>
</body>
Фактический результат
ng serve отправляет index.html в IE 11, который содержит только версию ESF pollfills.js:
<body>
<app-root></app-root>
<script src="runtime.js"></script>
<script src="polyfills-es5.js" nomodule></script>
<script src="polyfills.js"></script><script src="styles.js"></script>
<script src="vendor.js"></script>
<script src="main.js"></script>
</body>