AngularJS encore là ? Ce que votre compilateur ne voit pas

La partie 4 s'achevait sur une suppression sans risque : la route bascule, la lib legacy disparaît, et si vous supprimez trop tôt, le compilateur vous arrête avec une seule erreur. La partie 5 a figé l'ancien écran avec des tests qui ouvrent son URL. Les deux filets ont un trou.

J'ai mené cette migration plus d'une fois, comme lead, comme architecte et comme ingénieur. Cette partie reprend ce que ce code m'a appris, reconstruit dans le dépôt de démonstration pour que vous puissiez l'exécuter.

Deux frameworks, un seul écran

Le dépôt de démonstration a un coin hybride. L'écran des bénéficiaires est en AngularJS 1.8, monté dans l'application Angular 22 avec @angular/upgrade. Activez le bouton « Framework map » dans la démo en ligne et vous le voyez : un cadre orange AngularJS dans la coque Angular turquoise, et dans le cadre orange, de petits cadres turquoise. Ce sont des composants Angular qui vivent dans un template AngularJS.

Cliquer pour agrandir

C'est ainsi que grandit un vrai hybride. Les nouveaux composants Angular sont utilisés par les anciens écrans avant que ceux-ci ne disparaissent :

// libs/angularjs/beneficiaries/src/lib/beneficiaries.module.ts
.directive('atlasAmount', downgradeComponent({ component: Amount }))
.factory('accountsStore', downgradeInjectable(AccountsStore))

Et quelque part dans une chaîne de template AngularJS : <atlas-amount [value]="b.sentMad">.

Le build vert qui ment

Demandez à un agent de faire le ménage : il cherche Amount avec grep. Il trouve l'import ci-dessus, peut-être quelques templates Angular, et en conclut qu'il connaît tous ceux qui l'utilisent. C'est faux. Le template AngularJS emploie une balise en kebab-case à l'intérieur d'une chaîne, et le service est injecté par un nom entre guillemets. Aucun import TypeScript ne pointe vers l'un ou l'autre.

J'ai fait l'essai dans le dépôt de démonstration. Renommez l'enregistrement de 'atlasAmount' en 'atlasMoney', le genre de nettoyage qu'un agent fait sans demander. typecheck passe. lint:arch passe. Le build de production passe. À l'écran, tous les montants du tableau sont vides. AngularJS traite <atlas-amount> comme un élément inconnu et n'affiche rien, sans la moindre erreur.

En Angular pur, la même erreur donne un build rouge. Dans un hybride, c'est un trou silencieux dans un écran bancaire.

Étape zéro : recenser les usages avant le plan

Avant tout plan de migration, confiez donc à l'agent une tâche qu'il fait bien : lister chaque passerelle et tous ceux qui l'empruntent.

Ce tableau entre dans la pull request avant tout code. Chaque ligne est un usage que le compilateur ne voit pas, et chaque renommage ou changement d'input sur l'une d'elles exige un test qui affiche l'écran AngularJS. Dans le dépôt de démonstration, une spec hybride détecte le renommage ci-dessus : expected [ '', '' ] to deeply equal [ '-3 000,00 MAD', '-250,00 MAD' ].

Découper avant de porter

Deuxième leçon du vieux code AngularJS : les écrans sont gros. Dans la démo, le service des bénéficiaires mélange quatre rôles dans un seul fichier : la lecture du store, les règles (ce RIB est-il valide, ce bénéficiaire est-il nouveau), le formatage, et du travail sur le DOM comme donner le focus à un champ. Le controller porte cinq responsabilités. C'est dix ans de fonctionnalités posées là où il restait de la place, et c'est le cas normal.

Portez ce code tel quel, et vous obtenez le même nœud en syntaxe Angular. Le fichier de tâche demande donc d'abord le découpage : les règles deviennent des fonctions pures avec leur propre spec, le formatage vient de la lib de domaine qui l'a déjà (l'ancien service avait sa propre copie du formateur de RIB, et son total d'en-tête avait divergé de formatMad), le travail sur le DOM passe dans le template, et le store est lu directement. Ensuite : construire à côté, basculer la route, supprimer en dernier, exactement comme dans la partie 4.

Une ligne pour Angular 22

Si votre app est zoneless, comme les nouvelles applications Angular le sont par défaut, UpgradeModule refuse de démarrer : NG0908: In this configuration Angular requires Zone.js. Inutile de remettre zone.js. Fournissez la détection de changements zoneless dans le module qui importe UpgradeModule, et AngularJS reçoit un $digest après chaque tick Angular :

@NgModule({ imports: [UpgradeModule], providers: [provideZonelessChangeDetection()] })
export class BeneficiariesUpgradeModule {}

Dès lundi

• App hybride ? Demandez à l'agent de lister chaque downgradeComponent et downgradeInjectable, avec leurs utilisateurs AngularJS, avant qu'il ne planifie quoi que ce soit.
• Gardez au moins un test qui affiche chaque écran AngularJS. C'est la seule vérification qui lit les chaînes de template.
• Découpez le controller et le service surdimensionnés avant de les porter.

Exercice : le module 2b du dépôt de démonstration, avec le coin hybride, la « Framework map » et la tâche 006. Départ : git switch -c m2b/you main. Référence : origin/track1/m2b-angularjs-solution.

Jusqu'ici, chaque étape de ce parcours se termine par des tests écrits par l'agent. La dernière partie explique comment les lire, et ce que toute la migration a donné au bout du compte.

Parcours 1, partie 6 de la série gratuite qui accompagne le workshop Vite et sûr : l'IA dans votre code Angular.