У меня есть приложение Angular 8, использующее дифференциальную загрузку. Конфигурация производственной сборки создает модули ES5 и ES2015 для дифференциальной загрузки. Chrome, Edge, IE11 и последняя версия FireFox корректно загружаются в Windows 10.
К сожалению, версия FF, установленная в производственной среде, - 60.9, и у этой версии есть проблемы с модулями.
package.json
"name": "rmt-v2",
"version": "3.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build:docker": "ng b -c=docker --watch",
"build:prod": "ng b -c=prod",
"build:dev": "ng s -c=dev --watch"
},
"private": true,
"dependencies": {
"@ag-grid-community/all-modules": "^22.1.1",
"@angular/animations": "~8.2.14",
"@angular/cdk": "^8.2.3",
"@angular/common": "~8.2.14",
"@angular/compiler": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"@fortawesome/angular-fontawesome": "^0.5.0",
"@fortawesome/fontawesome-svg-core": "^1.2.26",
"@fortawesome/free-regular-svg-icons": "^5.12.0",
"@fortawesome/free-solid-svg-icons": "^5.12.0",
"@ng-bootstrap/ng-bootstrap": "^5.2.1",
"@types/heatmap.js": "^2.0.36",
"@types/leaflet": "^1.5.12",
"@types/leaflet-draw": "^1.0.3",
"ag-grid-angular": "^22.1.1",
"ag-grid-community": "^22.1.1",
"angular-bootstrap-datetimepicker": "^4.0.2",
"angular-mocks": "^1.7.9",
"angular-split": "^3.0.2",
"angular-webstorage-service": "^1.0.2",
"bootstrap": "^4.4.1",
"classlist.js": "^1.1.20150312",
"core-js": "^3.6.4",
"file-saver": "^2.0.2",
"highcharts": "^8.1.2",
"highcharts-angular": "^2.4.0",
"highcharts-custom-events": "^3.0.4",
"leaflet": "^1.6.0",
"leaflet-draw": "^1.0.4",
"leaflet-heatmap": "^1.0.0",
"moment-range": "^4.0.2",
"ng2-dragula": "^2.1.1",
"ngx-contextmenu": "^5.1.0",
"ngx-device-detector": "^1.4.6",
"ngx-markdown": "^9.0.0",
"open-iconic": "^1.1.1",
"rxjs": "~6.4.0",
"sanitize-html": "^1.27.2",
"tslib": "^1.13.0",
"web-animations-js": "^2.3.2",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.26",
"@angular/cli": "~8.3.26",
"@angular/compiler-cli": "~8.2.14",
"@angular/language-service": "~8.2.14",
"@types/core-js": "^2.5.2",
"@types/file-saver": "^2.0.1",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"angular-router-loader": "^0.8.5",
"angular2-template-loader": "^0.6.2",
"angular2-toaster": "^8.0.0",
"autoprefixer": "^9.7.4",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"codelyzer": "^5.0.0",
"cross-loader": "^0.1.0",
"css-loader": "^3.4.2",
"ejs-loader": "^0.3.5",
"exports-loader": "^0.7.0",
"file-loader": "^5.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"istanbul-instrumenter-loader": "^3.0.1",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"mini-css-extract-plugin": "^0.9.0",
"moment": "^2.24.0",
"node-sass": "^4.14.1",
"postcss-loader": "^3.0.0",
"precss": "^4.0.0",
"protractor": "~5.4.0",
"pub": "^0.2.0",
"pug": "^2.0.4",
"pug-loader": "^2.4.0",
"raw-loader": "^4.0.0",
"source-map-loader": "^0.2.4",
"to-string-loader": "^1.1.6",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2"
}
}
Angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"rmt-v2": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"showCircularDependencies": true,
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/leaflet/dist/leaflet.css",
"./node_modules/leaflet-draw/dist/leaflet.draw.css",
"./node_modules/bootstrap/scss/bootstrap.scss",
"src/styles/styles.scss",
"src/styles/_reset.css",
"src/styles/bootstrapCustom.css"
],
"scripts": [
"./node_modules/marked/lib/marked.js",
"./node_modules/leaflet/dist/leaflet.js",
"./node_modules/heatmap.js/build/heatmap.min.js",
"./node_modules/leaflet-heatmap/leaflet-heatmap.js",
"./node_modules/leaflet-draw/dist/leaflet.draw.js",
"./node_modules/sanitize-html/dist/sanitize-html.min.js"
]
},
"configurations": {
"prod": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "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": "7mb",
"maximumError": "10mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
},
"docker": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.docker.ts"
}
],
"optimization": false,
"outputHashing": "all",
"sourceMap": true,
"extractCss": true,
"namedChunks": false,
"aot": false,
"extractLicenses": true,
"vendorChunk": true,
"buildOptimizer": false,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
},
"dev": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
],
"optimization": false,
"outputHashing": "all",
"sourceMap": true,
"extractCss": true,
"namedChunks": false,
"aot": false,
"extractLicenses": true,
"vendorChunk": true,
"buildOptimizer": false,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "rmt-v2:build"
},
"configurations": {
"production": {
"browserTarget": "rmt-v2:build:production"
},
"docker": {
"browserTarget": "rmt-v2:build:docker"
},
"dev": {
"browserTarget": "rmt-v2:build:dev"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "rmt-v2:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles/styles.scss",
"src/styles/_reset.css",
"src/styles/bootstrapCustom.css"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "rmt-v2:serve"
},
"configurations": {
"production": {
"devServerTarget": "rmt-v2:serve:production"
}
}
}
}
}},
"defaultProject": "rmt-v2"
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./src",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"paths": {
"@config/*": [ "../config/*" ],
"@app/*": ["app/*"]
},
"allowSyntheticDefaultImports": true,
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
],
"resolveJsonModule": true,
"esModuleInterop": true,
"skipLibCheck": true
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
На вкладке «Сеть» в инструментах разработчика отображается следующий 
Сгенерированные теги скрипта в index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Angular 8 App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.94bcefb507c368697735.css">
<link rel="stylesheet" href="main.954525c3d786f7058e13.css">
</head>
<body>
<app-root></app-root>
<script src="runtime-es2015.242f71ace90ec041b135.js" type="module"></script>
<script src="runtime-es5.242f71ace90ec041b135.js" nomodule defer></script>
<script src="polyfills-es5.4d6e5b779dfe03b63b7e.js" nomodule defer></script>
<script src="polyfills-es2015.7639006645731a3f7d9f.js" type="module"></script>
<script src="scripts.399fa4e8eb4db92676bf.js" defer></script>
<script src="main-es2015.692bc22eac2b55aeea5e.js" type="module"></script>
<script src="main-es5.692bc22eac2b55aeea5e.js" nomodule defer></script>
</body>
</html>
Я могу ориентироваться только на модули ES5, но тогда IE11 ломается, и я бы предпочел поддерживать дифференциальную загрузку. У меня нет контроля над версией FF, установленной в производственной среде.
Заранее спасибо!
