Votre application Angular n’a jamais été aussi élaborée qu’aujourd’hui, et voilà que le framework est une nouvelle fois mis à jour. Mais ne vous inquiétez pas, la version Release Candidate 5 d’Angular 2 a été conçue spécialement pour vous laisser le temps d’effectuer une migration rapide, souple et sans changements radicaux. Vous aurez le temps de vous débarrasser de vos morceaux de code obsolètes avant de voir arriver la version suivante. Suivez ces 5 étapes et vous serez à jour en quelques minutes.
1. Démarrer la mise à jour
Si vous utilisez npm, vous devriez être capable de mettre à jour votre fichier package.json pour ensuite lancer la commande npm install dans votre projet. Il est également possible de lancer directement une commande que voici :
npm install @angular/{core,common,compiler,platform-browser,platform-browser-dynamic} --save
Répétez la même opération pour les librairies optionnelles :
npm install @angular/router
npm install @angular/forms
npm install @angular2–material/{core,button,card,…}@latest
2. Créez un NgModule
Les Modules (ou NgModules) sont la grande nouveauté d’Angular 2. Le concept de Module est accompagné d’un nouveau décorateur : @NgModule.
Le décorateur @NgModule vous permettra d’ajouter des métadonnées au compiler de l’application pour vous éviter de répéter le même code encore et encore dans chacun de vos composants, directives ou pipes.
Créez un fichier app.module.ts et spécifiez dans votre code le composant principal de votre application, comme ceci :
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
bootstrap: [AppComponent],
})
export class AppModule {}
3. Mettez à jour le bootstrap de l’application
Dans votre fichier main.ts, remplacez la fonction bootstrap par bootstrapModule pour mettre à profit votre premier NgModule, comme ceci :
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
4. Importez vos librairies dans votre nouveau NgModule
Supprimez les providers d’Angular et de toute librairie tierce de votre composant principal (précisés par la métadonnée providers du décorateur @Component) et passez aux imports de NgModule comme dans cet exemple :
imports: [ BrowserModule, // Router RouterModule.forRoot(config), // Forms FormsModule, // Material Design MdSlideToggleModule, MdButtonModule, MdToolbarModule, MdCardModule, MdInputModule, ],
5. Faites du nettoyage
Comme précisé au début de l’article, la RC5 vous permettra d’effectuer une migration en toute sérénité. Même sans aucun changement, votre projet continuera de fonctionner comme avant. Angular 2 se chargera de simuler un NgModule jusqu’à ce que vous le créiez vous-même.
Mais faites attention, car cette fonctionnalité disparaîtra immédiatement dans la version finale d’Angular 2. Préparez-vous bien et soyez sûrs de déclarer tous vos composants, directives et pipes dans des NgModules, car toutes les classes, méthodes et propriétés obsolètes seront supprimées dans la prochaine RC.
POUR ALLER PLUS LOIN
Vous souhaitez profiter pleinement de la puissance d’Angular 2, créer des applications Web de grande envergure ou même des applications mobiles avec Ionic 6 ?
Ambient IT propose une formation sur 3 jours pour former vos équipes sur toutes les subtilités de ce framework.
Vous pouvez retrouver un panorama des meilleures méthodes pour maitriser Angular dans notre article comment se former à Angular.
