Google a annoncé la disponibilié de Angluar 13. Il s'agit d'un mouture riche pour laquelle Google souligne surtout avoir étendu les fonctionnalités et les optimisations basées sur Ivy.

Pour mémoire Ivy est un nouveau pipeline de rendu et de compilation d'Angular qui vient remplacer le pipeline des premières versions. Nouveau pour Ivy est un terme relatif, puisque ce pipeline est apparu avec Angular 6.0. Mais avec chaque nouvelle version du framework, Ivy gagne en maturité. Ivy a été un effort de plusieurs années de la part de Google pour rendre Angular plus simple, plus rapide et plus facile à entretenir.

En ce qui concerne Angular 13, View Engine n'est plus disponible dans le framework à partir de cette version. C'est, d'après Google, une excellente nouvelle, car Angular peut continuer à créer des fonctionnalités basées sur Ivy qui renforcent votre productivité avec la plate-forme. La suppression de View Engine signifie également qu'Angular peut réduire sa dépendance à l'égard de l'outil de compatibilité ngcc à l'avenir, et les équipes peuvent s'attendre à une compilation plus rapide car les métadonnées et les fichiers de résumé ne sont plus inclus.

Dans la foulée, Angular Package Format (APF) a été rationalisé et modernisé pour mieux servir les développeurs. Pour rationaliser l'APF dans la v13, Google a supprimé les anciens formats de sortie, y compris les métadonnées spécifiques à View Engine.

Ivy permet également d'améliorer la qualité de vie en ce qui concerne la façon dont les développeurs peuvent créer dynamiquement des composants. L'API a maintenant été simplifiée. Avant les changements dans Angular v13, la création dynamique de composants nécessitait beaucoup de code passe-partout.

La nouvelle API supprime le besoin d'injecter ComponentFactoryResolver dans le constructeur. Ivy crée la possibilité d'instancier le composant ViewContainerRef.createComponent sans créer de fabrique (factory) associée.

Voici un exemple de code écrit à l'ancienne :

@Directive({ … })
export class MyDirective {
    constructor(private viewContainerRef: ViewContainerRef,
                private componentFactoryResolver:
                        ComponentFactoryResolver) {}
    createMyComponent() {
        const componentFactory = this.componentFactoryResolver.
                             resolveComponentFactory(MyComponent);

        this.viewContainerRef.createComponent(componentFactory);
    }
}

et la même chose avec Angular 13 :

@Directive({ … })
export class MyDirective {
    constructor(private viewContainerRef: ViewContainerRef) {}
    createMyComponent() {
        this.viewContainerRef.createComponent(MyComponent);
    }
}

A remarquer encore, la suppression de la prise en charge d'IE11, ce qui permet à Angular de tirer parti des fonctionnalités de navigateur modernes telles que les variables CSS et les animations Web via des API Web natives. De plus, les applications seront plus petites et se chargeront plus rapidement car il est possible ainsi de supprimer les polyfills et les chemins de code spécifiques à IE. Cet arrêt de la prise en charge d'IE11 supprime également le besoin de chargement différentiel