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.

2017-08-10 – Angular CLI 1.3

Pour mettre à jour le CLI :

npm install @angular/cli -g

Et dans votre projet :

npm install @angular/cli@1.3.0

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.

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.

Notez que conformément aux indications, vous devrez temporairement commenter l’import de FlexLayoutModule dans le SharedModule, et déplacer l’import de hammerjs dans le main.ts.

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 :

2017-07-14 – Angular 4.3

Nouvelle API HttpClient

Les requêtes HTTP sont grandement simplifiées grâce à une toute nouvelle API ! L’ancienne reste disponible (pour l’instant en tout cas, il ne serait pas surprenant qu’elle finisse par être dépréciée).

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(), et cela complique le typage.

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

Parlez de notre formation Angular autour de vous !