.NET core 3.1 - Angular 9 - The Angular CLI process did not start listening for requests within the timeout period of 0 seconds

Question

[ carefull that this question has already been asked, but none of the suggestions appear to work and also the timeout is 0s in my case ]

problem:

I can't have a .NET core / angular application working on my computer

It works at home (Win 7, VS 2019 community), but not on my work pc (Win10, VS 2019 pro)

Chrome/FFox keep loading the index page, then I get a timeout

error:

Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware: Error: An unhandled exception has occurred while executing the request.

System.TimeoutException: The Angular CLI process did not start listening for requests within the timeout period of 0 seconds. Check the log output for error information.
   at Microsoft.AspNetCore.SpaServices.Extensions.Util.TaskTimeoutExtensions.WithTimeout[T](Task`1 task, TimeSpan timeoutDelay, String message)
   at Microsoft.AspNetCore.SpaServices.Extensions.Proxy.SpaProxy.PerformProxyRequest(HttpContext context, HttpClient httpClient, Task`1 baseUriTask, CancellationToken applicationStoppingToken, Boolean proxy404s)
   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 Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

expected behaviour:

the angular app should display in the browser

what I tried :

I updated VS many times

I upgraded angular twice (from 8.0 -> 8.2 -> 9.1.9)

ng update @angular/core@8 @angular/cli@8
ng update @angular/core@9 @angular/cli@9

I tried adding a timeout

spa.Options.StartupTimeout = new TimeSpan(0, 0, 80);
spa.UseAngularCliServer(npmScript: "start");

I tried replacing the start command in package.json

"start": "echo Starting... && ng serve",

I added a progress to the angular.json for the build to see when the app was available

"browserTarget": "WebApplication1:build",
"progress": true

I see IISExpress listening on the port

C:\WINDOWS\system32>netstat -afo | grep 22710
  TCP    0.0.0.0:22710          ########################.net:0  LISTENING       4

I tried to change the port to another one in launchSettings.json

"applicationUrl": "http://localhost:8081",

I also tried doing this, but the port gets overriden by some random port that seems unaccessible

ng serve --port 8081

I can run the angular app on the command line

• using ng serve , the angular app shows up but there is no backend services

• using dotnet run, I get the same timeout issue

overall:

it seems like .NET core framework is unable to contact angular cli somehow

any idea what I could check or change to make this work ?

thanks for the time you'll spend on this one

Answer 1

Increase the startup time out on startup.cs

 app.UseSpa(spa =>
    {
        
        spa.Options.SourcePath = "ClientApp";
        spa.Options.StartupTimeout = new TimeSpan(0, 5, 0);
        if (env.IsDevelopment())
        {
            
            spa.UseAngularCliServer(npmScript: "start");
        }
    });

on angular.json

   "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "xxxx:build",
        "progress": true
      },

work for me.

Answer 2

I also had the same issue but went through some of the suggested workarounds in vain. When the application times out, try and refresh the browser it will reload and display.

Answer 3

this work for me add it to startup.cs>>> Configure method.

   app.UseSpa(spa =>
        {
            
            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.Options.StartupTimeout = new TimeSpan(0, 1, 80);
                spa.UseAngularCliServer(npmScript: "start");
            }
        });