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

Question

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()<---
<---

Answer 1

Try to do the following

1. Open a Powershell
2. Navigate to the clientapp directory
3. Run npm audit fix

This works for ReactJS & VueJS projects too.

Answer 2

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",

Answer 3

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.

1. navigate to the 'ClientApp' folder, and issue:

   ng serve

   to start server from the console.

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

Answer 4

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 :)