Angular-cli: ProgressPlugin breaks with webpack 4.25.* due to incorrect option colors

Created on 5 Nov 2018 · 39Comments · Source: angular/angular-cli

Bug Report or Feature Request (mark with an `x`)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an `x`)

- [ ] new
- [*] build
- [*] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Repro steps

npm install
npm run build / serve

The log given by the failure

Progress Plugin Invalid Options

options['colors'] is an invalid additional property
options should pass "instanceof" keyword validation
options should match exactly one schema in oneOf

ValidationError: Progress Plugin Invalid Options

options['colors'] is an invalid additional property
options should pass "instanceof" keyword validation
options should match exactly one schema in oneOf

Desired functionality

In common.ts#L147 the ProgressPlugin is called with parameter colors. This does not meet the schema which is validated ProgressPlugin.js#L90

Mention any other details that might be useful

devkibuild-angular critical regression bufix

Source

mdasberg

👍26

Most helpful comment

Can be fixed temporarily by adding this line to package.json

"devDependencies":{
...
"webpack": "4.24.0"
}

then
npm install

carlgik4 on 5 Nov 2018

👍40 🎉19 ❤14

All 39 comments

Having the same issue when a making fresh project.
Edit: On a Windows 10 laptop

Repro steps

ng new [project-name]
npm install && ng serve --open --prod

Expected result

Should open new window with fresh project opened

Result

λ ng serve -o
Progress Plugin Invalid Options

options['colors'] is an invalid additional property
options should pass "instanceof" keyword validation
options should match exactly one schema in oneOf

ValidationError: Progress Plugin Invalid Options

options['colors'] is an invalid additional property
options should pass "instanceof" keyword validation
options should match exactly one schema in oneOf

    at validateOptions (..\project-name\node_modules\schema-utils\src\validateOptions.js:31:11)
    at new ProgressPlugin (..\project-name\node_modules\webpack\lib\ProgressPlugin.js:90:3)
    at Object.getCommonConfig (..\project-name\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\common.js:123:27)
    at BrowserBuilder.buildWebpackConfig (..\project-name\node_modules\@angular-devkit\build-angular\src\browser\index.js:74:31)
    at DevServerBuilder.buildWebpackConfig (..\project-name\node_modules\@angular-devkit\build-angular\src\dev-server\index.js:111:46)
    at MergeMapSubscriber.check_port_1.checkPort.pipe.operators_1.concatMap [as project] (..\project-name\node_modules\@angular-devkit\build-angular\src\dev-server\index.js:38:40)
    at MergeMapSubscriber._tryNext (..\project-name\node_modules\rxjs\internal\operators\mergeMap.js:65:27)
    at MergeMapSubscriber._next (..\project-name\node_modules\rxjs\internal\operators\mergeMap.js:55:18)
    at MergeMapSubscriber.Subscriber.next (..\project-name\node_modules\rxjs\internal\Subscriber.js:64:18)
    at TapSubscriber._next (..\project-name\node_modules\rxjs\internal\operators\tap.js:62:26)
    at TapSubscriber.Subscriber.next (..\project-name\node_modules\rxjs\internal\Subscriber.js:64:18)
    at MergeMapSubscriber.notifyNext (..\project-name\node_modules\rxjs\internal\operators\mergeMap.js:84:26)
    at InnerSubscriber._next (..\project-name\node_modules\rxjs\internal\InnerSubscriber.js:25:21)
    at InnerSubscriber.Subscriber.next (..\project-name\node_modules\rxjs\internal\Subscriber.js:64:18)
    at ForkJoinSubscriber.notifyComplete (..\project-name\node_modules\rxjs\internal\observable\forkJoin.js:79:25)
    at InnerSubscriber._complete (..\project-name\node_modules\rxjs\internal\InnerSubscriber.js:32:21)

Version

λ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.2.5
Node: 10.13.0
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.8.5
@angular-devkit/core         0.8.5
@angular-devkit/schematics   0.8.5
@schematics/angular          0.8.5
@schematics/update           0.8.5
rxjs                         6.2.2
typescript                   2.9.2

λ npm -v
6.4.1

ghost on 5 Nov 2018

👍1

Having same issue while fresh npm install.

Progress Plugin Invalid Options

options['colors'] is an invalid additional property
options should pass "instanceof" keyword validation
options should match exactly one schema in oneOf

ValidationError: Progress Plugin Invalid Options

options['colors'] is an invalid additional property
options should pass "instanceof" keyword validation
options should match exactly one schema in oneOf

at validateOptions (/media/shabbir/Projects/SVN/production/hub/trunk/node_modules/schema-utils/src/validateOptions.js:31:11)
at new ProgressPlugin (/media/shabbir/Projects/SVN/production/hub/trunk/node_modules/webpack/lib/ProgressPlugin.js:90:3)
at Object.getCommonConfig (/media/shabbir/Projects/SVN/production/hub/trunk/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js:123:27)
at BrowserBuilder.buildWebpackConfig (/media/shabbir/Projects/SVN/production/hub/trunk/node_modules/@angular-devkit/build-angular/src/browser/index.js:74:31)
at MergeMapSubscriber.rxjs_1.of.pipe.operators_1.concatMap [as project] (/media/shabbir/Projects/SVN/production/hub/trunk/node_modules/@angular-devkit/build-angular/src/browser/index.js:31:38)
at MergeMapSubscriber._tryNext (/media/shabbir/Projects/SVN/production/hub/trunk/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/operators/mergeMap.js:65:27)
at MergeMapSubscriber._next (/media/shabbir/Projects/SVN/production/hub/trunk/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/operators/mergeMap.js:55:18)
at MergeMapSubscriber.Subscriber.next (/media/shabbir/Projects/SVN/production/hub/trunk/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/Subscriber.js:64:18)
at TapSubscriber._next (/media/shabbir/Projects/SVN/production/hub/trunk/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/operators/tap.js:62:26)
at TapSubscriber.Subscriber.next (/media/shabbir/Projects/SVN/production/hub/trunk/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/Subscriber.js:64:18)
at MergeMapSubscriber.notifyNext (/media/shabbir/Projects/SVN/production/hub/trunk/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/operators/mergeMap.js:84:26)
at InnerSubscriber._next (/media/shabbir/Projects/SVN/production/hub/trunk/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/InnerSubscriber.js:25:21)
at InnerSubscriber.Subscriber.next (/media/shabbir/Projects/SVN/production/hub/trunk/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/Subscriber.js:64:18)
at ForkJoinSubscriber.notifyComplete (/media/shabbir/Projects/SVN/production/hub/trunk/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/observable/forkJoin.js:79:25)
at InnerSubscriber._complete (/media/shabbir/Projects/SVN/production/hub/trunk/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/InnerSubscriber.js:32:21)
at InnerSubscriber.Subscriber.complete (/media/shabbir/Projects/SVN/production/hub/trunk/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/Subscriber.js:76:18)

shabbir-dhangot on 5 Nov 2018

👍2

Having same with when creating a fresh project by command ng new project _name
Progress Plugin Invalid Options

options['colors'] is an invalid additional property
options should pass "instanceof" keyword validation
options should match exactly one schema in oneOf

ValidationError: Progress Plugin Invalid Options

options['colors'] is an invalid additional property
options should pass "instanceof" keyword validation
options should match exactly one schema in oneOf

at validateOptions

Lak89 on 5 Nov 2018

i have the same problem. after create a new project using angular console.

`Progress Plugin Invalid Options

options['colors'] is an invalid additional property
options should pass "instanceof" keyword validation
options should match exactly one schema in oneOf

ValidationError: Progress Plugin Invalid Options

options['colors'] is an invalid additional property
options should pass "instanceof" keyword validation
options should match exactly one schema in oneOf

at validateOptions (C:\dev\NGFullCalendar\node_modules\schema-utils\src\validateOptions.js:31:11)
at new ProgressPlugin (C:\dev\NGFullCalendar\node_modules\webpack\lib\ProgressPlugin.js:90:3)
at Object.getCommonConfig (C:\dev\NGFullCalendar\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\common.js:123:27)
at BrowserBuilder.buildWebpackConfig (C:\dev\NGFullCalendar\node_modules\@angular-devkit\build-angular\src\browser\index.js:74:31)
at DevServerBuilder.buildWebpackConfig (C:\dev\NGFullCalendar\node_modules\@angular-devkit\build-angular\src\dev-server\index.js:111:46)
at MergeMapSubscriber.check_port_1.checkPort.pipe.operators_1.concatMap [as project] (C:\dev\NGFullCalendar\node_modules\@angular-devkit\build-angular\src\dev-server\index.js:38:40)
at MergeMapSubscriber._tryNext (C:\dev\NGFullCalendar\node_modules\rxjs\internal\operators\mergeMap.js:65:27)
at MergeMapSubscriber._next (C:\dev\NGFullCalendar\node_modules\rxjs\internal\operators\mergeMap.js:55:18)
at MergeMapSubscriber.Subscriber.next (C:\dev\NGFullCalendar\node_modules\rxjs\internal\Subscriber.js:64:18)
at TapSubscriber._next (C:\dev\NGFullCalendar\node_modules\rxjs\internal\operators\tap.js:62:26)
at TapSubscriber.Subscriber.next (C:\dev\NGFullCalendar\node_modules\rxjs\internal\Subscriber.js:64:18)
at MergeMapSubscriber.notifyNext (C:\dev\NGFullCalendar\node_modules\rxjs\internal\operators\mergeMap.js:84:26)
at InnerSubscriber._next (C:\dev\NGFullCalendar\node_modules\rxjs\internal\InnerSubscriber.js:25:21)
at InnerSubscriber.Subscriber.next (C:\dev\NGFullCalendar\node_modules\rxjs\internal\Subscriber.js:64:18)
at ForkJoinSubscriber.notifyComplete (C:\dev\NGFullCalendar\node_modules\rxjs\internal\observable\forkJoin.js:79:25)
at InnerSubscriber._complete (C:\dev\NGFullCalendar\node_modules\rxjs\internal\InnerSubscriber.js:32:21)`

rayoreher on 5 Nov 2018

I have the same issue but only in Ubuntu 16.04. On Windows 10 it works just fine.
Using Node 8.x

gstylianou on 5 Nov 2018

👍1

This problem does not happen when I do npm install on Windows 10. But on my MacBook the problem really does occur, just as reported above.

I am having to use Windows for now to be able to run my projects in Angular 6. I do not know how to solve this problem and I do not know why it is occurring only on Mac but in Windows not ...

wilsonferro on 5 Nov 2018

I have the same issue but only in Ubuntu 16.04. On Windows 10 it works just fine.
Using Node 8.x

This problem does not happen when I do npm install on Windows 10. But on my MacBook the problem really does occur, just as reported above.

I am having to use Windows for now to be able to run my projects in Angular 6. I do not know how to solve this problem and I do not know why it is occurring only on Mac but in Windows not ...

Windows 10 user here. Using Node 10 LTS

ghost on 5 Nov 2018

make ng update

genyklemberg on 5 Nov 2018

👎3 👍3

I had the same issue on Ubuntu 18.10, Node 10.8.0, NPM 6.2.0 and Angular CLI 6.2.6.

Fixed it with removing colors option on this file:
/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js
on Line: 123

Changed this:
extraPlugins.push(new ProgressPlugin({ profile: buildOptions.verbose, colors: true }));
to:
extraPlugins.push(new ProgressPlugin({ profile: buildOptions.verbose }));

Hope this help. Cheers.

ayush-bhandari on 5 Nov 2018

👍17 ❤7 🎉7 😄2 👀1

Can be fixed temporarily by adding this line to package.json

"devDependencies":{
...
"webpack": "4.24.0"
}

then
npm install

carlgik4 on 5 Nov 2018

👍40 🎉19 ❤14

Can be fixed temporarily by adding this line to package.json
"devDependencies":{
...
"webpack": "4.24.0"
}

This worked for me.

gstylianou on 5 Nov 2018

I had the same issue on Ubuntu 18.10, Node 10.8.0, NPM 6.2.0 and Angular CLI 6.2.6.

Fixed it with removing colors option on this file:
/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js
on Line: 123

Changed this:
extraPlugins.push(new ProgressPlugin({ profile: buildOptions.verbose, colors: true }));
to:
extraPlugins.push(new ProgressPlugin({ profile: buildOptions.verbose }));

Hope this help. Cheers.

Its works! Thanks!

malkovitc on 5 Nov 2018

❤1 👍1

Can be fixed temporarily by adding this line to package.json
"devDependencies":{
...
"webpack": "4.24.0"
}
then
npm install

This worked for me as well! Thank you!

ameeyakumardas007 on 5 Nov 2018

Can be fixed temporarily by adding this line to package.json
"devDependencies":{
...
"webpack": "4.24.0"
}
then
npm install

Show! This worked for me as well!

Notes: delete "nodes_module" before npm install

wilsonferro on 5 Nov 2018

Can be fixed temporarily by adding this line to package.json
"devDependencies":{
...
"webpack": "4.24.0"
}
then
npm install

Worked for me! Thanks.
Deleted node_modules, then ran npm cache clean --force && npm install && npm install --open --prod

ghost on 5 Nov 2018

👍6

Can be fixed temporarily by adding this line to package.json
"devDependencies":{
...
"webpack": "4.24.0"
}
then
npm install

This worked for me. Thanks

chukjustin2000 on 5 Nov 2018

Looks like the validation logic along with that validateOptions call in ProgressPlugin, was just added to [email protected] here:
https://github.com/webpack/webpack/commit/aa8cb0fab74160caca59e1cfdd0758c0346313b0#diff-5d04086b4365820a456acec22b899956R86

rdhelms on 5 Nov 2018

ng update --all did the work!

hasanfalizada on 5 Nov 2018

👍10 🎉1

"webpack": "4.24.0"

Worked for me! thanks!!

ThiagoMarques on 5 Nov 2018

Can be fixed temporarily by adding this line to package.json
"devDependencies":{
...
"webpack": "4.24.0"
}
then
npm install

Worked for me...

NanaDarko on 5 Nov 2018

ng update --all did the work!

works like a charm

eago on 5 Nov 2018

Can be fixed temporarily by adding this line to package.json
"devDependencies":{
...
"webpack": "4.24.0"
}
then
npm install

doesn't work for me
os: OpenSuse Tumbleweed

ng update --all did the work!

but this works fine!

p0larbeer on 5 Nov 2018

Heya, we have a fix incoming in https://github.com/angular/angular-cli/pull/12870. As far as I can tell, this only affects 6.2.x. Neither 6.1.x nor 7.x should be affected.

filipesilva on 5 Nov 2018

I had the same issue on Ubuntu 18.10, Node 10.8.0, NPM 6.2.0 and Angular CLI 6.2.6.

Fixed it with removing colors option on this file:
/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js
on Line: 123

Changed this:
extraPlugins.push(new ProgressPlugin({ profile: buildOptions.verbose, colors: true }));
to:
extraPlugins.push(new ProgressPlugin({ profile: buildOptions.verbose }));

Hope this help. Cheers.

It works! Thanks a lot :)

guillermosnipe on 5 Nov 2018

Fixed in https://github.com/angular/angular-cli/releases/tag/v6.2.7

alexeagle on 5 Nov 2018

Fixed it with removing colors option on this file:
/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js
on Line: 123

Changed this:
extraPlugins.push(new ProgressPlugin({ profile: buildOptions.verbose, colors: true }));
to:
extraPlugins.push(new ProgressPlugin({ profile: buildOptions.verbose }));

This worked for me as well -- thanks!

pavedwave on 5 Nov 2018

Updating to Angular CLI 6.2.7 fixed it for me.

"webpack": "4.24.0"

Did the job also for me.

florian-badaluma on 6 Nov 2018

ng update --all did the work!

Worked for me as well.

emw-ghertner on 6 Nov 2018

"webpack": "4.24.0"

worked for me! =) Thanks!

renancunha on 9 Nov 2018

I am facing same issue. None of the above solutions working for me . Any other suggestions ?

deepatripathi on 14 Nov 2018

👍1

@angular/[email protected] alone didn't make it, had to upgrade one more:

    "@angular-devkit/build-angular": "0.10.6",
    "@angular/cli": "6.2.7",

awerlang on 16 Nov 2018

🎉3

Another workaround is ng serve --progress=false until you can update angular-cli

iamwillpowell on 16 Nov 2018

👍4 🎉1

I am facing same issue. None of the above solutions working for me . Any other suggestions ?
try do it :npm uninstall webapck,
then Can be fixed temporarily by adding this line to package.json

"devDependencies":{
...
"webpack": "4.24.0"
}

then
npm install

CheeseZhao on 26 Nov 2018

Got the error with "@angular/cli" 6.2.5 all the way to 6.2.8.
@iamwillpowell's fix worked for me.

Any idea about what is causing the issue? Should we expect a patch in the 6.x branch?
I have some projects in production and I'd like to avoid workarounds

Polyterative on 27 Nov 2018

Same problem with me (Angular 6.1.10 and Angular Cli 6.2.7)
Remove package-lock.json and npm cache clean --force && npm install --force
Worked for me :)

bamossza on 27 Nov 2018

update from

    "@angular-devkit/build-angular": "0.8.4",

    "@angular-devkit/build-angular": "0.11.0",

Gorniv on 28 Nov 2018

👍6 🎉2

ng update @angular/cli worked for me

IniJr on 1 Dec 2018

update from

    "@angular-devkit/build-angular": "0.8.4",

    "@angular-devkit/build-angular": "0.11.0",

worked THANKS

muralib91dotnet on 6 Dec 2018

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}

angular-automatic-lock-bot[bot] on 9 Sep 2019

Was this page helpful?

0 / 5 - 0 ratings

Related issues

Where to add Images and other files in 1.0.0-beta.14

MateenKadwaikar · 3Comments

ng-build not able serve the app in tomcat, throwing 404 error

hareeshav · 3Comments

Resource files, where?

rajjejosefsson · 3Comments

A noob question sorry what is the use of spec.ts?

hartjo · 3Comments

ng g component always creates a new directory with the same name as the component.

jbeckton · 3Comments

Angular-cli: ProgressPlugin breaks with webpack 4.25.* due to incorrect option colors

Bug Report or Feature Request (mark with an x)

Command (mark with an x)

Versions

Repro steps

The log given by the failure

Desired functionality

Mention any other details that might be useful

Most helpful comment

All 39 comments

Repro steps

Expected result

Result

Version

Related issues

Bug Report or Feature Request (mark with an `x`)

Command (mark with an `x`)