Tuesday, May 19, 2020

Upgrade Angular from 8 to 9 ( follow up)

Well, well, life has never be easy on me, hasn’t it?

After successfully upgraded my Angular 8 project to Angular 9, on the following day, I was so eager to continue on my journey  of Angular quest.

To my surprise, this time, long after clicking on Run button in Visual Studio 2019,  I was presented with this screen:

A screenshot of a social media post

Description automatically generated

I clicked on reload / refresh a few times with no luck.

But if I go to clientApp folder on the command prompt, issue npm start  command, the app works as it should.


After some goggle searching, I found this is the issue seems related to some changes in the way Angular CLI starts up the angular part of the application starting from Angular 9.. click here for the detail description of the issue.

Bottom line, proposed solutions are to set progress. This is true in .Net Core 3.0 as well as .Net Core 3.1. 

There are lots of walk arounds, most of them either does not work or too complex to implement.  After 3-5 attempts, I found a work around I can handle.  Click on here for the original posting   


It only change one line of code in  Startup.cs 

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

in place of spa.UseAngularCliServer(npmScript: "start");

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

where 4200 is the default port of CliServer.

Operational, every time before you want to run the app, you go to ClientApp folder in command prompt issue npm start command to kick off the Angular CliServer, then you click on the run button as you did before,. Here you are the lovely UI presented to your face.

this basically proven that invocation command npmScript: "start" does not pick up the response from Angular CLI Server. The proposed solution call for starting up the CLI Server by manually issuing  npm start command, and let Visual Studio proxy into the CLI Server default port.

 Enjoy Angular and thank you for reading it.

No comments:

Post a Comment