Angular-builders: Return errors when trying to build app-shell with custom webpack
Describe the Bug
When trying to run app-shell build inside an angular application, it returns the following errors:
"Schema validation failed with the following errors:
Data path ".optimization.styles" should be boolean.
Data path ".optimization" should be boolean.
Data path ".optimization" should match exactly one schema in oneOf."
This only happens in combination with
"@angular-devkit/build-angular": "0.1101.1",
Minimal Reproduction
Using the mentioned angular.json below with the included package.json and running
npm run "build app-shell"
returns the following error:
"Schema validation failed with the following errors:
Data path ".optimization.styles" should be boolean.
Data path ".optimization" should be boolean.
Data path ".optimization" should match exactly one schema in oneOf."
Expected Behavior
The build should complete like it does in combination with a previous build of angular-devkit/build-angular
Environment
package.json
"dependencies": {
"@angular/animations": "11.1.0",
"@angular/cdk": "11.1.0",
"@angular/common": "11.1.0",
"@angular/compiler": "11.1.0",
"@angular/core": "11.1.0",
"@angular/forms": "11.1.0",
"@angular/material": "11.1.0",
"@angular/platform-browser": "11.1.0",
"@angular/platform-browser-dynamic": "11.1.0",
"@angular/platform-server": "11.1.0",
"@angular/router": "11.1.0",
"@angular/service-worker": "11.1.0",
"moment": "2.29.1",
"rxjs": "6.6.3",
"tslib": "2.1.0",
"zone.js": "0.11.3"
},
"devDependencies": {
"@angular-builders/custom-webpack": "11.0.0",
"@angular-devkit/build-angular": "0.1101.1",
"@angular-eslint/builder": "1.1.0",
"@angular-eslint/eslint-plugin": "1.1.0",
"@angular-eslint/eslint-plugin-template": "1.1.0",
"@angular-eslint/schematics": "1.1.0",
"@angular-eslint/template-parser": "1.1.0",
"@angular/cli": "11.1.1",
"@angular/compiler-cli": "11.1.0",
"@types/jasmine": "3.6.3",
"@types/node": "14.14.22",
"@typescript-eslint/eslint-plugin": "4.14.1",
"@typescript-eslint/parser": "4.14.1",
"@tailwindcss/aspect-ratio": "0.2.0",
"@tailwindcss/forms": "0.2.1",
"@tailwindcss/line-clamp": "0.2.0",
"@tailwindcss/typography": "0.4.0",
"codelyzer": "6.0.1",
"eslint": "7.18.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "31.3.3",
"eslint-plugin-prefer-arrow": "1.2.3",
"http-server": "0.12.3",
"jasmine-core": "3.6.0",
"jasmine-spec-reporter": "6.0.0",
"karma": "6.0.2",
"karma-chrome-launcher": "3.1.0",
"karma-coverage": "2.0.3",
"karma-jasmine": "4.0.1",
"karma-jasmine-html-reporter": "1.5.4",
"postcss-import": "14.0.0",
"postcss-loader": "4.2.0",
"postcss-scss": "3.0.4",
"protractor": "7.0.0",
"tailwindcss": "2.0.2",
"ts-node": "9.1.1",
"typescript": "4.1.3"
}
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"MijnHvaStudent": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "webpack.config.js"
},
"outputPath": "dist/MijnHvaStudent/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.webmanifest"
],
"styles": [
"src/assets/theme/custom-theme.scss",
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
}
}
},
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
"options": {
"browserTarget": "MijnHvaStudent:build"
},
"configurations": {
"production": {
"browserTarget": "MijnHvaStudent:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-builders/custom-webpack:extract-i18n",
"options": {
"browserTarget": "MijnHvaStudent:build"
}
},
"test": {
"builder": "@angular-builders/custom-webpack:karma",
"options": {
"customWebpackConfig": {
"path": "webpack.config.js"
},
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.webmanifest"
],
"styles": [
"src/styles.scss"
],
"codeCoverage": true,
"scripts": []
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
}
},
"e2e": {
"builder": "@angular-builders/custom-webpack:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "MijnHvaStudent:serve"
},
"configurations": {
"production": {
"devServerTarget": "MijnHvaStudent:serve:production"
}
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/MijnHvaStudent/server",
"main": "src/main.server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": true
}
}
},
"app-shell": {
"builder": "@angular-devkit/build-angular:app-shell",
"options": {
"browserTarget": "MijnHvaStudent:build",
"serverTarget": "MijnHvaStudent:server",
"route": "shell"
},
"configurations": {
"production": {
"browserTarget": "MijnHvaStudent:build:production",
"serverTarget": "MijnHvaStudent:server:production"
}
}
}
}
}
},
"defaultProject": "MijnHvaStudent",
"cli": {
"analytics": "b6e2fd77-8580-43ff-952f-0092ab51f96a"
}
}
custom webpack
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: 'postcss-loader',
options: {
postcssOptions: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: ['postcss-import', 'tailwindcss', 'autoprefixer'],
},
},
},
],
},
}
Additional Context
We wanted to have tailwind in our angular app. Hence the required webpack config.
JordyRoelofs
All 14 comments
Looks like a version mismatch. Try to remove package lock and install from scratch.
BTW, FYI tailwindcss will be supported natively by Angular CLI starting from 11.2.
just-jeb
on 7 Feb 2021
Thanks! We are going to wait on the new release. Thanks again man!
JordyRoelofs
on 8 Feb 2021
@just-jeb I got same error with clean install.
@angular-builders/custom-webpack: 11.0.0
And I don't use tailwindcss, just want to allow inlineCritical option.
"optimization": {
"scripts": true,
"fonts": {
"inline": true
},
"styles": {
"minify": true,
"inlineCritical": true
}
}
luboslav
on 8 Feb 2021
@just-jeb I accidentally closed the issue. It seems i still get the same error. My bad.
JordyRoelofs
on 8 Feb 2021
@JordyRoelofs @luboslav please attach your package-locks.
just-jeb
on 9 Feb 2021
I have my package-lock.json disabled, but here is a package.json file from node_modules/@angular-builders/custom-webpack
{
"_from": "@angular-builders/[email protected]",
"_id": "@angular-builders/[email protected]",
"_inBundle": false,
"_integrity": "sha512-9TDGeQZQuTQzNS4uYEtD+k1fV7xG348P8Isaoz+m6EByv1qgAGBoclVJZj+VAjtp6l8SkVG8WPOUgZeJwPgQ+g==",
"_location": "/@angular-builders/custom-webpack",
"_phantomChildren": {
"arg": "4.1.3",
"create-require": "1.1.1",
"diff": "4.0.2",
"make-error": "1.3.6",
"source-map-support": "0.5.19",
"yn": "3.1.1"
},
"_requested": {
"type": "version",
"registry": true,
"raw": "@angular-builders/[email protected]",
"name": "@angular-builders/custom-webpack",
"escapedName": "@angular-builders%2fcustom-webpack",
"scope": "@angular-builders",
"rawSpec": "11.0.0",
"saveSpec": null,
"fetchSpec": "11.0.0"
},
"_requiredBy": [
"#DEV:/"
],
"_resolved": "https://registry.npmjs.org/@angular-builders/custom-webpack/-/custom-webpack-11.0.0.tgz",
"_shasum": "28ce27d2f06d0f94a208aeaeec836397c1ce521c",
"_spec": "@angular-builders/[email protected]",
"_where": "/opt/workspace/pemane-mobile-app",
"author": {
"name": "JeB Barabanov"
},
"bugs": {
"url": "https://github.com/just-jeb/angular-builders/issues"
},
"builders": "builders.json",
"bundleDependencies": false,
"dependencies": {
"@angular-devkit/architect": ">=0.1100.0 < 0.1200.0",
"@angular-devkit/build-angular": ">=0.1100.0 < 0.1200.0",
"@angular-devkit/core": "^11.0.0",
"lodash": "^4.17.15",
"ts-node": "^9.0.0",
"webpack-merge": "^5.7.3"
},
"deprecated": false,
"description": "Custom webpack builders for Angular build facade. Allow to modify Angular build configuration without ejecting it",
"engines": {
"node": ">=10.13.0"
},
"files": [
"dist",
"builders.json"
],
"gitHead": "96a03075b9ea2820d931984f2ea5e57ed28bacf2",
"homepage": "https://github.com/just-jeb/angular-builders#readme",
"keywords": [
"cli",
"angular",
"builder",
"angular6",
"angular-cli",
"webpack",
"custom"
],
"license": "MIT",
"main": "dist/index.js",
"name": "@angular-builders/custom-webpack",
"repository": {
"type": "git",
"url": "git+https://github.com/just-jeb/angular-builders.git",
"directory": "packages/custom-webpack"
},
"scripts": {
"build": "../../node_modules/.bin/tsc && ../../node_modules/.bin/ts-node ../../merge-schemes.ts",
"ci": "./scripts/ci.sh",
"clean": "../../node_modules/.bin/rimraf dist",
"e2e": "../../node_modules/.bin/jest --config ../../jest-e2e.config.js",
"postbuild": "yarn test && yarn run e2e",
"prebuild": "yarn clean",
"test": "../../node_modules/.bin/jest --config ../../jest-ut.config.js"
},
"version": "11.0.0"
}
luboslav
on 10 Feb 2021
@luboslav I have exactly the same problem as you. If it helps, attached you can find my package-lock.json file
package-lock.json.txt
jcrespoven
on 10 Feb 2021
Hi @just-jeb,
I have created simple reproduction repository
Steps to reproduce error:
npm install
ng build --prod
Project is generated via angular-cli.
I have added only optimization configuration described here https://github.com/just-jeb/angular-builders/issues/924#issuecomment-775170556 and @angular-builders/custom-webpack:browser based on example from your readme.
luboslav
on 11 Feb 2021
OK, I think I know what the problem is. Angular changed the schema in their builders, and custom-webpack didn't release a new version that contains those changes.
The schema of custom-webpack is generated during the build and it's generated from the base schema that comes from @angular-devkit/build-angular and an extension.
So essentially every time the base schema is updated the derived schema should be regenerated.
For the time being I'm trying to give you a quick fix in #935 by adding some comment in schemes generation file, so that if I update this comment a new build will be triggered and a new beta version will be released.
However, this is not a proper solution, I need to come up with something more robust.
One of the plans is to get package locks back, which will resolve this problem in some way (a new build will be triggered upon every @angular-devkit update), but it still will require from you to install a new version every time.
I think that the most proper fix would include generation of schema at the postinstall hook, instead of build time, but it requires proper implementation and testing, so won't happen very soon.
As always if you have any ideas, or willing to contribute - you're welcome!
just-jeb
on 14 Feb 2021
A quick fix has been provided in v11.1.0-beta.1, would you mind trying it out? This version is aligned with the schema of v11.2.0 (0.1102.0)
just-jeb
on 14 Feb 2021
I can confirm that the quick fix is working as expected.
luboslav
on 15 Feb 2021
Closing in favor of #936
just-jeb
on 16 Feb 2021
I had the same issue, tried updating to 11.1.0-beta.1 and 11.1.0-beta.2 but I'm getting an error at build time:
An unhandled exception occurred: Unexpected token '.'. Any idea on how that could be related ?
mmeylan
on 19 Feb 2021
After further investigation, it seems one of my custom webpack plugin (written in typescript, just like my webpack config) is causing the An unhandled exception occurred: Unexpected token '.'.
It does not happen with @angular-builders/[email protected] but does with 11.1.0-beta.1 and 11.1.0-beta.2. Was there any change in the typescript config, or ts-node version in these betas ?
mmeylan
on 21 Feb 2021
Related issues
pkaufi
路
9Comments
itslenny
路
7Comments
enten
路
10Comments
abierbaum
路
4Comments
jankeesvanandel
路
5Comments
Most helpful comment
Hi @just-jeb,
I have created simple reproduction repository
Steps to reproduce error:
Project is generated via
angular-cli.I have added only optimization configuration described here https://github.com/just-jeb/angular-builders/issues/924#issuecomment-775170556 and
@angular-builders/custom-webpack:browserbased on example from your readme.