Passer d’une version à l’autre d’Angular–Suivez le guide–Une astuce par jour–Angular

Lorsqu’on suit certaines astuces sur stackoverflow, ou bien sur certains sites, ils oublient bien souvent de nous indiquer sur quelle version d’Angular ils proposent la solution.

Un site pour apprendre à migrer d’une version à l’autre

Angular (et donc Google) a pensé à nous !
Ils ont mis en place un site d’aide à la migration, sous forme de checklist pour passer d’une ancienne version à une nouvelle.

Exemple : passer de la v5 à la v7

Prenons l’exemple d’une migration de la v5, où le angular.json n’existe pas encore, et le Injectable n’a pas le Included:’root’ par exemple.

Premier avertissement : Warning: We do not recommend moving across multiple major versions.

Ce changement est risqué … Voyons voir ce qu’il nous propose :

Angular Update Guide | 5.0 -> 7.0 for Advanced Apps

Before Updating

If you import any animations services or tools from @angular/core, you should import them from @angular/animations

Replace ngOutletContext with ngTemplateOutletContext.

Replace CollectionChangeRecord with IterableChangeRecord

Anywhere you use Renderer, now use Renderer2

If you use preserveQueryParams, instead use queryParamsHandling

Switch from HttpModule and the Http service to HttpClientModule and the HttpClientservice. HttpClient simplifies the default ergonomics (You don’t need to map to json anymore) and now supports typed return values and interceptors. Read more on angular.io

If you use DOCUMENT from @angular/platform-browser, you should start to import this from @angular/common

Anywhere you use ReflectiveInjector, now use StaticInjector

Choose a value of off for preserveWhitespaces in your tsconfig.json to gain the benefits of this setting, which was set to off by default in v6.

During the Update

Make sure you are using Node 8 or later

Update your Angular CLI globally and locally, and migrate the configuration to the new angular.json format by running the following:
npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli

Update any scripts you may have in your package.json to use the latest Angular CLI commands. All CLI commands now use two dashes for flags (eg ng build --prod --source-map) to be POSIX compliant.

Update all of your Angular framework packages to v6, and the correct version of RxJS and TypeScript.
ng update @angular/core
After the update, TypeScript and RxJS will more accurately flow types across your application, which may expose existing errors in your application’s typings

In Angular Forms, AbstractControl#statusChanges now emits an event of PENDING when you call AbstractControl#markAsPending. Ensure that if you are filtering or checking events from statusChanges that you account for the new event when calling markAsPending.

If you use totalTime from an AnimationEvent within a disabled Zone, it will no longer report a time of 0. To detect if an animation event is reporting a disabled animation then the event.disabledproperty can be used instead.

ngModelChange is now emitted after the value/validity is updated on its control instead of before to better match expectations. If you rely on the order of these events, you will need to begin tracking the old value in your component.

Use ng update or your normal package manager tools to identify and update other dependencies.

If you have TypeScript configured to be strict (if you have set strict to true in your tsconfig.json file), update your tsconfig.json to disable strictPropertyInitialization or move property initialization from ngOnInit to your constructor. You can learn more about this flag on the TypeScript 2.7 release notes.

Angular now uses TypeScript 3.1, read more about any potential breaking changes

Angular has now added support for Node 10

Update to v7 of the core framework and CLI by running ng update @angular/cli @angular/corein your terminal

After the Update

Remove deprecated RxJS 6 features using rxjs-tslint auto update rules
For most applications this will mean running the following two commands:
npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

Once you and all of your dependencies have updated to RxJS 6, remove rxjs-compat.

If you use the Angular Service worker, migrate any versionedFiles to the files array. The behavior is the same.

Ah oui, ça fait bcp, en effet !