Angular update V8 to V11

This is what the Angular official update says -
Warning: We do not recommend moving across multiple major versions.

But then it’s been some time, this is a relatively simple project and I am feeling adventurous.

Apparently, the steps will first take you to 9, and then from 9 to 11. Since 9 introduces breaking changes.

Project — https://github.com/minus1by12Dev/project1043 ( Finding Falcone. ( GeekTrust Challenge — 2019 — UI )

Version — 8 : master
Version — 11: angular-11-update-branch

Official Angular Update Support https://update.angular.io/

If you go ahead and choose version 8 ( From ) and 11 ( To ) , the URL updates itself to https://update.angular.io/?l=2&v=8.1-11.0

Step 1

Git clone the master branch of the project, create a new branch from master — git checkout -b angular-11-update-branchand run npm install

That could makes this branch dirty and so must commit changes, before proceeding.

Step 2

Run ng update @angular/core@8 @angular/cli@8 in your workspace directory to update to the latest 8.x version of @angular/core and @angular/cli and commit these changes.

Step 3

You can optionally pass the --create-commits (or -C) flag to ng update commands to create a git commit per individual migration.

Ideally I should be doing this ( but remember — adventurous ), I will skip this.
Do not ever do this for a Client Facing App.

Step 4

Run ng update @angular/core@9 @angular/cli@9 which should bring you to version 9 of Angular.

Changes — at a glance

angular.json

1. aot has been set to true, which was initially false ( in Angular 8 )
2. A new section has been added inside budgets. My guess, no component css file should exceed 6Kb.

{
  "type": "anyComponentStyle",
  "maximumWarning": "6kb"
}

Didn’t notice anything else.

Step 5

If your project depends on other Angular libraries, we recommend that you consider updating to their latest version. In some cases this update might be required in order to resolve API incompatibilities. Consult ng update or npm outdated to learn about your outdated libraries.

Running npm outdated did not result in any discrepancies.

Step 6

If you use ngForm element selector to create Angular Forms, you should instead use ng-form.

This project does not have any form elements — the PDF attached used dropdowns, but with the improved UX we removed that.
If i had used forms, this would be something to check and replace.

ngForm is used for Building a template-driven form. But then i am more inclined towards using Reactive Forms.

Angular Forms Guide: Template Driven and Reactive Forms

Step 7

With Angular 9 Ivy is now the default rendering engine, for any compatibility problems that might arise, read the Ivy compatibility guide.

From the guide — the thing that i might need to use is —

If you’re seeing errors, first temporarily turn off Ivy in your tsconfig.json and re-start your app.
In version 9, Ivy is the default. For compatibility with current workflows during the update process, you can choose to opt out of Ivy and continue using the previous compiler, View Engine.

Well, I did try serving my app, and it is running fine.

Step 8

Internationalization has not been used in this project.

Step 9

If you have specified any entryComponents in your NgModules or had any uses of ANALYZE_FOR_ENTRY_COMPONENTS, you can remove them. They are no longer required with the Ivy compiler and runtime.

This is something cool. entryComponents always had me confused. But yeah no dialogs are present in this project.

Step 10

If you use TestBed.get, you should instead use TestBed.inject. This new method has the same behavior, but is type safe.

I would hate to say this, but there is no Unit Testing.

Mental note — add it later after the update. But I would probably use Jest.

Version 8–9 is now done. On to V10.

Step 11

Run ng update @angular/core @angular/cli which should bring you to version 10 of Angular.

But that failed.

Fetching dependency metadata from registry...
Package "@angular/material" has an incompatible peer dependency to "@angular/animations" (requires "^8.0.0 || ^9.0.0-0" (extended), would install "11.0.2").
Package "@angular/cdk" has an incompatible peer dependency to "@angular/common" (requires "^8.0.0 || ^9.0.0-0" (extended), would install "11.0.2").
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.0.2").
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.0.2").
Package "@angular/material" has an incompatible peer dependency to "@angular/forms" (requires "^8.0.0 || ^9.0.0-0" (extended), would install "11.0.2").
Package "ngx-toastr" has an incompatible peer dependency to "@angular/platform-browser" (requires ">=6.0.0 <9.0.0" (extended), would install "11.0.2").
× Migration failed: Incompatible peer dependencies found.

You can use the ‘ — force’ option to ignore incompatible peer dependencies and instead address these warnings later.

Let’s try with ‘ — force’. The warnings stay, but the process is now going through.

Ohh Wait!! — even though the documentation said, i will be upgraded to 10, I have actually been upgraded to 11.

Upgrade to 11.0 complete

and git status reveals some major changes.

1. “extractCss”: true — option has been removed, from within angular.json. I wonder what this does. Will need to run a build.
2. imports: [RouterModule.forRoot(routes, { relativeLinkResolution: ‘legacy’ })] inside the routing module.
   https://angular.io/api/router/ExtraOptions#relativeLinkResolution
   Could be affecting nested / relative routing — doesn’t affect me though
3. In the Angular Router’s routerLink, preserveQueryParams has been removed, use queryParamsHandling="preserve" instead.
4. And this is something i would need to check, but more for a newer project

When generating new projects, you will be asked if you want to enable strict mode. This will configure TypeScript and the Angular compiler for stricter type checking, and apply smaller bundle budgets by default. You can use the --strict=true or --strict=false to skip the prompt.

Well that completes the Update.

I tried serving again and the bundle information certainly has improved.
A bit more beautiful, well formatted. and everything seems to be working fine. Whew.!!!

I would read up more on the Angular — 10 and 11 updates. See what has really changed, and try those out.

All changes have been committed and pushed to angular-11-update-branch

Thanks for reading