Updating ASP.Net Core Angular template from Version 8 to 9

Question

The book that i read has version 9 from the beginning (ASP.NET Core 3 and Angular 9 - Third Edition) and uses also the angular template. I have the latest visual studio updates for vs 2019 installed.

The template of a Angular project has version 8. The book I read is with version 9. So i try to update my angular version. ng update gives me

@angular/cli 8.3.14 -> 9.0.3 ng update @angular/cli

@angular/core 8.2.12 -> 9.0.3 ng update @angular/core

@nguniversal/aspnetcore-engine 8.1.1 -> 8.2.6 ng update @nguniversal/aspnetcore-engine

I updated cli and core. But when I try to update the third package I get:

C:\Users\user\Test\ClientApp>ng update @nguniversal/aspnetcore-engine
Using package manager: 'npm'
Collecting installed dependencies...
Found 39 dependencies.
Package '@nguniversal/aspnetcore-engine' is not a dependency.

I tried to run the application anyway and I get as HTML

Cannot GET /

Or a exception page with:

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)

Rattenfengar Rattenfengar · Accepted Answer · 2020-11-22T04:23:29

Maybe is a little late but maybe this helps others. I faced the exact same problem. To make it work do this in the package.json.

Change

"scripts":{
   ...
   "start": "ng serve"
   ...
}

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

This was taken from a comment by Smatusan. This is the explanation of why it works.

"Because this problem frequently occurs due to the initial build time of ng serve exceeding the programmed timeout window of the .NET SPA service, so by giving it the echo, the .NET SPA service receives some data and believes it's connected." - mikejunt.

The complete issue on GitHub can be found on the Angular side and the .NET side

Updating ASP.Net Core Angular template from Version 8 to 9

3 Answers