DEV Community: Vikram Kadiam

Migrated my Angular portfolio from v7 to v10

Vikram Kadiam — Sat, 12 Dec 2020 04:09:21 +0000

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

How I built my first portfolio website using just Angular

Vikram Kadiam ・ Jul 10 ・ 3 min read

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

KVikram / mybrand

#mybrand is a project that I've embarked on for creating a personal portfolio site showcasing my potential as a promising software architect.

Thanks for reading! Happy coding.. Cheers.

How I built my first portfolio website using just Angular

Vikram Kadiam — Fri, 10 Jul 2020 08:54:09 +0000

Finally after over a month of lost weekends, long evenings and some *&%#@ from my beautiful wife! It's finally ready for everyone's eyes.. My first portfolio website, completely built with #angular and hosted on #netlify.

vikramkadiam.netlify.app

TL;DR - "How did I build?"

Where did it start?

Somewhere around in May 2020, where we were almost two months into COVID-19 lockdown, one day while surfing twitter I came across #100DaysOfCode and saw some amazing stuff developed by programmers across the world.At that very moment I thought why not build something not just for this twitter challenge but for fun and utilise the time I've at my dispose after office hours.

This gave a kick to my long dream of having my own personal site like an online resume or portfolio.Then I started looking for some inspiration, that's when I came across @jcoelho post.

Personal website template - an open source project

José Coelho ・ Dec 31 '19

#javascript #react #node #showdev

This gave me a lot of inspiration in designing layout and concepts around my site.Thanks to Jose.

Another such inspirational site is from @nicolalc, check it here.

How did I design?

The site design & layout is super simple with single page encapsulating all necessary details.

Home banner
About section
Technical skills section
Work Experience section
Blogposts section

Also few little items like Theming, Material design, Mat Icons, Dynamic data from API's etc.,

How did I build?

Agenda was simple, I wanted my app to be responsive(RWD), progressive web app(PWA), material design, lightening fast, user friendly.

I was also strongly determined to build just using Angular framework libraries and strictly no additional(3rd party) libraries for any kind of functionality.Below are the list of things I used for building all kinds of functionalities in my site.



 @angular/cdk                      7.3.7
 @angular/cli                      7.3.10
 @angular/flex-layout              7.0.0-beta.24
 @angular/material                 7.3.7
 @angular/pwa                      0.12.4

P.S - Yes, I could've used Angular 9/10 but when I started building my app I didn't realise which version my local was running until I dived in ;)

The whole data(almost 97%) displayed on the site is dynamic and built on top of JSON schema for resume details.These are fetched via gitconnected.com API.

Blogs are from Wordpress as I used to write blogs there, WP has it's own API to return ngcoderscope.wordpress.com blogposts data.

Performance/Lighthouse score?

Yea like many devs out there, even I was striving for perfect lighthouse score.I've spent most of the last few weeks on tweaking those lighthouse recommendations.As of now the site has below scores.

I used lighthouse-metrics and Google PageSpeed Insights.Both give out different results depending on lighthouse different available versions (5.6/6.0/6.1.0).

lighthouse-metrics - Mobile

PageSpeed Insights

Mobile
Desktop

What's next?

Upgrade from Angular v7 to v10.
Improve site load performance a.k.a Lighthouse-100.
Integrate dev.to posts into blogposts section of the site.
Write more about different components of the site and how I built them.
Fix bugs if any and implement any feedback/suggestions from you guys.

This is it for this post, it already turned out to be a 3-4 min read for you guys :D Let me know what you think about my site and comment your feedback/suggestions/criticism or anything.

vikramkadiam.netlify.app

Are you interested in development journey & process involved in build this Angular app ? DM me @vikramKadiam or Comment below what would you like to know about, I'll include in my next post.Cheers!!

Github repo