The NPM script 'start' exited without indicating that the Angular CLI was listening for requests

Angular Problem Overview

I'm attempting to start an .NET Core 2/Angular 6 SPA. I created an Angular 5 Application using "dotnet new angular" then proceeded to upgrade using this guide from angular.io. Once I finished the upgrade I tried to run the application using "dotnet run" and I get an ugly error page with 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: '--extractCss' > > InvalidOperationException: The NPM script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: Unknown option: '--extractCss'

Thinking perhaps I missed a step during the upgrade, I tried a second time and got the same error.

Here are the steps I took after creating the app:

npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli
ng update @angular/core
npm install --save @angular/material @angular/cdk @angular/animations hammerjs 
npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

I'm running Node version 9.4.0 and .Net Core 2.1.200 on Windows 10 (1703) Enterprise.

Any ideas on how to fix this? Here is a full stack trace:

 ---> System.IO.EndOfStreamException: Attempted to read past the end of the stream.
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.<StartAngularCliServerAsync>d__3.MoveNext()
   --- End of inner exception stack trace ---
   at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.<StartAngularCliServerAsync>d__3.MoveNext()
   --- End of inner exception stack trace ---
   at System.Threading.Tasks.Task`1.GetResultCore(Boolean waitCompletionNotification)
   at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.<>c.<Attach>b__2_0(Task`1 task)
   at System.Threading.Tasks.ContinuationResultTaskFromResultTask`2.InnerInvoke()
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
   at System.Threading.Tasks.Task.ExecuteWithThreadLocal(Task& currentTaskSlot)
   --- End of inner exception stack trace ---
   at System.Threading.Tasks.Task`1.GetResultCore(Boolean waitCompletionNotification)
   at Microsoft.AspNetCore.SpaServices.Extensions.Util.TaskTimeoutExtensions.<WithTimeout>d__1`1.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.SpaServices.Extensions.Proxy.SpaProxy.<PerformProxyRequest>d__4.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.Builder.SpaProxyingExtensions.<>c__DisplayClass2_0.<<UseProxyToSpaDevelopmentServer>b__0>d.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.Builder.RouterMiddleware.<Invoke>d__4.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.<Invoke>d__7.MoveNext()
---> (Inner Exception #0) System.AggregateException: 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: '--extractCss'

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

 ---> System.IO.EndOfStreamException: Attempted to read past the end of the stream.
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.<StartAngularCliServerAsync>d__3.MoveNext()
   --- End of inner exception stack trace ---
   at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.<StartAngularCliServerAsync>d__3.MoveNext()
   --- End of inner exception stack trace ---
   at System.Threading.Tasks.Task`1.GetResultCore(Boolean waitCompletionNotification)
   at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.<>c.<Attach>b__2_0(Task`1 task)
   at System.Threading.Tasks.ContinuationResultTaskFromResultTask`2.InnerInvoke()
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
   at System.Threading.Tasks.Task.ExecuteWithThreadLocal(Task& currentTaskSlot)
---> (Inner Exception #0) System.InvalidOperationException: The NPM script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: Unknown option: '--extractCss'

 ---> System.IO.EndOfStreamException: Attempted to read past the end of the stream.
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.<StartAngularCliServerAsync>d__3.MoveNext()
   --- End of inner exception stack trace ---
   at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.<StartAngularCliServerAsync>d__3.MoveNext()<---
<---

Angular Solutions

Solution 1 - Angular

Try to do the following

Open a Powershell
Navigate to the clientapp directory
Run npm audit fix

This works for ReactJS & VueJS projects too.

Solution 2 - Angular

For me this and the followings are solved the issue: https://github.com/angular/angular-cli/issues/10666

And also you need to edit your package.json file and remove the --extractCss parameter from the start and build property. from:

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

to:

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

Solution 3 - Angular

The problem bugs me for a couple days too. Now finally get a way around. Apparently, Visual Studio tries to launch Angular CLI server for us automatically along with the ASP.Net core process. For this instance, it failed.

So according to Microsoft Doc here, we can start Angular CLI server manually.

navigate to the 'ClientApp' folder, and issue:

ng serve

to start server from the console.
In 'Startup.cs' file, replace

spa.UseAngularCliServer(..)

with

spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");

3. F5 to start ASP.Net Core project as we normally do.

This way you can continue debugging the application.

Solution 4 - Angular

In my case, I've removed following application setting from the azure web app and site was started working.

Key: ASPNETCORE_ENVIRONMENT Value: Development

Spent several days to figure out the issue :)

Solution 5 - Angular

If the above solution does not work, you can try the following which worked for me.

Scenario: Transferred working VS 2017 solution: core web api & angular spa projects to newly installed pc; gave me the above error.

Solution: After installing node.js workloads via visual studio installer, node.js for windows (https://nodejs.org/en/download/) and the necessary windows features for IIS; I was back on track.

The main installation is the node.js for visual studio and windows (which has npm included), had to install both for it to work. Probably the paths config for command prompt....

Solution 6 - Angular

Both Joe and Jays solutions work. To use the default template configuration without code changes you just need to install node.js for windows as Jay stated above and then restart VS. https://nodejs.org/en/download/

An excellent tutorial on creating, configuring and deploying Core Angular projects with vs and vscode here . Includes IIS setup as well. https://www.codeproject.com/Articles/1250961/Deploying-an-Angular-Application-with-ASP-NET-Core

Solution 7 - Angular

VS 2019 - Error resolved by navigating to ClientApp folder and running npm install. Make sure you have npm installed on your system along with Angular Cli. Incase having trouble installing Angular Cli you can change script from ng serve to npm run start in package.json file.

Solution 8 - Angular

I was trying to get a GitHub project working from scratch. These are the things I did to do that:

Download and install NodeJS: https://nodejs.org/en/download
Download any AngularJS project from GitHub
Run a command prompt and navigate to the "client-app" folder: dotnet new angular -o "C:\Users\me\OneDrive\Documents\Visual Studio 2017\Projects\myproject\myproject-dev\myproject-client-app" --force
Enter command: npm install -g @angular/cli
Enter command: npm build fix
Enter command: npm run ng
Enter command: npm start
Enter command: ng start --extract-css

(I didn't actually need to enter this last command, since npm start initiated this command for my project, but might not always be the case...)

In 'Startup.cs' file, replace

spa.UseAngularCliServer(..)

with

spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");

Then F5 to start the ASP .NET Core project as we normally do to start debugging the application.

After all of that, the project should run.

Solution 9 - Angular

If you have multiple Node versions installed using nvm.

You can cd into the project root in the terminal and execute

> nvm use x.x.x

This resolved my issue

Solution 10 - Angular

Help for me.

Install the node environment.js from installer vs;

2)Install node.js for your OS from the official website;

install npm via PowerShell. Open from the administrator, go to the Client App folder and run npm install. Then run npm audit fix (to fix errors).

Solution 11 - Angular

I faced the same issue and fix it by just uninstalling Nodejs from project and installing latest version of Nodejs from Nodejs.org

Content Type	Original Author	Original Content on Stackoverflow
Question	mack	View Question on Stackoverflow
Solution 1 - Angular	Georg Hansen	View Answer on Stackoverflow
Solution 2 - Angular	Arpi	View Answer on Stackoverflow
Solution 3 - Angular	Joseph Wu	View Answer on Stackoverflow
Solution 4 - Angular	Isuru Siriwardana	View Answer on Stackoverflow
Solution 5 - Angular	JayKayOf4	View Answer on Stackoverflow
Solution 6 - Angular	maeneak	View Answer on Stackoverflow
Solution 7 - Angular	Santosh Bhatt	View Answer on Stackoverflow
Solution 8 - Angular	vapcguy	View Answer on Stackoverflow
Solution 9 - Angular	Rajsanthosh Sreenivasan	View Answer on Stackoverflow
Solution 10 - Angular	Wafeelka	View Answer on Stackoverflow
Solution 11 - Angular	Mamta	View Answer on Stackoverflow