angular - 将应用程序从 angular 8 转换为 angular 9 后，应用程序未使用 prod build 进行初始化
问题描述
我们有一个 angular 8 的现有应用程序。所以现在我们正在将我们现有的应用程序从 angular 8 转换为 angular 9。我们在转换时遇到了一些问题，但所有这些错误都得到了解决。我们没有面临开发构建的任何问题，而是生产构建的问题。prod 构建成功，但在打开应用程序时，角度应用程序未初始化。这是我的 tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"skipLibCheck": true,
"noStrictGenericChecks": true,
"target": "es2015",
"resolveJsonModule": true,
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
}
}
我的 angular.json 是
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"energyapp": {
"root": "",
"sourceRoot": "ClientApp",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "wwwroot",
"index": "ClientApp/index.html",
"main": "ClientApp/main.ts",
"polyfills": "ClientApp/polyfills.ts",
"tsConfig": "ClientApp/tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "ClientApp/appResourceFiles",
"output": "/wwwroot"
},
{
"glob": "**/*",
"input": "ClientApp/appResourceFiles",
"output": "/"
},
"ClientApp/desktopIndex.html"
],
"styles": [
"ClientApp/appResourceFiles/styles.scss"
],
"scripts": ["./node_modules/echarts/dist/echarts.js"]
},
"configurations": {
"production": {
"fileReplacements": [{
"replace": "ClientApp/environments/environment.ts",
"with": "ClientApp/environments/environment.prod.ts"
}],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"ngswConfigPath": "ClientApp/ngsw-config.json"
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "energyapp:build"
},
"configurations": {
"production": {
"browserTarget": "energyapp:build:production"
}
}
},
"build-worker": {
"builder": "@angular-devkit/build-webpack:webpack",
"options": {
"webpackConfig": "./webpack.config.worker.js"
}
},
"dev-worker": {
"builder": "@angular-devkit/build-webpack:webpack",
"options": {
"webpackConfig": "./ClientApp/webpack.config.dev-worker.js"
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "energyapp:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"codeCoverage": true,
"main": "ClientApp/test.ts",
"polyfills": "ClientApp/polyfills.ts",
"tsConfig": "ClientApp/tsconfig.spec.json",
"karmaConfig": "ClientApp/karma.conf.js",
"styles": [
"ClientApp/appResourceFiles/styles.scss"
],
"scripts": [""],
"assets": [
"ClientApp/favicon.ico",
"ClientApp/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"ClientApp/tsconfig.app.json",
"ClientApp/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"desktop": {
"root": "",
"sourceRoot": "ClientApp",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "wwwroot",
"index": {
"input": "ClientApp/desktopIndex.html",
"output": "index.html"
},
"main": "ClientApp/main.ts",
"polyfills": "ClientApp/polyfills.ts",
"tsConfig": "ClientApp/tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "ClientApp/appResourceFiles",
"output": "/wwwroot"
},
{
"glob": "**/*",
"input": "ClientApp/appResourceFiles",
"output": "/"
},
"ClientApp/desktopIndex.html"
],
"styles": [
"ClientApp/appResourceFiles/styles.scss"
],
"scripts": ["./node_modules/echarts/dist/echarts.js"]
},
"configurations": {
"production": {
"index": {
"input": "ClientApp/desktopIndex.html",
"output": "index.html"
},
"fileReplacements": [{
"replace": "ClientApp/environments/environment.ts",
"with": "ClientApp/environments/environment.prod.ts"
}],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"ngswConfigPath": "ClientApp/ngsw-config.json"
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "energyapp:build"
},
"configurations": {
"production": {
"browserTarget": "energyapp:build:production"
}
}
},
"build-worker": {
"builder": "@angular-devkit/build-webpack:webpack",
"options": {
"webpackConfig": "./webpack.config.worker.js"
}
},
"dev-worker": {
"builder": "@angular-devkit/build-webpack:webpack",
"options": {
"webpackConfig": "./ClientApp/webpack.config.dev-worker.js"
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "energyapp:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"codeCoverage": true,
"main": "ClientApp/test.ts",
"polyfills": "ClientApp/polyfills.ts",
"tsConfig": "ClientApp/tsconfig.spec.json",
"karmaConfig": "ClientApp/karma.conf.js",
"styles": [
"ClientApp/appResourceFiles/styles.scss"
],
"scripts": [""],
"assets": [
"ClientApp/favicon.ico",
"ClientApp/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"ClientApp/tsconfig.app.json",
"ClientApp/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"energyapp-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "energyapp:serve"
},
"configurations": {
"production": {
"devServerTarget": "energyapp:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "energyapp"
}
我的 package.json 是
"dependencies": {
"@angular-devkit/build-webpack": "^0.901.7",
"@angular/animations": "~9.1.2",
"@angular/cdk": "^9.0.0",
"@angular/common": "~9.1.2",
"@angular/core": "~9.1.2",
"@angular/flex-layout": "9.0.0-beta.31",
"@angular/forms": "~9.1.2",
"@angular/http": "^7.2.16",
"@angular/material": "^9.2.4",
"@angular/material-moment-adapter": "^9.2.4",
"@angular/platform-browser": "~9.1.2",
"@angular/platform-browser-dynamic": "~9.1.2",
"@angular/platform-server": "^9.1.9",
"@angular/router": "~9.1.2",
"@angular/service-worker": "^9.1.11",
"@capacitor/android": "2.2.0",
"@capacitor/core": "2.2.0",
"@datorama/akita": "^4.23.0",
"@datorama/akita-ng-forms-manager": "^3.1.0",
"@fortawesome/angular-fontawesome": "^0.6.1",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@ionic-native/core": "5.26.0",
"@ionic-native/file": "5.26.0",
"@ionic-native/splash-screen": "5.26.0",
"@ionic-native/status-bar": "5.26.0",
"@ionic/angular": "5.2.0",
"@material-extended/mde": "^3.0.0",
"@ng-select/ng-select": "^4.0.0",
"@nguniversal/express-engine": "9.1.1",
"@nguniversal/module-map-ngfactory-loader": "^8.2.6",
"@ngx-loading-bar/core": "^4.2.0",
"@types/mapbox-gl": "^1.10.2",
"ajv": "6.12.2",
"angular-resizable-element": "^3.3.2",
"angular-tree-component": "8.5.6",
"angular2-cookie": "^1.2.6",
"angular2-draggable": "^2.3.2",
"angular2-infinite-scroll": "^0.3.5",
"angular2-text-mask": "^9.0.0",
"applicationinsights-js": "^1.0.21",
"bpmn-js": "7.2.0",
"bpmn-js-properties-panel": "^0.33.2",
"brace": "0.11.1",
"bs-platform": "^7.3.2",
"capacitor-sqlite": "~2.1.0-7",
"cordova-plugin-file": "~6.0.2",
"countries-and-timezones": "^2.2.0",
"countrycitystatejson": "^0.2.15",
"d3": "^5.16.0",
"d3-tip": "^0.9.1",
"date-fns": "^2.14.0",
"echarts": "^4.8.0",
"electron-dl": "^3.0.0",
"electron-log": "^4.0.6",
"electron-updater": "4.1.2",
"electron-window-state": "5.0.3",
"electron-window-state-manager": "0.3.2",
"geojson": "^0.5.0",
"getusermedia": "^2.0.1",
"hammerjs": "2.0.8",
"idb": "^5.0.4",
"immer": "^7.0.0",
"ion-rangeslider": "^2.3.1",
"ionic-long-press": "2.0.3",
"jquery": "^3.4.1",
"json-logic-js": "^1.2.2",
"jsonpath": "^1.0.2",
"knex": "^0.21.1",
"localforage": "^1.7.3",
"mapbox-gl": "^1.10.1",
"material-design-icons": "^3.0.1",
"microsoft-cognitiveservices-speech-sdk": "^1.10.0",
"mobx-angular": "^4.1.0",
"moment": "^2.26.0",
"ng-drag-drop": "^5.0.0",
"ng-pick-datetime": "^7.0.0",
"ng2-pdf-viewer": "^6.3.0",
"ng2-popover": "0.0.14",
"ng2draggable": "1.3.2",
"ng4-click-outside": "^1.0.1",
"ngx-color-picker": "^9.1.0",
"ngx-file-drop": "^9.0.1",
"ngx-quill": "^11.0.0",
"ngx-scroll-event": "^1.0.8",
"ngx-take-until-destroy": "^5.4.0",
"ngx-web-worker": "^8.0.0",
"node-gyp": "^7.0.0",
"observable-webworker": "^3.2.4",
"quill": "^1.3.7",
"rebuild": "^0.1.2",
"rxjs": "~6.5.1",
"rxjs-compat": "^6.5.5",
"source-map-loader": "^1.0.0",
"sqlite3": "^4.2.0",
"timespan": "^2.3.0",
"ts-xlsx": "0.0.11",
"tslib": "2.0.0",
"videogular2": "^7.0.2",
"xlsx": "^0.16.1",
"zone.js": "~0.10.2",
"zoomdata-client": "^5.8.0-6.20200609030059.b826d893.release"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.901.8",
"@angular-devkit/schematics": "9.1.8",
"@angular/cli": "~9.1.1",
"@angular/compiler": "~9.1.2",
"@angular/compiler-cli": "~9.1.2",
"@angular/language-service": "~9.1.2",
"@capacitor/cli": "2.2.0",
"@compodoc/compodoc": "1.1.11",
"@ionic/angular-toolkit": "2.2.0",
"@ngtools/webpack": "^9.1.8",
"@types/jasmine": "3.5.10",
"@types/jasminewd2": "~2.0.3",
"@types/jsonpath": "^0.2.0",
"@types/mapbox-gl": "^0.51.4",
"@types/node": "^12.12.6",
"@types/selenium-webdriver": "^4.0.9",
"@types/sqlite3": "3.1.6",
"@types/three": "^0.103.2",
"@types/xlsx": "0.0.36",
"codelyzer": "5.2.2",
"electron": "^8.3.1",
"electron-builder": "21.2.0",
"electron-rebuild": "^1.11.0",
"electron-reload": "1.5.0",
"http-server": "^0.12.3",
"http-server-legacy": "^0.11.1",
"jasmine-core": "3.5.0",
"jasmine-spec-reporter": "5.0.2",
"karma": "5.0.9",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~3.3.1",
"karma-jasmine-html-reporter": "1.5.4",
"node-pre-gyp": "^0.15.0",
"node-sass": "^4.13.0",
"npm-run-all": "^4.1.3",
"npm-upgrade": "^2.0.3",
"npx": "10.2.2",
"protractor": "7.0.0",
"rimraf": "^3.0.2",
"sinon": "^9.0.2",
"ts-node": "~8.10.2",
"tslint": "~6.1.2",
"typescript": "~3.8.3",
"wait-on": "^5.0.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
}
任何人都可以知道问题是什么？
更新
在控制台中没有错误，但 npm audit 我们几乎没有漏洞。
更新 Package.json：
"dependencies": {
"@angular-devkit/build-webpack": "^0.901.7",
"@angular/animations": "~9.1.11",
"@angular/cdk": "^9.2.4",
"@angular/common": "~9.1.11",
"@angular/core": "~9.1.11",
"@angular/flex-layout": "9.0.0-beta.31",
"@angular/forms": "~9.1.11",
"@angular/http": "^7.2.16",
"@angular/material": "^9.2.4",
"@angular/material-moment-adapter": "^9.2.4",
"@angular/platform-browser": "~9.1.11",
"@angular/platform-browser-dynamic": "~9.1.11",
"@angular/platform-server": "^9.1.11",
"@angular/router": "~9.1.11",
"@angular/service-worker": "^9.1.11",
"@datorama/akita": "^4.23.0",
"@datorama/akita-ng-forms-manager": "^3.1.0",
"@fortawesome/angular-fontawesome": "^0.6.1",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@material-extended/mde": "^3.0.0",
"@ng-select/ng-select": "^4.0.0",
"@nguniversal/express-engine": "9.1.1",
"@nguniversal/module-map-ngfactory-loader": "^8.2.6",
"@ngx-loading-bar/core": "^4.2.0",
"ajv": "6.12.2",
"angular-resizable-element": "^3.3.2",
"angular-tree-component": "^8.5.6",
"angular2-cookie": "^1.2.6",
"angular2-draggable": "^2.3.2",
"angular2-infinite-scroll": "^0.3.5",
"angular2-text-mask": "^9.0.0",
"applicationinsights-js": "^1.0.21",
"bpmn-js": "7.2.0",
"bpmn-js-properties-panel": "^0.33.2",
"brace": "0.11.1",
"bs-platform": "^7.3.2",
"countries-and-timezones": "^2.2.0",
"countrycitystatejson": "^0.2.15",
"d3": "^5.16.0",
"d3-tip": "^0.9.1",
"date-fns": "^2.14.0",
"echarts": "^4.8.0",
"electron-dl": "^3.0.0",
"electron-log": "^4.0.6",
"electron-updater": "4.1.2",
"electron-window-state": "5.0.3",
"electron-window-state-manager": "0.3.2",
"geojson": "^0.5.0",
"getusermedia": "^2.0.1",
"hammerjs": "2.0.8",
"idb": "^5.0.4",
"immer": "^7.0.0",
"ion-rangeslider": "^2.3.1",
"jquery": "^3.4.1",
"json-logic-js": "^1.2.2",
"jsonpath": "^1.0.2",
"knex": "^0.21.1",
"localforage": "^1.7.3",
"mapbox-gl": "^1.10.1",
"material-design-icons": "^3.0.1",
"microsoft-cognitiveservices-speech-sdk": "^1.10.0",
"moment": "^2.26.0",
"ng-drag-drop": "^5.0.0",
"ng-pick-datetime": "^7.0.0",
"ng2-pdf-viewer": "^6.3.0",
"ng2-popover": "0.0.14",
"ng2draggable": "1.3.2",
"ng4-click-outside": "^1.0.1",
"ngx-color-picker": "^9.1.0",
"ngx-file-drop": "^9.0.1",
"ngx-quill": "^11.0.0",
"ngx-scroll-event": "^1.0.8",
"ngx-take-until-destroy": "^5.4.0",
"ngx-web-worker": "^8.0.0",
"node-gyp": "^7.0.0",
"observable-webworker": "^3.2.4",
"quill": "^1.3.7",
"rebuild": "^0.1.2",
"rxjs": "~6.5.4",
"rxjs-compat": "^6.5.5",
"source-map-loader": "^1.0.0",
"sqlite3": "^4.2.0",
"timespan": "^2.3.0",
"ts-xlsx": "0.0.11",
"tslib": "2.0.0",
"videogular2": "^7.0.2",
"xlsx": "^0.16.1",
"zone.js": "~0.10.2",
"zoomdata-client": "^5.8.0-6.20200609030059.b826d893.release"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.901.8",
"@angular-devkit/schematics": "9.1.8",
"@angular/cli": "~9.1.8",
"@angular/compiler": "~9.1.11",
"@angular/compiler-cli": "~9.1.11",
"@angular/language-service": "~9.1.11",
"@compodoc/compodoc": "1.1.11",
"@ngtools/webpack": "^9.1.8",
"@types/jasmine": "3.5.10",
"@types/jasminewd2": "~2.0.3",
"@types/jsonpath": "^0.2.0",
"@types/mapbox-gl": "^1.10.4",
"@types/node": "^12.11.1",
"@types/selenium-webdriver": "^4.0.9",
"@types/sqlite3": "3.1.6",
"@types/three": "^0.103.2",
"@types/xlsx": "0.0.36",
"codelyzer": "5.2.2",
"electron": "^8.3.1",
"electron-builder": "21.2.0",
"electron-rebuild": "^1.11.0",
"electron-reload": "1.5.0",
"http-server": "^0.12.3",
"jasmine-core": "3.5.0",
"jasmine-spec-reporter": "5.0.2",
"karma": "5.0.9",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~3.3.1",
"karma-jasmine-html-reporter": "1.5.4",
"node-pre-gyp": "^0.15.0",
"node-sass": "^4.13.0",
"npm-run-all": "^4.1.3",
"npm-upgrade": "^2.0.3",
"protractor": "7.0.0",
"rimraf": "^3.0.2",
"sinon": "^9.0.2",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3",
"wait-on": "^5.0.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
}
解决方案
推荐阅读
- javascript - React：如何修复“超出最大更新深度错误”
- javascript - 我如何了解我的 Web 应用程序是否具有良好的性能？
- python - 如何在matplotlib python中添加文本和值的图例混合？
- regex - Perl正则表达式匹配没有字符串集的表达式
- java - 如何从键中获取值
- c# - csc.exe 可以强制遵守特定的 .net 标准吗？
- git - 如何显示至少两个具有相同父提交的提交
- powershell - 使用 CSV 文件中多列数据的 Powershell 中的测试路径
- python - R2 值在 OLS 表中较高，但在 LinearRegression 中较低
- html - 想要在一个 div 内制作 3 个不同宽度的 div