Monday, May 18, 2020

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 information
    this 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! 

No comments:

Post a Comment