In my previous post, I've explained how I've developed my portfolio website(Progressive web app) using just angular.
Here is the portfolio - vikramkadiam.netlify.app
Today I'm writing on my experience with Angular migration from v7 to v10.When I started out on my website I've built it on @angular/core": "~7.2.0, even though at that time Angular 10 was just released and I was pretty much hyped about using it.
Nevertheless now I got a chance to migrate my entire web app from v7 to v10 by following Angular official update guide from update.angular.io
Migration steps
In a nutshell all I had to run was below two commands for each Major version migration.
1. ng update @angular/core@10 @angular/cli@10
2. ng update @angular/material@10 @angular/flex-layout@10.0.0-beta.32
NOTE: Above commands are executed when migrating from v9 to v10, the major version value will change accordingly.
Step:1
Go to update.angular.io and select the From & To major version you want to upgrade. In my case it was from v7 --> v8 --> v9 --> v10.Select Angular material option if your project is using it.
I would also advise to select app complexity as 'Advanced' just to understand what all are the changes that this migration needs for better view.
Don't skip major versions while migrating, although you can skip minors & patches.
This step will list down all the changes that we need to ensure to migrate successfully and what changes ng update command would do for you.
Step:2
Once you are clear with the efforts and changes needed to migrate from one major version to another, run the first command.
ng update @angular/core@{target_major_v} @angular/cli@{target_major_v}
This will update core framework and CLI for the target major version of Angular.
Step:3
After the successful execution verify the files that are changed and also check terminal logs for any errors or warnings. Mostly there shouldn't be any unless there are any peer dependencies.
Step:4
Commit or stash(If you stash, you need to apply them at later step) the changes made by ng update command so that next command can be able to perform required changes.
Step:5
This step is optional and only needed if your project has @angular/material and @angular/flex-layout.
We need to update them together or else ng update will throw below error.
Package "@angular/flex-layout" has an incompatible peer dependency to "@angular/cdk" (requires "^7.0.0-rc.0", would install "8.2.3").
× Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.
Way around for this is to run ng update @angular/material@{target_major_v} --force and then execute ng update @angular/flex-layout@{target_major_v}
But it is safe to update them together by running below command
ng update @angular/material@{target_major_v} @angular/flex-layout@{target_major_v}
Step:6
Review the changes made by ng update command and commit your changes on top of your previous commit from step 4.
Step:7
Now repeat the steps from 1 to 6 for every major version upgrade.
That's it! You are done, successfully migrated your angular project to latest version.
DISCLAIMER: I'm not saying there will not be any issues by following the above mentioned steps, it depends on project by project basis, complexity and different dependencies. So please ensure you carefully understand the logs produced by ng update command to determine next best steps.
My website is now live and running completely fine on Angular v10 without any major breakdowns. Although after migration I've observed that Angular has improved it's warnings during build time in terms of identifying circular dependencies or duplicate styles etc., which I've fixed post migration.
You can check out my source code/issues/fixes in my repo below
Thanks for reading! Happy coding.. Cheers.
Top comments (3)
I'd change the self-assessment section of your tech skills a little: your notion of advanced may be someone else's expert rating, or even worse - I have seen beginner claiming advanced proficiency with no skills to back it up.
I propose the following solution: Keep your cards with their icon but write the years of experience you have with these technologies. Sort all cards (Language / Framework / DBs / Dev Tools) or (Frontend / Backend / DBs / Dev Tools).
Just my two cents :)
Thanks for the suggestion. yes rating system is subjective and I've tried to keep it out of it as much as possible from percentages to star system. I'll try to come up with some more define output which depicts near real picture. And yes sorting the skills into categories is a good idea will try to put it in next version. Cheers.
It's extremely subjective. What does it mean to be an expert at CSS? Or Angular? I guess you could compile some sort of checklist for each item on your tech stack, but then again, everyone would come up with something different - there's no way to compare you against someone else based on that.
It's much better to "Used technology X for Y years at company Z". Link to these projects you worked on (if possible).