以角13运行customWebpackConfig
以角13运行customWebpackConfig
提问于 2021-12-01 12:40:23
最近，我从Angular 11升级到Angular 11，提供了我需要的所有组件的最新免费包，在执行ng serve时，我很难让custom-webpack角构建器运行。
在我的场景中，我通过定制的web插件CSS来执行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
}
}现在请注意，为了迁移，至少在我的例子中为角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，在serve部分，我不得不删除customWebpackConfig内容，从而了解了发生了什么。然后一切都开始运作！
回答 1
Stack Overflow用户
发布于 2022-04-12 14:24:38
步骤1: npm安装--保存-dev@angular/定制-webpack@10.0.1步骤2:在代码编辑器中打开angular.json。在架构师/build对象的内部，将构建器从@角-devkit/ builder :browser更新为@angular/定制-webpack:browser，并添加customWebpackConfig键：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70184389
复制相关文章
相似问题
腾讯云开发者
