Angular 5, quoi de neuf ?
Après une sortie au mois de mars 2017 d’Angular 4,
il est déjà temps d’accueillir Angular 5.
Ecrit par Vivien
Après une sortie au mois de mars 2017 d’Angular 4, il est déjà temps d’accueillir Angular 5 en attendant Angular 6 prévu pour mars 2018. Pour ceux qui l’ignore, Angular c’est le nom d’un outil mis à disposition par Google qui sert à donner du bonheur aux développeurs d’application javascript. Du bonheur car l’outil est complet, la communauté nombreuse et qu’il nous permet de nous concentrer avec plaisir sur les problématiques client.
Parmi tous les changements, nous vous invitons à découvrir les plus significatifs.
Optimisation du build
A partir de la version 5.0.0, les builds de production créés avec Angular CLI appliqueront l’optimisation par défaut.
L’outil d’optimisation inclus dans Angular CLI a deux objectifs principaux. Le premier est d’améliorer le tree shaking (suppression des parties de l’application qui ne sont pas nécessaires). Le second est de supprimer les décorateurs Angular dont seul le compilateur a besoin.
Chacune de ces actions réduit la taille du build et accélère le démarrage des applications.
Angular Universal State Transfert API et DOM Support
Petit rappel, Angular Universal permet d’avoir un pré-rendu coté serveur des applications Angular, ce qui permet de prendre en compte les moteurs de recherche qui ne gèrent pas javascript.
Avec Angular 5.0.0, il est plus facile de partager des données entre la version serveur et la version client. Ce qui permet de ne pas effectuer d’appel HTTP en double pour récupérer des données lorsque la version client reprend la main.
L’équipe d’Angular Universal a aussi ajouté Domino à la platform-server ce qui fournit plus de manipulations du DOM en contexte serveur, améliorant ainsi le support des librairies tierces.
Amélioration du compilateur
- Amélioration du build incrémental, ce qui permet d’accélérer les rebuilds notamment pour les builds de production et ceux avec AOT (Ahead-of-Time compilation).
- Possibilité de supprimer les whitespaces, qui jusque là étaient conservés dans les templates. Il est possible de configurer ça soit au niveau du décorateur de chaque composant soit au niveau global via le fichier tsconfig.json. Le comportement par défaut est « true », mais il est envisagé que dans le futur ce soit « false ».
Au niveau composant :
@Component({
templateUrl: 'about.component.html'
preserveWhitespaces: false
})
export class AboutComponent {}
Dans le fichier tsconfig.json :
{
"extends": "../tsconfig.json"
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "es2015",
"types": []
},
"angularCompilerOptions": {
"preserveWhitespaces": false
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
Nouveaux pipes pour les nombres, les dates et les devises
Ce qui permet un comportement plus homogène à travers les navigateurs et d’éliminer le besoin de polyfills pour l’i18n.
Remplacement du ReflectiveInjector par le StaticInjector
Là encore cela permet d’éliminer encore plus de polyfills, réduisant la taille des applications pour la plupart des développeurs.
Avant
ReflectiveInjector.resolveAndCreate(providers);
Après
Injector.create(providers);
Amélioration de la vitesse de Zone
Zone est plus rapide par défaut et il est maintenant possible de bypasser zone complètement pour les applications qui ont besoin de performances.
Pour bypasser zone, voici la marche à suivre :
platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'}).then( ref => {} );
exportAs
Nous pouvons à présent donner plusieurs noms à nos composants et directives, ce qui est très pratique en cas de renommage, cela évite de casser le code existant.
Cette possibilité a été utilisée dans le cas de changement de préfixe d’Angular Material.
Example :
@Component({
moduleId: module.id,
selector: 'a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]',
exportAs: 'matButton, matAnchor',
.
.
.
})
HttpClient
Introduit en version 4.3 et très bien accueilli par les développeurs, il remplace l’ancien HttpModule.
Ajout d’updateOn Blur / Submit dans Angular Form
Il est maintenant possible de déclencher la validation des champs et l’update des valeurs sur l’évènement blur ou sur le submit d’un formulaire plutôt que sur chaque évènement lié à un input. C’est très utile en cas de validation côté serveur ou si des calculs coûteux sont déclenchés par la validation ou l’update des champs, cela permet de les lancer moins souvent.
RxJS 5.5
Pour être très bref, cette version améliore le système d’import.
Au lieu de :
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
On peut maintenant :
import { map, filter } from 'rxjs/operators';
Nouveaux événements pour le Router
Les nouveaux évènements peuvent être utilisés pour contrôler l’affichage d’un spinner ou pour mesurer les performances d’un resolver.
Voici un exemple d’utilisation pour démarrer et arrêter un spinner :
class MyComponent {
constructor(public router: Router, spinner: Spinner) {
router.events.subscribe(e => {
if (e instanceof ChildActivationStart) {
spinner.start(e.route);
} else if (e instanceof ChildActivationEnd) {
spinner.end(e.route);
}
});
}
}