Votre application Angular 2 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

1
package.json 

pour ensuite lancer la commande

1
npm install

dans votre projet. Il est également possible de lancer directement une commande que voici :

1
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 @angular2material/{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 :

1
@NgModule

.

Le décorateur

1
@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

1
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

1
main.ts

, remplacez la fonction

1
bootstrap

par

1
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

1
providers

d’Angular et de toute librairie tierce de votre composant principal (précisés par la métadonnée

1
providers

du décorateur

1
@Component

) et passez aux

1
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 2 ?

Ambient IT propose une formation sur 3 jours pour former vos équipes sur toutes les subtilités de ce framework.

UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?

Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.

ILS SE SONT FORMÉS CHEZ NOUS

partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp
partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp