The Angular CLI process times out first time debug is run

[paulsperanza]

When I run my app in development I get the following exception. Refreshing the browser allows the app to run as expected.

System.TimeoutException: The Angular CLI process did not start listening for requests within the timeout period of 50 seconds. Check the log output for error information.
at Microsoft.AspNetCore.SpaServices.Extensions.Util.TaskTimeoutExtensions.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.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.<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.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.Authentication.AuthenticationMiddleware.d__6.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.d__7.MoveNext()

[agegould]

Hi.

We encounter the same behaviour which is due to the compilation of source files taking longer than the permitted timeout limit to connect to Node/Angular CLI.

If you refresh the browser it will eventually connect and you are good to go.
Once your source files are compiled the timeout no longer occurs.

Regards
Age Gould

[SteveSandersonMS]

@agegould is correct. And if you need to, you can change the timeout value by setting a value on the spa.Options.StartupTimeout property inside your UseSpa setup call.

[paulsperanza]

That worked for me. I set it to 80 seconds. Thanks @SteveSandersonMS!

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

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

[JipingWang]

Not working for me, after added "spa.Options.StartupTimeout = new TimeSpan(0, 0, 80);"
Also, the message says "20 seconds"?!!

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

Env:
VS2017 15.7 preview 5.0;
Windows 10 1709;
with Hyper-V;
Docker;

[SteveSandersonMS]

@JipingWang It's fixed in the latest code which should be included in the next ASP.NET Core preview release.

[JipingWang]

@SteveSandersonMS , good to know, thanks.

[fmorriso]

@JipingWang : As of 2018-07-13, using Visual Studio 2017 (15.7.5), DotNet Core 2.1.302 SDK, Angular-CLI 6.0.8 and Angular 6.0.9, you still need to override the default timeout value. My example uses an admittedly extremely long / paranoid value of 90 seconds, but feel free to adjust to your needs:

app.UseSpa(spa =>
	{
		spa.Options.SourcePath = "ClientApp";
		if (env.IsDevelopment())
		{
			spa.Options.StartupTimeout = new TimeSpan(days: 0, hours: 0, minutes: 1, seconds: 30);
			spa.UseAngularCliServer(npmScript: "start");
		}
	});

[iqmeta]

out of the box this takes ages.
just switched to ng serve on my own with visual studio code / terminal. now up an running ins seconds.

spa.Options.StartupTimeout = new TimeSpan(0, 0, 360); //spa.UseAngularCliServer(npmScript: "start"); spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");

[samson7s]

@SteveSandersonMS , good to know, thanks.