L'équipe Angular de Google annonce la version 13 d'Angular, le framework open source basé sur TypeScript

**Bruno** · 05/11/2021, 16h15

L'équipe Angular de Google annonce la version 13 d'Angular, le framework open source basé sur TypeScript,
elle améliore le CLI d'Angular et apporte de nouvelles fonctionnalités

Mark Thompson membre de l'équipe Angular chez Google a annoncé la version 13 d’Angular, le framework open source basé sur TypeScript, elle améliore le service de langue basé sur Ivy, apporte la Transition des anciens identifiants de messages i18n et bien d’autres nouvelles fonctionnalités. « Nous sommes de retour avec une nouvelle version et nous sommes impatients de partager toutes les grandes mises à jour et fonctionnalités qui vous attendent dans la version 13 d’Angular », a déclaré Mark Techson, défenseur des développeurs au sein de l'équipe Angular chez Google.

Nom : AngularB.png
Affichages : 68897
Taille : 6,1 Ko

Notons qu’Angular est un framework d'application web open source basé sur TypeScript, dirigé par l'équipe Angular de Google et par une communauté de particuliers et de sociétés. C’est une réécriture complète de la même équipe qui a construit AngularJS. Angular est utilisé comme frontal de la pile MEAN, composée de la base de données MongoDB, du framework de serveur d'applications Web Express.js, d'Angular lui-même (ou AngularJS) et de l'environnement d'exécution du serveur Node.js. Voici, ci-dessous, les nouveautés apportées par la version 12 d’Angular :

État du moteur de visualisation

View Engine n'est plus disponible dans Angular à partir de la v13. C'est une excellente nouvelle car Angular peut continuer à créer des fonctionnalités basées sur Ivy qui renforcent votre productivité avec la plateforme. La suppression de View Engine signifie également qu'Angular peut réduire sa dépendance à l'égard de ngcc (compilateur de compatibilité Angular) à l'avenir, et les équipes peuvent espérer une compilation plus rapide car les métadonnées et les fichiers de résumé ne sont plus inclus.

Modifications apportées à l'Angular Package Format (APF)

L'Angular Package Format (APF) a été rationalisé et modernisé pour mieux servir les développeurs. Pour rationaliser l'APF dans la v13, nous avons supprimé les anciens formats de sortie, notamment les métadonnées spécifiques au View Engine.

Pour le moderniser, L'équipe Angular a normalisé les formats JS plus modernes tels que ES2020. Les bibliothèques construites avec la dernière version du FPA ne nécessiteront plus l'utilisation de ngcc. Grâce à ces changements, les développeurs de bibliothèques peuvent s'attendre à des paquets plus légers et à une exécution plus rapide.

L'équipe Angular a également mis à jour le FPA pour prendre en charge les exportations de paquets Node. Cela permettra aux développeurs de ne pas s'appuyer par inadvertance sur des API internes susceptibles de changer.

Mises à jour de l'API des composants

Avant les changements apportés dans Angular v13, la création dynamique de composants nécessitait beaucoup de code passe-partout. La nouvelle API supprime la nécessité d'injecter ComponentFactoryResolver dans le constructeur. Ivy crée la possibilité d'instancier le composant avec ViewContainerRef.createComponent sans créer de fabrique associée.

Voici un exemple de création de composants avec les versions précédentes d'Angular :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
@Directive({ … })
export class MyDirective {
    constructor(private viewContainerRef: ViewContainerRef,
                private componentFactoryResolver: 
                        ComponentFactoryResolver) {}
    createMyComponent() {
        const componentFactory = this.componentFactoryResolver.
                             resolveComponentFactory(MyComponent);
 
        this.viewContainerRef.createComponent(componentFactory);
    }
}

Avec la nouvelle API, ce code peut devenir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
@Directive({ … })
export class MyDirective {
    constructor(private viewContainerRef: ViewContainerRef) {}
    createMyComponent() {
        this.viewContainerRef.createComponent(MyComponent);
    }
}

Améliorations apportées au CLI d'Angular

Angular prend désormais en charge l'utilisation du cache de construction persistant par défaut pour les nouveaux projets v13. Les précieux commentaires du RFC Persistent build cache by default ont conduit à la mise à jour de l'outillage, qui se traduit par une amélioration de 68 % de la vitesse de construction et par des options plus ergonomiques. Pour que les projets existants qui ont été mis à niveau vers la v13 puissent activer cette fonctionnalité, les développeurs peuvent ajouter cette configuration à angular.json :

ESBuild voit également quelques améliorations de performance dans cette version ! L'équipe Angular a introduit esbuild, qui fonctionne désormais avec terser pour optimiser les scripts globaux. En outre, esbuild prend en charge les cartes de source CSS et peut optimiser le CSS global, ainsi que toutes les feuilles de style.

Modifications du framework et mises à jour des dépendances

Angular v13 présente également des mises à jour utiles et des modifications importantes. Tout d'abord, RxJS 7.4 est désormais la valeur par défaut pour les applications créées avec ng new. Les applications existantes utilisant RxJS v6.x devront être mises à jour manuellement à l'aide de la commande npm install rxjs@7.4. la prise en charge de TypeScript 4.4 est également désormais assurée.

État du moteur de visualisation

View Engine n'est plus disponible dans Angular à partir de la v13. Angular peut continuer à créer des fonctionnalités basées sur Ivy qui renforcent la productivité avec la plateforme. La suppression de View Engine signifie également qu'Angular peut réduire sa dépendance à l'égard de ngcc (compilateur de compatibilité Angular) à l'avenir, et les équipes peuvent espérer une compilation plus rapide car les métadonnées et les fichiers de résumé ne sont plus inclus.

Améliorations aux tests Angular

Nous avons apporté d'importantes améliorations à TestBed qui fait désormais un meilleur travail de démantèlement des modules et environnements de test après chaque test. Le DOM est maintenant nettoyé après chaque test et les développeurs peuvent s'attendre à des tests plus rapides, moins gourmands en mémoire, moins interdépendants et plus optimisés. Cette fonctionnalité, qui était optionnelle depuis la version 12.1.0, sera désormais proposée par défaut tout en restant personnalisable. Voici comment : elle peut être configurée pour l'ensemble de la suite de tests via la méthode TestBed.initTestEnvironment :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
beforeEach(() => {
    TestBed.resetTestEnvironment();
    TestBed.initTestEnvironment(
        BrowserDynamicTestingModule,
        platformBrowserDynamicTesting(),
        {
            teardown: { destroyAfterEach: true }
        }
    );
});

Ou bien il peut être configuré par module en mettant à jour la méthode TestBed.configureTestingModule :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
beforeEach(() => {
    TestBed.resetTestEnvironment();
    ...
    TestBed.configureTestingModule({
        declarations: [TestComp],
        teardown: { destroyAfterEach: true }
    });
});

Ou bien il peut être configuré par module en mettant à jour la méthode TestBed.configureTestingModule :

Tout sur les composants

L'accessibilité (a11y) doit être le fondement de tout ce que nous construisons au sein et en dehors de la communauté Angular. Nous prenons cette responsabilité au sérieux, et le travail que nous avons effectué a permis d'apporter des améliorations et des modifications significatives aux composants Angular Material. Tous les composants basés sur MDC ont été évalués pour répondre à des normes a11y élevées dans des domaines tels que le contraste, les cibles tactiles, ARIA, etc.
Pour avoir une meilleure idée de l'impact de ces changements sur les composants, regardez les ajustements que nous avons apportés aux tailles des cibles tactiles pour des composants tels que les cases à cocher et les boutons radio.

Source : Angular

Et vous ?

Avez-vous une expérience avec Angular ?

Que pensez-vous de Angular ?

Quelle amélioration vous intéresse le plus sur cette version ?

Voir aussi :

Angular 10 est disponible, plus léger et n'inclut plus les bundles ESM5 ou FESM5, une version majeure qui couvre toute la plateforme, y compris le framework, Angular Material et CLI

Angular 10, la prochaine version majeure du framework TypeScript : correction de bogues, amélioration de performances et autres

Angular 9.0 est disponible. Par défaut, toutes les applications vont utiliser le compilateur et le runtime Ivy. L'équipe explique les avantages apportés par ce moteur de rendu

L'équipe Angular de Google annonce la version 12 d'Angular, le framework open source basé sur TypeScript, elle améliore le service de langue basé sur Ivy et apporte de nouvelles fonctionnalités