Angular changelog

Votre formation Angular est terminée, mais le framework continue de se mettre à jour, à un rythme assez soutenu. Pour vous accompagner, lorsque de nouvelles versions d’Angular sont disponibles, nous ajoutons dans cette page ce qui a changé par rapport à ce que nous avions vu en formation.


Mettre à jour Angular

Pour mettre à jour vos dépendances, sauf indication contraire, il suffit de lancer :

npm update

Pour le CLI, n’oubliez pas d’également mettre à jour la version globale :

npm install @angular/cli -g

Notez qu’étant donné la complexité des dépendances du CLI, il peut arriver qu’une mise à jour directe crée des problèmes lorsque vous allez ensuite lancer vos commandes habituelles. Si c’est le cas, supprimez votre node_modules et le package-lock.json, et relancer un npm install.


Angular CLI 1.4.8 (18 octobre 2017)

Options par défaut

Grâce au PR de votre formateur préféré, les options que vous choisissez lors de la création de votre application avec ng new (comme inline-templateskip-tests,…) sont désormais automatiquement enregistrées comme options par défaut dans .angular-cli.json. Plus besoin de les ajouter manuellement, et les commandes de génération les prendront donc en compte.

Outils de lint

Vous pouvez également mettre à jour vos outils de lint :

npm install tslint@5.7 codelyzer@3.2 -D

Puis dans le package.json, bloquez ces dépendances en mises à jour patch avec tslint: "~5.7.0" et codelyzer: "~3.2.1".


RxJS 5.5 (18 octobre 2017)

Vous pouvez mettre à jour RxJS sans souci, mais n’utilisez pas les nouveaux lettable operators pour l’instant. Ils nécessitent TypeScript 2.4 minimum, et Angular 4 est seulement compatible avec TypeScript 2.3. Il faut donc attendre Angular 5 pour les utiliser, nous vous en reparlerons à ce moment-là.


Material beta 12 (5 octobre 2017)

Pour mettre à jour Material :

npm install @angular/{cdk,material}@2.0.0-beta.12 --save-exact

Le préfixe md fonctionne encore mais est déprécié et remplacé par mat. L’outil Material Prefix Updater est fourni pour faciliter le refactoring. Par exemple :

  • modules : MdInputModule devient MatInputModule
  • composants : <md-card> devient <mat-card>
  • directives : mdInput devient matInput

Angular 4.4 est requis.


Angular 4.4 (15 septembre 2017)

Pas de changement.


Angular CLI 1.4 (7 septembre 2017)

Pas de changement.


Visual Studio Code 1.16 (1er septembre 2017)

La mise à jour est automatique.

Deux problèmes importants liés au quick fix d’import automatique sont réglés :

  • les bons guillemets sont utilisés !
  • les bons chemins sont proposés !

Material beta 10 (29 août 2017)

Pour mettre à jour Material :

npm install @angular/{cdk,material}@2.0.0-beta.10 --save-exact

Changement pour les champs des formulaires : le composant <md-input-container> devient <md-form-field>.


Flex Layout beta 9 (22 août 2017)

Pour mettre à jour Flex Layout :

npm install @angular/flex-layout@2.0.0-beta.9 --save-exact

L’API est légèrement modifiée : le sens d’affichage et le retour à la ligne sont directement gérés dans l’attribut fxLayout. C’est plus cohérent avec le CSS3.


Angular CLI 1.3 (10 août 2017)

Build optimizer

Le CLI a ajouté une couche d’optimisation pour la production. Pour l’activer, il suffit d’ajouter dans votre script npm :

Gain avec notre application : poids des fichiers diminué de 35% environ !

Note : le CLI a fait le choix avec cette option de ne plus séparer le bundle vendor.js (qui contient Angular) et le bundle main.js (qui contient votre code), car cela permettrait de réduire la taille totale des fichiers. Cela ne se vérifie pas avec notre application (le poids final est strictement identique dans les deux situations), et il n’y a pas que le poids final qui compte (la gestion du cache est aussi importante). Nous vous invitons donc à continuer à séparer le bundle vendor.js :

Build Universal

Enfin ! Vous allez pouvoir aller plus loin que la démo que nous faisions en formation et activer le server-side rendering sur l’application que nous avons réalisée. Toutes les explications ici.

Deux précisions pour que cela fonctionne :

  • déplacer l’import de hammerjs précédemment dans AppModule vers main.ts
  • il faut mettre à jour Flex Layout : npm install @angular/flex-layout@2.0.0-beta.9 --save-exact

Configuration du proxy

En développement, la configuration du proxy est facilité. Au lieu de devoir indiquer l’option --proxy-config dans chaque commande ng ou npm qui en a besoin (même si cela est toujours possible), vous pouvez l’indiquer une bonne fois pour toutes dans .angular-cli.json :


Angular 4.3 (14 juillet 2017)

Nouvelle API HttpClient

Les requêtes HTTP sont grandement simplifiées grâce à une toute nouvelle API ! L’ancienne reste disponible mais est dépréciée à partir d’Angular 5.

Il faut d’abord importer un module différent dans votre AppModule ou CoreModule :

Notez que l’API se trouve dans un package différent. Si vous utilisez Material, vous pouvez enlever l’import de l’ancien HttpModule, mais laissez le package @angular/http dans votre node_modules pour l’instant (un ticket a été ouvert par notre formateur). Vous pourrez à terme le supprimer complètement.

Les requêtes HTTP sont maintenant beaucoup plus simples :

Avantages :

  • JSON par défaut, plus besoin de transformer le résultat !
  • typage plus simple et plus efficace,
  • en conséquence, plus besoin des imports de RxJS !
  • et d’autres nouveautés à découvrir dans la documentation.

Seul bémol : votre API doit renvoyer le résultat final. Si vous souhaitez la normaliser en renvoyant des résultats encapsulés (par exemple dans { data: {} }), comme nous l’avions fait en formation, il faut malgré tout faire un map().

Dernier avantage et non des moindres : vous aviez souffert de tester des services qui font des requêtes HTTP ? La simulation des requêtes est désormais plus simple :

Parlez de notre formation Angular autour de vous !