TimeoutException: The Angular CLI process did not start listening for requests within the timeout period of 0 seconds

Question

I'm getting this error after upgrading to angular 9. I'm using visual studio 2019, ASP .NET core with angular. Even if I create new project and update angular to 9 version, It stops working.

Complete list of page response is :

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. Microsoft.AspNetCore.SpaServices.Extensions.Util.TaskTimeoutExtensions.WithTimeout(Task task, TimeSpan timeoutDelay, string message) Microsoft.AspNetCore.SpaServices.Extensions.Proxy.SpaProxy.PerformProxyRequest(HttpContext context, HttpClient httpClient, Task baseUriTask, CancellationToken applicationStoppingToken, bool proxy404s) Microsoft.AspNetCore.Builder.SpaProxyingExtensions+<>c__DisplayClass2_0+<b__0>d.MoveNext() Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

My package.json is:

{
  "name": "webapplication10",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng run WebApplication10:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "9.0.0",
    "@angular/cdk": "~9.0.0",
    "@angular/common": "9.0.0",
    "@angular/compiler": "9.0.0",
    "@angular/core": "9.0.0",
    "@angular/forms": "9.0.0",
    "@angular/material": "~9.0.0",
    "@angular/platform-browser": "9.0.0",
    "@angular/platform-browser-dynamic": "9.0.0",
    "@angular/platform-server": "9.0.0",
    "@angular/router": "9.0.0",
    "@nguniversal/module-map-ngfactory-loader": "8.1.1",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^4.4.1",
    "core-js": "^3.6.4",
    "jquery": "3.4.1",
    "oidc-client": "^1.10.1",
    "popper.js": "^1.16.1",
    "rxjs": "^6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.900.1",
    "@angular/cli": "9.0.1",
    "@angular/compiler-cli": "9.0.0",
    "@angular/language-service": "9.0.0",
    "@types/jasmine": "^3.5.3",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "^12.12.27",
    "codelyzer": "^5.2.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "~3.1.1",
    "karma-jasmine-html-reporter": "^1.5.2",
    "typescript": "3.7.5"
  },
  "optionalDependencies": {
    "node-sass": "^4.12.0",
    "protractor": "~5.4.2",
    "ts-node": "~8.4.1",
    "tslint": "~5.20.0"
  }
}
```

Answer 1

TL;DR

Sadly the issue seems related to some changes in the way Angular CLI starts up the angular part of the application. As per this issue:

https://github.com/dotnet/aspnetcore/issues/17277

proposed solutions are to set progress: true in angular.json or perform a simple echo prior to ng serve (https://github.com/dotnet/aspnetcore/issues/17277#issuecomment-562433864).

Full answer

I dug the asp.net core code base (https://github.com/dotnet/aspnetcore), looking how the Angular template starts up the Angular application.

The core engine that starts up the angular server is represented by two classes: AngularCliMiddleware (https://git.io/JvlaL) and NodeScriptRunner (https://git.io/Jvlaq).

In AngularCliMiddleware we find this code (I removed the original comments and added some of my own to explain a couple of things):

public static void Attach(ISpaBuilder spaBuilder, string npmScriptName)
{
    var sourcePath = spaBuilder.Options.SourcePath;
    if (string.IsNullOrEmpty(sourcePath))
    {
        throw new ArgumentException("Cannot be null or empty", nameof(sourcePath));
    }

    if (string.IsNullOrEmpty(npmScriptName))
    {
        throw new ArgumentException("Cannot be null or empty", nameof(npmScriptName));
    }

    // Start Angular CLI and attach to middleware pipeline
    var appBuilder = spaBuilder.ApplicationBuilder;
    var logger = LoggerFinder.GetOrCreateLogger(appBuilder, LogCategoryName);
    var angularCliServerInfoTask = StartAngularCliServerAsync(sourcePath, npmScriptName, logger);

    var targetUriTask = angularCliServerInfoTask.ContinueWith(
        task => new UriBuilder("http", "localhost", task.Result.Port).Uri);

    SpaProxyingExtensions.UseProxyToSpaDevelopmentServer(spaBuilder, () =>
    {
        var timeout = spaBuilder.Options.StartupTimeout;
        return targetUriTask.WithTimeout(timeout,
            $"The Angular CLI process did not start listening for requests " +

            // === NOTE THIS LINE, THAT CARRIES THE "0 seconds" BUG!!!
            $"within the timeout period of {timeout.Seconds} seconds. " + 

            $"Check the log output for error information.");
    });
}

private static async Task<AngularCliServerInfo> StartAngularCliServerAsync(
    string sourcePath, string npmScriptName, ILogger logger)
{
    var portNumber = TcpPortFinder.FindAvailablePort();
    logger.LogInformation($"Starting @angular/cli on port {portNumber}...");

    var npmScriptRunner = new NpmScriptRunner(
        sourcePath, npmScriptName, $"--port {portNumber}", null);
    npmScriptRunner.AttachToLogger(logger);

    Match openBrowserLine;
    using (var stdErrReader = new EventedStreamStringReader(npmScriptRunner.StdErr))
    {
        try
        {
            // THIS LINE: awaits for the angular server to output
            // the 'open your browser...' string to stdout stream
            openBrowserLine = await npmScriptRunner.StdOut.WaitForMatch(
                new Regex("open your browser on (http\\S+)", RegexOptions.None, RegexMatchTimeout));
        }
        catch (EndOfStreamException ex)
        {
            throw new InvalidOperationException(
                $"The NPM script '{npmScriptName}' exited without indicating that the " +
                $"Angular CLI was listening for requests. The error output was: " +
                $"{stdErrReader.ReadAsString()}", ex);
        }
    }

    var uri = new Uri(openBrowserLine.Groups[1].Value);
    var serverInfo = new AngularCliServerInfo { Port = uri.Port };

    await WaitForAngularCliServerToAcceptRequests(uri);

    return serverInfo;
}

As you can see, the StartAngularCliServerAsync method creates a new NpmScriptRunner object, that is a wrapper around a Process.Start method call, basically, attaches the logger and then waits for the StdOut of the process to emit something that matches "open your browser on httpSOMETHING...".

Fun thing is this should work!

If you run ng serve (or npm run start) in ClientApp folder, once the server starts it still emit the output "open your browser on http...".

If you dotnet run the application, the node server actually starts, just enable all the logs in Debug mode, find the "Starting @angular/cli on port ..." line and try visiting localhost on that port, you'll see that your angular application IS running.

Problem is that for some reason the StdOut is not getting the "open your browser on" line anymore, nor it is written by the logger... it seems that in some way that particular output line from ng serve is held back, like it's no longer sent in the Stardard Output stream. The WaitForMatch method hits his timeout after 5 seconds and is catched from the code of the WithTimeout extension method, that outputs the (bugged) "... 0 seconds ..." message.

For what I could see, once you dotnet run your application, a series of processes is spawn in sequence, but i couldn't notice any difference in the command lines from Angular 8 to Angular 9.

My theory is that something has been changed in Angular CLI that prevents that line to be sent in stdout, so the .net proxy doesn't catch it and can't detect when the angular server is started.

As per this issue:

https://github.com/dotnet/aspnetcore/issues/17277

proposed solutions are to set progress: true in angular.json or perform a simple echo prior to ng serve (https://github.com/dotnet/aspnetcore/issues/17277#issuecomment-562433864).

Answer 2

I resolved it by changing:

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

to:

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

in package.json

Answer 3

Here is a workaround:

• In package.json change the start-script from "ng serve" to "ngserve"

"scripts": {
  "start": "ngserve",

• In the same directory create a file ngserve.cmd with the following content:

@echo ** Angular Live Development Server is listening on localhost:%~2, open your browser on http://localhost:%~2/ **
ng serve %1 %~2

Now Dotnet gets the line it is waiting for. After that the command ng serve will start the server (so in fact the Angular Live Development Server is not yet listening), the browser will open, and first it won't work (ng serve still compiling), but if you press reload after a while, it should be fine.

This is just a workaround, but it works for us.

Answer 4

Here is what I did

from Fairlie Agile, commented out this line in main.ts

export { renderModule, renderModuleFactory } from '@angular/platform-server';

From Claudio Valerio In angular.json , set

"progress": true,

Now I can run the app by clicking on F5 / Run IIS Express

Answer 5

As suggested in https://developercommunity.visualstudio.com/solutions/446713/view.html, you should setup the StartupTimeout configuration setting.

Basically in Startup.cs:

 app.UseSpa(spa =>
    {
      spa.Options.SourcePath = "./";
      //Configure the timeout to 5 minutes to avoid "The Angular CLI process did not start listening for requests within the timeout period of 50 seconds." issue
      spa.Options.StartupTimeout = new TimeSpan(0, 5, 0);
      if (env.IsDevelopment())
      {
        spa.UseAngularCliServer(npmScript: "start");
      }
    });

Answer 6

I added verbosity to the serving process in the file package.json like this.

"scripts": {
  "ng": "ng",
  "start": "ng serve --verbose",
  "build": "ng build", ...
}, ...

No idea why it worked but I sense it somehow relates to causing the same slowdown as echo does.

Answer 7

to resolve the strict mode error remove this line from main.ts

export { renderModule, renderModuleFactory } from '@angular/platform-server';

This doesn't resolve the timeout issue however. I am also getting this error after upgrading to Angular 9 and using .NET core.

Running the angular app using "ng serve" and then changing your startup spa script to use UseProxyToSpaDevelopmentServer works as a work-around

Answer 8

I have changed in use spa pipeline configuration in configure method of startup class, It works for me.

app.UseSpa(spa =>
            {
                // To learn more about options for serving an Angular SPA from ASP.NET Core,
                // see https://go.microsoft.com/fwlink/?linkid=864501
                spa.Options.StartupTimeout = new System.TimeSpan(0, 15, 0);
                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseAngularCliServer(npmScript: "start");
                }
            });

Answer 9

If you are doing backend work only, in your startup.cs comment out

spa.UseAngularCliServer(npmScript: "start");

and add

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

Like so...

//spa.UseAngularCliServer(npmScript: "start");
spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");//Todo Switch back for SPA Dev

Run the SPA from cmd (in ClientApp Directory) via npm start.

Then when your run or debug your full app from Visual Studio, it will spin up so much faster.

Answer 10

In package.json change ng serve to ng serve --host 0.0.0.0

Answer 11

Change to .NET5 solves my problem. You can also try this:

 "scripts": {   
    "start": "echo start && ng serve",

or

"start": "ng serve --port 0000",

in package.json

Answer 12

In my case there were TypeScript compile errors that were not caught by SpaServices or ts-node. There were references using the same file name with different namespaces that confused the runtime compiler. Execute ng build in the ClientApp folder and make sure there are no errors.

Answer 13

None of the solutions here worked for me. The problem began after I upgrade components of my solution to their last versions. The only thing that works for me is to upgrade my global angular cli to have same version as my local one :

npm uninstall -g angular-cli
npm cache clean
npm cache verify
npm install -g @angular/cli@latest

Answer 14

run npm install -g @angular/cli from command prompt

Answer 15

"scripts": {
    "ng": "ng",
    "start": **"ng serve --port 33719 --open",**
    "build": "ng build",

Use the setting present in bold font in package.json

Answer 16

I ran into a similar issue and I made the following updates in the package.json file

"scripts": {
    "ng": "ng",
    "start": "echo hello && ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
}

See github resolution in [dotnet/angular - issues/17277]

Answer 17

For development purpose if you are getting the error as 'TimeoutException: The Angular CLI process did not start listening for requests within the timeout period of 0 seconds.' .

Please follow these 2 steps which work for me as well :

In command prompt, Run the 'ng serve' command to run the angular solution. In startup.cs file, change the start up timeout to minutes. even it will not take that much of time as angular solution is already running. -> spa.Options.StartupTimeout = new TimeSpan(0, 5, 0);

Please mark the answer if it helps you !!

Thanks.

Answer 18

I did all of these successful suggestions. But the timeout issue was still there. In my case the following worked for me, (Will attach all the steps)

1. Comment the following line in main.ts to fix the strict mode issue

   export { renderModule, renderModuleFactory } from '@angular/platform-server';

2. Change ng serve to echo Starting && ng serve in the package.json file

3. Just ran ng serve command manually using the Node.js Command Prompt. Then attempt to run the project in Visual Studio.

Answer 19

I received this error after my Visual Studio crashed while debugging. I couldn't make it go away using any of the above solutions. Eventually I deleted my project and cloned the code from the source. After that it loaded up just fine.

Answer 20

This was what worked for me:

In angular.json file,

I set

progress:true

Then run the app in visual studio 2019

Answer 21

None of the above worked consistently for me.

I experienced this even after upgrading to Angular 14 and net7.0. My symptoms were it would load fine the first couple of runs but then start to get bogged down after the app was stopped/run multiple times in one session.

I checked task manager and noticed multiple Node.js JavaScript Runtime processes piling up. Once I Ended those tasks, running the project from Visual Studio went back to normal and started up without issue.

Answer 22

The best approach is to insert this line at Startup

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

And then run or debug your app from Visual Studio.