The error output was: Unknown option: '--extract-css'

Question

I get the error "The NPM script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: Unknown option: '--extract-css'"

I have a project that I have not worked in a while. It is based on a visual studio angular template. When starting the project I get the error:

An unhandled exception occurred while processing the request. AggregateException: One or more errors occurred. (One or more errors occurred. (The NPM script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: Unknown option: '--extract-css'

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! angular@0.0.0 start: ng serve --extract-css "--port" "54197" npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the angular@0.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

)) System.Threading.Tasks.Task.GetResultCore(bool waitCompletionNotification)

InvalidOperationException: The NPM script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: Unknown option: '--extract-css'

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! angular@0.0.0 start: ng serve --extract-css "--port" "54197" npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the angular@0.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware+d__3.MoveNext()

I would like to be able to run the angular template project from visual studio. It runs fine when running through angular cli.

Answer 1

I found that by changing the package.json from:

"scripts": { "ng": "ng", "start": "ng serve --extract-css", "build": "ng build --extract-css",

to:

"scripts": { "ng": "ng", "start": "ng serve", "build": "ng build",

allows to run successfully the angular project template from within visual studio. Basically just removing the "--extract-css"

Answer 2

To add arguments in script, add them after a -- .

In the case above, instead of:

"scripts": { "ng": "ng", "start": "ng serve --extract-css", "build": "ng build --extract-css",

You can write it as:

"scripts": { "ng": "ng", "start": "ng serve", "build": "ng build -- --extract-css",

PS: --extract-css does not work with serve, please refer to angular issue #10532