Update to Angular 9 With Envy Compiler

Th3CracKed — Sun, 29 Mar 2020 10:07:20 +0000

In this article I don't want to focus on the new features of angular 9 and the new compiler, but instead give a quick guide of how to update from Angular 8 to Angular 9.

Before updating :

Make sure you have tslib installed: npm install tslib --save

During Update :

'ng update' and follow the instructions.
Angular will automatically change :

The @angular/material imports, to import deeply from the specific component.
String imports to the new import(), for lazy loaded modules via the router.

Examples :

This is no longer working :

import {MatTableModule} from '@angular/material';

Instead :

import {MatTableModule} from '@angular/material/table';

This is no longer working :

const routes: Routes = [{
  path: 'lazy',
  // The following string syntax for loadChildren is deprecated
  loadChildren: './lazy/lazy.module#LazyModule'
}];

Instead :

const routes: Routes = [{
  path: 'lazy',
  // The new import() syntax
  loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
}];

After the update :

You can use the search feature of your code Editor to search for 'entryComponents' and remove all results.
'ANALYZE_FOR_ENTRY_COMPONENTS' and remove all results

RXJS :
You should not use internal operators in the new version of Rxjs.
This is no longer working :

import { Subscription } from 'rxjs/internal/Subscription';

Instead :

import { Subscription } from 'rxjs';

you can avoid imports changes by doing npm install --save rxjs-compat which is not recommended since Rxjs made the changes to reduce the bundle size of applcations.

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

Search for 'TestBed.get' replace it with 'TestBed.inject' , TestBed.inject is the new method for testing that add type safety.

Third-party dependencies :
You should check the changelogs of every dependency to know if it's compatible with angular 9 and do the update with ng update dependencyName.
Check github issues, sometimes usefull informations are found there, or open a new issue

TypeScript :
Angular 9 is using typescript 3.7 which has a more robust type checking system, you may encounter some errors due to that, try to fix them or opt out by adding the 'any' keyword

For Dynamic query flags in @ViewChild() and @ContentChild(), Angular 9 consider the default value to be false, you can search ', {static: false}' and remove it
Example:
Replace

@ViewChild('foo', {static: false}) foo: ElementRef;

With

@ViewChild('foo') foo: ElementRef;

If you didn't migrate static query for angular 9 you may want to check how to do it.

If you have any error put it in the comment, I may be able to help.
Also If you encountered an error, and you found a solution for it please share in the comment so I can give a more detailed guide

Ressources:
https://update.angular.io/#8.0:9.0l3
https://angular.io/guide/updating-to-version-9#new-breaking-changes
https://academind.com/learn/javascript/rxjs-6-what-changed/
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-6.html
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html
https://angular.io/guide/updating-to-version-9#automated-migrations-for-version-9

DEV Community: Th3CracKed

Update to Angular 9 With Envy Compiler

Before updating :

During Update :

After the update :