我最近使用我需要的所有组件的最新最完整包进行了更新，Angular 13并且Angular 11我正在努力让custom-webpackangular builder 在我执行时运行ng serve。
在我的场景中，我通过自定义 web 包插件 CSS Purge 执行 CSS 优化，因此让它工作对我来说至关重要，我确信这是可能的。但是，如果我ng build --configuration production这样做，它就像一种魅力，angular.json根本不会呻吟。
我执行时遇到的主要问题ng serve是我收到以下错误：
Schema validation failed with the following errors:
Data path "" must NOT have additional properties(customWebpackConfig).
当前angular.json文件具有以下设置：
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"newwebsite-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/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"buildOptimizer": false,
"assets": [
"src/favicon.ico",
"src/assets",
"src/robots.txt",
"src/sitemap.xml"
],
"styles": [
"src/styles.scss"
],
"scripts": [],
"customWebpackConfig": {
"path": "./webpack.config.js"
}
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": false
},
"fonts": true
},
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
"options": {
"customWebpackConfig": {
"path": "./webpack.config.js"
},
"browserTarget": "newwebsite-app:build",
"port": 10150
},
"configurations": {
"production": {
"browserTarget": "newwebsite-app:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "newwebsite-app: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": [
"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": "newwebsite-app:serve"
},
"configurations": {
"production": {
"devServerTarget": "newwebsite-app:serve:production"
}
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": {
"scripts": false,
"styles": true
}
}
}
},
"serve-ssr": {
"builder": "@nguniversal/builders:ssr-dev-server",
"options": {
"browserTarget": "newwebsite-app:build",
"serverTarget": "newwebsite-app:server"
},
"configurations": {
"production": {
"browserTarget": "newwebsite-app:build:production",
"serverTarget": "newwebsite-app:server:production"
}
}
},
"prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"browserTarget": "newwebsite-app:build:production",
"serverTarget": "newwebsite-app:server:production",
"routes": [
"/"
]
},
"configurations": {
"production": {}
}
}
}
}
},
"defaultProject": "newwebsite-app",
"cli": {
"analytics": false
}
}
现在请注意，为了迁移，至少在我的情况下迁移到 Angular 13.0.2，我必须删除“ extractCss: true”位，因为我遇到了与此相关的错误（而不是我添加了 inlineCriticalCss 选项），我确实buildOptimizer: false将浏览器部分，否则它不能仅使用aot: false，公平地说，但是当我执行服务时，我无法让 webpack 运行。
我拥有的package.json依赖项：
"dependencies": {
"@angular/animations": "13.0.2",
"@angular/common": "13.0.2",
"@angular/compiler": "13.0.2",
"@angular/core": "13.0.2",
"@angular/forms": "13.0.2",
"@angular/platform-browser": "13.0.2",
"@angular/platform-browser-dynamic": "13.0.2",
"@angular/platform-server": "13.0.2",
"@angular/router": "13.0.2",
"@fortawesome/angular-fontawesome": "0.10.1",
"@fortawesome/fontawesome-svg-core": "1.2.36",
"@fortawesome/free-brands-svg-icons": "5.15.4",
"@fortawesome/free-solid-svg-icons": "5.15.4",
"@nguniversal/common": "13.0.1",
"@nguniversal/express-engine": "13.0.1",
"bootstrap": "5.1.3",
"express": "4.17.1",
"ng-recaptcha": "9.0.0",
"ngx-cookie": "5.0.2",
"rxjs": "7.4.0",
"tslib": "2.3.0",
"zone.js": "0.11.4"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^13.0.0",
"@angular-devkit/build-angular": "^13.0.3",
"@angular-eslint/builder": "13.0.1",
"@angular-eslint/eslint-plugin": "13.0.1",
"@angular-eslint/eslint-plugin-template": "13.0.1",
"@angular-eslint/schematics": "13.0.1",
"@angular-eslint/template-parser": "13.0.1",
"@angular/cli": "13.0.3",
"@angular/compiler-cli": "13.0.2",
"@angular/language-service": "13.0.2",
"@nguniversal/builders": "13.0.1",
"@types/express": "4.17.3",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "2.0.6",
"@types/node": "13.9.1",
"@typescript-eslint/eslint-plugin": "5.3.0",
"@typescript-eslint/parser": "5.3.0",
"codelyzer": "6.0.0",
"eslint": "^8.2.0",
"jasmine-core": "3.8.0",
"jasmine-spec-reporter": "5.0.0",
"karma": "6.3.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",
"postcss-scss": "4.0.2",
"protractor": "~7.0.0",
"purgecss-webpack-plugin": "4.1.3",
"ts-loader": "9.2.6",
"ts-node": "10.1.0",
"tslint": "6.1.3",
"typescript": "4.4.3"
}
请注意，在迁移之前，我一切正常。当我更新custom-webpack似乎必须运行最新软件包的库时，这似乎正在发生。如果我在这里查看它的文档：https ://www.npmjs.com/package/@angular-builders/custom-webpack#Custom-webpack-browser
对我来说语法看起来不错，因此我不知道如何解决这个问题 - 除了在项目网页上提出它。
非常感谢任何帮助，谢谢！
更新！
通过将我的 angular.json 与此处的线程进行比较，实际上发现了发生了什么：https ://stackoverflow.com/a/61768757/5293466在服务部分中，我必须删除 customWebpackConfig 的东西。然后一切都开始工作了！！！