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:

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.

Upgrade Angular from version 8 to version 9

Starting point : a  SPA / Angular project created in Visual Studio 2019 ,

1. Step 1:  open the project in visual studio 2019 or Visual Code (out of my personal preference, I used Visual Studio Code)., you can confirm the current version by opening package.json file.  Mine was 8.2.12 when I started
2. Step 2: Step command line in visual studio 2019 or Terminal in Visual Studio Code . make sure you are in /ClientApp directory
3. Step 3: run this command :  ng update @angular/cli @angular/core  it will run for a long while ( 2-3 minutes I was told, but it took me 10 minutes!). at the end of it, you will see the following message:
   you project has been upgraded to Angular version 9
   for more info, please see http://v9.angular.io/guide/upgrade-to-version -9
4. Step 4: open up package.json in /ClientApp folder and to verify the new version number . mine is "9.1.7"
5. Step 5: open main.ts in /clientApp/src folder.  Comment out the following line, ( in my case it is line 22)
   export { renderModule, renderModuleFactory } from '@angular/platform-server'; 
6. Step 5: open up package.json,  we need to change the following line ( in my case it was line 24) "@nguniversal/module-map-ngfactory-loader": "8.1.1",  To
   "@nguniversal/module-map-ngfactory-loader": "9.0.0-next.9",
7. Step 6: on the terminal window, run npm install
8. Step 7 : save all changed files in Visual Studio Code.
9. Step 8, open up the solution in Visual Studio 2019,  build the solution to ensure, it can be built without error
10. Step 9: run the program under IIS Express, after a long while, it was 2 and half minutes, on the browser, it shows the following message:
    An unhandled exception occurred while processing the request
    Timeout Exception: The Angular CLI process did not start listening for requests within the timeout period of 0 seconds. Check the log output for error informationthis is because the Angular CLI did start in time of the client request, you can simply, click on “refresh” button on your browser”
11. Step 10: click on refresh button on the browser, after a few seconds, you should be presented with the Angular “Hello, Word!” page. 
12. Step 11: click on <Fetch data>, <Counter> tabs, you verify the app is working as expected.

Up to here: coagulations,   you have successfully upgraded you Angular app from version 8 to version 9!