Starting point : a SPA / Angular project created in Visual Studio 2019 ,
- 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
- Step 2: Step command line in visual studio 2019 or Terminal in Visual Studio Code . make sure you are in /ClientApp directory
- 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 - Step 4: open up package.json in /ClientApp folder and to verify the new version number . mine is "9.1.7"
- 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'; - 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", - Step 6: on the terminal window, run npm install
- Step 7 : save all changed files in Visual Studio Code.
- Step 8, open up the solution in Visual Studio 2019, build the solution to ensure, it can be built without error
- 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” - Step 10: click on refresh button on the browser, after a few seconds, you should be presented with the Angular “Hello, Word!” page.
- Step 11: click on <Fetch data>, <Counter> tabs, you verify the app is working as expected.
No comments:
Post a Comment