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

Question

I have an angular web project that is built in VS2017 Pro version 15.9.8. It compiles to target .net framework 4.6, but when run in IISExpress, it always time out. I've tried the following approaches:

• In the Startup.cs, I've specified spa.Options.StartupTimeout to be 2 minutes [but still time out]
• Inside ClientApp folder, perform npm start, ng build: [it always complains about Error: Cannot find module '@angular/core/package.json'.

A lot of people say just run ng serve directly from commandline, but the project was constructed in VS2017, so the node_modules folder is at the root directory of the project, instead of under the ClientApp folder. Also, the @angular folder doesn't contain the core folder, but instead, it is under the @angular-devkit folder.

So my questions are:

• How to fix the timeout problem if run from within VS2017?
• If run from commandline (e.g. ng serve), how to resolve the folder problem?

Answer 1

Taken from here and here, it appears to work well in .NET Core 3 and Angular 9. Modify the way the Angular server is started in package.json to add a dummy echo:

"start": "ng serve"

becomes

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

Answer 2

ASP.NET Core >= 3.0

If you are using asp.net core 3.0 then you should not use UseAngularCliServer instead. You should use asp.net as a proxy for development. more detail is here

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

                if (env.IsDevelopment())
                {
                    spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
                }
            });

open command widnow, go to ClientApp and start npm server.

c:\your\project\directory\> cd ClientApp
c:\your\project\directory\> npm start

ASP.NET Core 2.0

refresh(F5) your browser or increase timeout for SPA configuration

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

                if (env.IsDevelopment())
                {
                    spa.UseAngularCliServer(npmScript: "start");
                    spa.Options.StartupTimeout = TimeSpan.FromSeconds(200); // <-- add this line
                }
            });

In the development environment, npm builds an angular app before serving. some times build takes longer than 120 seconds.