如何解决Firefox 60.9未加载es2015模块Angular 8
我有一个使用差分加载的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,"sourceMap": true,"vendorChunk": true,"buildOptimizer": false,"maximumWarning": "2mb","maximumError": "5mb"
},"dev": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts","with": "src/environments/environment.dev.ts"
}
],"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","tsConfig": "tsconfig.spec.json","karmaConfig": "karma.conf.js","styles": [
"./node_modules/bootstrap/dist/css/bootstrap.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","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版本。
谢谢！
解决方法
Firefox 60.0 到 63.0.3 (
因此，您的 ssl 失败的原因是 Firefox 未通过证书/凭据。
还没有创建一种方法来让自动生成的脚本标签为我处理这个问题，但是，确实在 ff -> about:config 中找到了，搜索 'moduleScript'，从 'true' 转为 ' false' 这样 firefox 60->63.0.3 将获取 es5 版本（使用凭据）。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。