@angular-devkit/build-angular 0.803.14 results in devServer error

[the-ult]

🐞 Bug report

Command (mark with an x)

• serve

Is this a regression?

Yes, the previous version in which this bug was not present was: ....

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

Description

After updating Angular and the CLI etc with the latest: "@angular-devkit/build-angular": "0.803.14",
ng serve gives the following error:

> ng serve "frontend-with-graphql"

An unhandled exception occurred: webpack Dev Server Invalid Options

options should NOT have additional properties

N.B.

• the same issue happens with a newly generated app
• And with all other projects removed from angular.json

🔬 Minimal Reproduction

Upgrade to "@angular-devkit/build-angular": "0.803.14",

🔥 Exception or Error

❯ cat /tmp/ng-OxQsei/angular-errors.log
[error] ValidationError: webpack Dev Server Invalid Options

options should NOT have additional properties

    at validateOptions (/home/the_ult/dev/tkp/nx/node_modules/schema-utils/src/validateOptions.js:32:11)
    at new Server (/home/the_ult/dev/tkp/nx/node_modules/webpack-dev-server/lib/Server.js:83:3)
    at Observable._subscribe (/home/the_ult/dev/tkp/nx/node_modules/@angular-devkit/build-webpack/src/webpack-dev-server/index.js:28:24)
    at Observable._trySubscribe (/home/the_ult/dev/tkp/nx/node_modules/@angular-devkit/build-webpack/node_modules/rxjs/internal/Observable.js:44:25)
    at Observable.subscribe (/home/the_ult/dev/tkp/nx/node_modules/@angular-devkit/build-webpack/node_modules/rxjs/internal/Observable.js:30:22)
    at /home/the_ult/dev/tkp/nx/node_modules/@angular-devkit/build-webpack/node_modules/rxjs/internal/util/subscribeTo.js:22:31
    at Object.subscribeToResult (/home/the_ult/dev/tkp/nx/node_modules/@angular-devkit/build-webpack/node_modules/rxjs/internal/util/subscribeToResult.js:10:45)
    at SwitchMapSubscriber._innerSub (/home/the_ult/dev/tkp/nx/node_modules/@angular-devkit/build-webpack/node_modules/rxjs/internal/operators/switchMap.js:65:54)
    at SwitchMapSubscriber._next (/home/the_ult/dev/tkp/nx/node_modules/@angular-devkit/build-webpack/node_modules/rxjs/internal/operators/switchMap.js:55:14)
    at SwitchMapSubscriber.Subscriber.next (/home/the_ult/dev/tkp/nx/node_modules/@angular-devkit/build-webpack/node_modules/rxjs/internal/Subscriber.js:66:18)
    at Observable._subscribe (/home/the_ult/dev/tkp/nx/node_modules/@angular-devkit/build-webpack/node_modules/rxjs/internal/observable/scalar.js:6:20)
    at Observable._trySubscribe (/home/the_ult/dev/tkp/nx/node_modules/@angular-devkit/build-webpack/node_modules/rxjs/internal/Observable.js:44:25)
    at Observable.subscribe (/home/the_ult/dev/tkp/nx/node_modules/@angular-devkit/build-webpack/node_modules/rxjs/internal/Observable.js:30:22)
    at SwitchMapOperator.call (/home/the_ult/dev/tkp/nx/node_modules/@angular-devkit/build-webpack/node_modules/rxjs/internal/operators/switchMap.js:33:23)
    at Observable.subscribe (/home/the_ult/dev/tkp/nx/node_modules/@angular-devkit/build-webpack/node_modules/rxjs/internal/Observable.js:25:31)
    at MapOperator.call (/home/the_ult/dev/tkp/nx/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/operators/map.js:32:23)
    at Observable.subscribe (/home/the_ult/dev/tkp/nx/node_modules/@angular-devkit/build-webpack/node_modules/rxjs/internal/Observable.js:25:31)
    at /home/the_ult/dev/tkp/nx/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/util/subscribeToObservable.js:10:20
    at Object.subscribeToResult (/home/the_ult/dev/tkp/nx/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/util/subscribeToResult.js:10:45)
    at SwitchMapSubscriber._innerSub (/home/the_ult/dev/tkp/nx/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/operators/switchMap.js:65:54)
    at SwitchMapSubscriber._next (/home/the_ult/dev/tkp/nx/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/operators/switchMap.js:55:14)
    at SwitchMapSubscriber.Subscriber.next (/home/the_ult/dev/tkp/nx/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/Subscriber.js:66:18)
    at /home/the_ult/dev/tkp/nx/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/util/subscribeToPromise.js:7:24
    at processTicksAndRejections (internal/process/task_queues.js:85:5)

• Could be a combination of NX with Angular?

🌍 Your Environment

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

Angular CLI: 8.3.15
Node: 12.9.1
OS: linux x64
Angular: 8.2.12
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.3
@angular-devkit/build-angular     0.803.13
@angular-devkit/build-optimizer   0.803.13
@angular-devkit/build-webpack     0.803.13
@angular-devkit/core              8.3.15
@angular-devkit/schematics        8.3.3
@angular/cdk                      8.2.3
@angular/cli                      8.3.15
@angular/material                 8.2.3
@ngtools/webpack                  8.3.13
@schematics/angular               8.3.3
@schematics/update                0.803.15
rxjs                              6.5.3
typescript                        3.6.4
webpack                           4.39.2
-----------------------------------------------------------
"@nrwl/angular": "8.7.0",
"@nrwl/cypress": "8.7.0",
"@nrwl/eslint-plugin-nx": "8.7.0",
"@nrwl/express": "8.7.0",
"@nrwl/jest": "8.7.0",
"@nrwl/node": "8.7.0",
"@nrwl/workspace": "8.7.0",

Anything else relevant?
I first tought the issue was caused by NX (upgraded to 8.7.0) or Angular 9.

• cleanup up the complete angular.json

• checked all settings in angular.json etc.

• to be sure I tested with style and skipTests as well

Deprecated styleext and spec options have been removed. Use style and skipTests options instead.

Example repo:

https://gitlab.com/ultimate-solutions/ultimate-nx-starter-workspace

This is a (first | WIP) setup for some best practices etc. Yet Another Starter Project
With NX, Angular and GraphQL

npm run start simple-app

• upgrading "@angular-devkit/build-angular": "0.803.13", to "@angular-devkit/build-angular": "0.803.14", shows the ERROR.

[the-ult]

Running Angular 9 with "@angular-devkit/build-angular": "0.803.13", is working as well

❯ ng --version

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

Angular CLI: 9.0.0-next.18
Node: 12.9.1
OS: linux x64
Angular: 9.0.0-next.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.3
@angular-devkit/build-angular     0.803.13
@angular-devkit/build-optimizer   0.803.13
@angular-devkit/build-webpack     0.803.13
@angular-devkit/core              9.0.0-next.18
@angular-devkit/schematics        8.3.3
@angular/cdk                      8.2.3
@angular/cli                      9.0.0-next.18
@angular/material                 8.2.3
@ngtools/webpack                  8.3.13
@schematics/angular               8.3.3
@schematics/update                0.900.0-next.18
rxjs                              6.5.3
typescript                        3.6.4
webpack                           4.39.2

N.B.

Upgrading to "@angular-devkit/build-angular": "0.903.x", gives problems with loading sass partials. Therefore we still use @angular-devkit/build-angular 0.803.13 with Angular 9

ERROR in ./src/styles.scss
Module build failed (from /home/the_ult/dev/tkp/nx/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from /home/the_ult/dev/tkp/nx/node_modules/sass-loader/lib/loader.js):

@import 'theme.global'; 
       ^
      Can't find stylesheet to import.
  ╷
4 │ @import 'theme.global'; // ? use @tkp/theming/styles?
  │         ^^^^^^^^^^^^^^

_theme.global.scss is located in libs/styles/src/lib which is set in angular.json in includePaths

[alan-agius4]

Hi @the-ult, let's keep the tread focused on a single issue please. If you are experiencing multiple issue I strongly recommend to open separate issues.

I have tried to generate a new application to replicate the first issue you reported. However I was unable to replicate the issue you are reporting.

$ npx @angular/cli@8.3.14 new webpack-dev-test --defaults
$cd webpack-dev-test
$ ng serve

10% building 3/3 modules 0 activei ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
i ｢wds｣: webpack output is served from /
i ｢wds｣: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 9.71 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-10-30T09:57:15.799Z - Hash: c0bb8f2388d9e04046c4 - Time: 8903ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[the-ult]

Hi @alan-agius4,
I provided the the issue about @angular-devkit/build-angular": "0.903.x just for context, to show why I was using the 'older' 0.803.13 version with Angular 9.

I wil try to replicate the the issue and make my (gitlab) project public.

[clydin]

Version 0.803.14 did in fact have a defect that could cause the error when using the public host option. This was corrected in the latest release (0.803.15).

[the-ult]

@alan-agius4 I updated the Description of the topic with a link to a working Repo.
Upgrading @angular-devkit/build-angular": "0.803.13" to 0.803.14 or 0.803.15 wil show the error.

@clydin 0.803.15 is showing the same error

[clydin]

It appears that the @nrwl/node package contains a dependency to an older version of webpack-dev-server. NPM's package hoisting put that version in a location that was then picked up the CLI. Updating @angular-devkit/build-angular to the latest patch version (0.803.15) and deleting the lock file and node modules directory removed the error locally.

[alan-agius4]

@the-ult, this seems to caused by dependency hoisting issues.

npm ls webpack-dev-server
ult-starter-workspace@0.0.0 
+-- @angular-devkit/build-angular@0.803.15
| `-- webpack-dev-server@3.9.0
`-- @nrwl/node@8.7.0
  +-- @nrwl/linter@8.7.0
  | `-- @angular-devkit/build-angular@0.803.2
  |   `-- webpack-dev-server@3.8.0
  `-- webpack-dev-server@3.1.14

@nrwl/linter seems to have a direct dependency on an older version of @angular-devkit/build-angular and @nrwl/node also a direct dependency on webpack-dev-server. Essentially you are ending up with 3 versions of webpack-dev-server and @angular-devkit/build-webpack is picking up the buggy version.

[the-ult]

Thanks for the quick replies.
Is this something we should take up with @vsavkin ?
What would be a solution to this problem?

[alan-agius4]

Closing as this in actionable from our end.

[angular-automatic-lock-bot]

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.}