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.6 (6 décembre 2017)

PWA : service worker final

Angular 5 avait rendu disponible en version finale le package service-worker qui permet de réaliser une Progressive Web App, et le support est désormais direct dans le CLI. Il faut l’anticiper à la création de l’application :

ng new myapp --service-worker

Pour intégrer les service workers à une application existante, un nouveau chapitre dédié a été ajouté dans la documentation officielle.

Attention : si vous utilisiez déjà la version beta en production, il faut faire en sorte d’invalider le précédent service worker.

Universal

Pour faire toute la configuration d’Universal côté front, il suffit maintenant de faire :

ng g universal chooseaspecificappnameforuniversal

Pour le côté serveur, vous trouverez un complément d’information dans un billet de votre formateur préféré sur Medium.


Angular Material 5.0 (6 décembre 2017)

Après de longs mois d’attente, Material est enfin disponible en version stable. Pour le mettre à jour :

npm install @angular/{cdk,material}@5

Changement du préfixe Md > Mat

Le préfixe md est 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

Par ailleurs, le composant <md-input-container> devient <mat-form-field>.

Flex Layout

Malheureusement, Flex Layout, toujours en beta, n’a pas suivi Material, et est particulièrement instable. Nous avons décidé d’arrêter d’utiliser et de suivre ce module pour l’instant. L’équivalent en CSS est tout aussi efficace.


Angular 5.1 (6 décembre 2017)

Angular 5.1 est disponible !

TypeScript 2.5

TypeScript 2.4 est toujours supporté, mais vous pouvez maintenant mettre à jour vers TS 2.5 :

npm install typescript@2.5 -D

Pensez ensuite à bloquer TypeScript en version mineure dans le package.json : ~2.5.3.

Vous aurez pour l’instant un message d’avertissement sur la version de TypeScript. C’est une erreur du CLI, cela fonctionne bien, un PR de votre formateur préféré est en cours pour corriger cela.


Angular 5.0 (1er novembre 2017)

Angular 5 est disponible !

Mise à jour des dépendances

Pour le mettre à jour :

npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router}@5 rxjs@5.5

Et :

npm install @angular/{compiler-cli,language-service}@5 codelyzer@4 typescript@2.4 -D

Pensez ensuite à bloquer TypeScript en version mineure dans le package.json : ~2.4.2.

Rétrocompatibilité

Et on ne vous a pas menti quand on vous disait de ne pas vous inquiéter : l’application que nous avions réalisée en formation est directement compatible, il n’y a rien à changer !

Seuls des détails sur des points avancés ont pu changer (notamment l’usage de différentes langues pour les filtres de dates). Une aide à la migration est disponible ici.

Il y a bien sûr quelques nouveautés, mais qui sont facultatives.

RxJS 5.5 : lettable operators

Vous vous souvenez que les imports des opérateurs RxJS étaient laborieux ? L’ancien système fonctionne toujours, mais vous pouvez maintenant utiliser une meilleure syntaxe avec les lettable operators.

AOT en développement

Vous ne voulez pas avoir de surprise lors du passage en production ? La compilation AOT peut désormais être active dès la phase de développement. Modifiez simplement votre script npm start en ng serve --aot.


Angular CLI 1.5 (1er novembre 2017)

Build optimizer

Les optimisations avancées pour le build de production sont maintenant activées par défaut. Vous pouvez donc raccourcir votre script npm de build à ng build --prod.

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


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.

 


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 !

Angular CLI 1.3 (10 août 2017)

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.

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.

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 !