Firefox 60.9 Not Loading es2015 modules (Angular 8) - firefox

Question

I have an Angular 8 application using differential loading. The production build configuration creates ES5 and ES2015 modules for differential loading. Chrome, Edge, IE11 and latest FireFox all load correctly in Windows 10.
Unfortunately, the version of FF installed in the Production Environment is 60.9 and this version has issues with the modules.
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
}
}
The Network Tab in the Dev tools shows the following
Generated Script Tags in 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>
I can target ES5 modules only, but then IE11 breaks and I'd really prefer to maintain differential loading. I have no control over the version of FF installed in the Production Environment.
Thanks in advance!

Answer 1

Firefox 60.0 to 63.0.3 (<64.0) support type="module", however it is not until firefox 64.0 that passing credentials when retrieving scripts of type module is supported.
Thus the reason your ssl fails is because firefox isn't passing the cert/credentials.
Haven't created a way to get the auto-generated script tags to handle this for me yet, however, did find out in ff -> about:config, search for 'moduleScript', turn from 'true' to 'false' such that firefox 60->63.0.3 will grab the es5 version (using credentials).