If you're a .Net developer and have been using C#, maybe used or still using Angular and you're like me and like to try out the new versions, and on top of that, if you are using .Net Core, you probably already tried the dotnet CLI and the template ASP.NET Core with Angular 8.2.12, since the current Angular LTS version at the time of writing is 11.1.2 and significant changes were introduced in versions 9 and 10, such as Ivy, you probably want and should update your Angular project before starting, or maybe, you already have an existing project and you want to upgrade it.
Never heard of ASP.NET Core or Angular? Check out these awesome free resources!
Tutorial: Get started with ASP.NET Core
Thinkster Fundamentals of Angular
For this example, I'll just create a new project using the CLI.
Create a new folder with any name, in this case, I'll name it `sampleApp`, inside that directory run the command `dotnet new angular`
A new ASP.NET Core 5 MVC and Angular projects will be generated, the Angular project will be located in the `ClientApp` folder, go to that folder...
If you inspect the package.json file you'll see that the Angular version for that project is 8.2.12 as mentioned above, so how do we upgrade it to the latest Angular version?
One way to do it is to update manually the versions of each package and run `npm install` that would definitely work, but I prefer the Angular Update tool.
Entering the Angular Update tool:
Available @ https://update.angular.io/ this tool provides a simple wizard and a list of steps to take to upgrade your Angular project from Angular version 2.0 up to the latest available, this is always my goto place, besides that list of steps, doing it using ng update will also ensure that some of the code is also migrated and deprecated code is removed where applicable.
In this scenario, we'll select `From: 8.2 To: 11`.
If you get the warning 'Warning: We do not recommend moving across multiple major versions.' don't worry it's just letting you know that upgrading from 8.2 to 11 it's not recommended, but we'll do it step by step, from 8.x to 9.x, from 9.x to 10.x and last from 10.x to 11.
Just follow the steps, ensure you're running at least node 10.13 or later, and you ran `npm install` before starting and start by upgrading to the latest version of Angular 8 by running the command `ng update @angular/core@8 @angular/cli@8`.
`ng update` requires all changes to be committed before running, so we'll need to commit this upgrade before moving to the next step so if you get the error message you know what to do.
Usually, before moving to the next step I do a sanity check, running all tests (on existing projects), you can also run your angular app and check if everything seems normal before moving to the next step, it's always better to handle small problems at a time.
We'll run `ng update @angular/core@9 @angular/cli@9` and we should get the following message after some time.
After this upgrade, you might need to run the Angular Compatibility Compiler, especially if you start to see some errors on the build process check this resource speeding up ngcc compilation
The migration from Angular version 8.x to Angular 9.x will display a lot more information about what changed and you will be ready for the next step
If you're following me and you tried to run your project, you might notice that now the Angular project doesn't start and you get an error on your browser developer tools console:
Fear not, the fix is easy and you can find a thread on StackOverflow about that.
Just go to the Angular app folder `ClientApp` open the `main.ts` file and remove the following line:
export { renderModule, renderModuleFactory } from '@angular/platform-server';
after that, restart your app and if everything worked fine, commit your changes if applicable and move to the next step, upgrade from Angular version 9.x to Angular version 10.x
Let's run `ng update @angular/core@10 @angular/cli@10`:
You should get the following error messages after running the command
Package "@nguniversal/module-map-ngfactory-loader" has an incompatible peer dependency to "@angular/common" (requires "^8.0.0" (extended), would install "10.2.4").
Package "@nguniversal/module-map-ngfactory-loader" has an incompatible peer dependency to "@angular/core" (requires "^8.0.0" (extended), would install "10.2.4").
Package "@nguniversal/module-map-ngfactory-loader" has an incompatible peer dependency to "@angular/platform-server" (requires "^8.0.0" (extended), would install "10.2.4").
Worry not, @nguniversal/module-map-ngfactory-loader JS library, has been obsolete since Angular 9, we just need to remove it.
Run `npm uninstall @nguniversal/module-map-ngfactory-loader` and remove its usages from the file `app.server.module.ts` if you remove the package before editing the file, it will be flagged already by your IDE or Code Editor.
Give it a quick run for a sanity check, if it's working, you're ready to go again.
Let's run (again) `ng update @angular/core@10 @angular/cli@10`
Sure enough, after a few seconds, it will be complete, for simplicity, I'm omitting all the output from each step, but as the update process is running messages about changes and what's being done are displayed.
One thing that you should also keep doing, especially on existing projects, is running `ng update` to check for updates for other packages and update any dependencies your project may have
We're nearly there, our Angular project is already on the latest version 10, so, that's a good time to run `ng update @angular/core@11 @angular/cli@11`.
Again, the Angular CLI will let you know that something isn't ready yet...
Package "codelyzer" has an incompatible peer dependency to "@angular/compiler" (requires ">=2.3.1 <10.0.0 || >9.0.0-beta <10.0.0 || >9.1.0-beta <10.0.0 || >9.2.0-beta <10.0.0" (extended), would install "11.2.1").
Package "codelyzer" has an incompatible peer dependency to "@angular/core" (requires ">=2.3.1 <10.0.0 || >9.0.0-beta <10.0.0 || >9.1.0-beta <10.0.0 || >9.2.0-beta <10.0.0" (extended), would install "11.2.1").
Package "codelyzer" has an incompatible peer dependency to "tslint" (requires "^5.0.0", would install "6.1.3").
We need to update codelyzer before continuing, run 'npm install codelyzer@latest --save-dev` and try again...
Run `ng update @angular/core@11 @angular/cli@11`.
This time the Angular should be updated (if no other package needs update) and after some time and more "Migration completed." messages you'll be done.
My Angular project is now updated to version 11.2.1 which is the latest version available at the time of writing, everything is working and now I'm ready to start implementing my awesome app.
Give it another spin for good measure
Everything still working, happy days!
One other thing that I like to do, is replacing my end-to-end framework from Protractor to Cypress. Cypress is fast, it's reliable and it's awesome... but that will be a topic for another post...
Stay tuned!