如何解决将 Angular 11 应用程序升级到 Angular 12 时遇到的问题
当我们尝试将 Angular 11 应用程序（单一 SPA 微前端）更新到 Angular 12 时，我们面临以下问题。
尝试运行此应用程序时控制台出错：
An unhandled exception occurred: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.output 有一个未知的属性“chunkLoadingGlobal”。这些属性有效：
对象{辅助评论？，chunkCallbackName？，chunkFilename？，chunkLoadTimeout？，crossOriginLoading？，devtoolFallbackModuleFilenameTemplate？，devtoolLineToLine？，devtoolModuleFilenameTemplate？，devtoolNamespace？，文件名？，futureEmitAssetss？，globalObject？，hashDigest？，hashDigestLength？ hotUpdateChunkFilename?,hotUpdateFunction?,hotUpdateMainFilename?,jsonpFunction?,jsonpScriptType?,library?,libraryExport?,libraryTarget?,path?,pathinfo?,publicPath?,sourceMapFilename?,sourcePrefix?,strictModuleExceptionHandling?,umdNamedDefine?,webassemblyModuleFilename }-> 影响编译输出的选项。
output选项告诉 webpack 如何将编译后的文件写入磁盘。 有关详细信息，请参阅“C:\Users\newUser\AppData\Local\Temp\ng-UOeNLu\angular-errors.log”。
Package.json：
"name": "my-app","version": "0.0.0","scripts": {
"ng": "ng","start": "npm run serve","devstart": "ng serve --aot=false","build": "npm run build","test": "ng test"
},"private": true,"dependencies": {
"@angular/animations": "~12.0.5","@angular/cdk": "^12.0.5","@angular/common": "~12.0.5","@angular/compiler": "~12.0.5","@angular/core": "~12.0.5","@angular/forms": "~12.0.5","@angular/material": "^12.0.5","@angular/platform-browser": "~12.0.5","@angular/platform-browser-dynamic": "~12.0.5","@angular/router": "~12.0.5","@material-extended/mde": "^3.0.3","bootstrap-4-grid": "^3.4.0","highcharts": "^8.1.2","html2canvas": "^1.0.0-rc.7","htmldiff-js": "^1.0.5","http-server": "^0.12.3","jquery": "^3.5.1","jspdf": "^2.1.1","mat-table-exporter": "^9.0.0","ngx-mat-select-search": "^2.1.2","ng2-file-upload": "^1.4.0","ngx-matomo": "^0.1.4","ngx-summernote": "^0.8.0","ngx-order-pipe": "^2.0.4","rxjs": "~6.5.4","single-spa": ">=4.0.0","single-spa-angular": "5.0.1","tslib": "^2.0.0","summernote": "^0.8.18","zone.js": "~0.11.4"
},"devDependencies": {
"@angular-builders/custom-webpack": "9.2.1-beta.0","@angular-devkit/build-angular": "~0.1102.13","@angular/cli": "~12.0.5","@angular/compiler-cli": "~12.0.5","@angular/language-service": "~12.0.5","@types/node": "^12.11.1","@types/jasmine": "~3.6.0","@types/jasminewd2": "~2.0.3","codelyzer": "^6.0.0","jasmine-core": "~3.6.0","jasmine-spec-reporter": "~5.0.0","karma": "~5.0.0","karma-chrome-launcher": "~3.1.0","karma-coverage-istanbul-reporter": "~3.0.2","karma-jasmine": "~4.0.0","karma-jasmine-html-reporter": "^1.5.0","protractor": "~7.0.0","ts-node": "~8.3.0","tslint": "~6.1.0","typescript": "~4.2.4"
}
}
Angular.json：
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {
"my-app": {
"projectType": "application","schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},"root": "","sourceRoot": "src","prefix": "app","architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser","options": {
"outputPath": "dist/my-app","index": "src/index.html","main": "src/main.single-spa.ts","polyfills": "src/polyfills.ts","tsConfig": "tsconfig.app.json","aot": true,"assets": [
"src/favicon.ico","src/assets"
],"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css","./node_modules/bootstrap-4-grid/scss/grid.scss","src/styles.scss","node_modules/summernote/dist/summernote-lite.min.css"
],"scripts": [
"node_modules/jquery/dist/jquery.min.js","node_modules/summernote/dist/summernote-lite.min.js"
],"customWebpackConfig": {
"path": "extra-webpack.config.js","libraryName": "my-app","libraryTarget": "umd"
}
},"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
}
],"optimization": true,"outputHashing": "none","sourceMap": false,"extractCss": true,"namedChunks": false,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true,"budgets": [
{
"type": "initial","maximumWarning": "2mb","maximumError": "5mb"
},{
"type": "anyComponentStyle","maximumWarning": "6kb","maximumError": "20kb"
}
]
}
}
},"serve": {
"builder": "@angular-builders/custom-webpack:dev-server","options": {
"browserTarget": "my-app:build"
},"configurations": {
"production": {
"browserTarget": "my-app:build:production"
}
}
},"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n","options": {
"browserTarget": "my-app:build"
}
},"test": {
"builder": "@angular-devkit/build-angular:karma","options": {
"main": "src/test.ts","tsConfig": "tsconfig.spec.json","karmaConfig": "karma.conf.js","src/styles.scss"
],"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": "my-app:serve"
},"configurations": {
"production": {
"devServerTarget": "my-app:serve:production"
}
}
}
}
}
},"defaultProject": "my-app","cli": {
"analytics": false
}
}```
解决方法
一些建议：
- 如果您想使用 angular-cli 顺利迁移，请摆脱自定义 webpack。
- 不要使用任何库的 beta 版本，除非您正在试验或测试相关内容。自定义 webpack 构建器的版本是测试版（检查 package.json）。
- 如果您确实需要自定义 webpack 构建器，请访问官方网站并更新您的配置。每次更新 angular 时都要更新您的自定义 webpack 依赖项。
- 不要手动升级 angular，而是按照 https://update.angular.io/ 中的说明进行操作。
@angular-devkit/build-angular的版本似乎不正确。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。