
Ca y est, c’est officiel : Angular 13 est sorti !
La release 13 sur github a été créée !
Les nouveautés
Important – IE11 plus supportĂ©
Cette version 13 ne supporte plus IE 11. C’est un point bloquant !
Si vous souhaitez garder ce support, seule solution : rester sur Angular 12 (support prĂ©svu jusqu’Ă fin d’annĂ©e 2022).
RIP ViewEngine
ViewEngine, le moteur de gĂ©nĂ©ration de la vue n’est plus supportĂ©.
Maintenant, c’est Ivy complĂštement.
Cela permet de commencer Ă ĂȘtre moins dĂ©pendant de ngcc. Pour rappel ngcc permet de gĂ©nĂ©rer des composants qui n’ont pas Ă©tĂ© compilĂ©s en Ivy.
C’est une nouvelle Ă©tape dans l’introduction d’Ivy depuis Angular 8.
Rappelons que l’un des buts de la communautĂ© Angular c’est d’arriver à « Ivy everywhere » (Ivy partout).
Changement dans l’APF (Angular Package Format)
Pour continuer dans cette lancée, le format spécifique pour Angular a été améliorée.
Plus besoin, par exemple, de dépendance de ngcc pour toute librairie construite et générée depuis angular 13 !
Gagner 68% de performance avec le cache de ng
GrĂące Ă la gestion du cache, votre CLI pourra gagner jusqu’Ă 68% dans la gestion des packages.
Mettez votre angular.json Ă jour :
"cli": {
"cache": {
"enabled": true,
"path": ".cache",
"environment": "all"
}
}
Une plus grande facilité pour générer des composants dynamiquement
CrĂ©ation d’une directive qui va permettre de gĂ©nĂ©rer plus facilement un composant :
@Directive({
selector: '[appGenerateDynamic]'
})
export class GenerateDynamicDirective implements OnInit {
constructor(private viewContainerRef: ViewContainerRef) { }
ngOnInit(): void {
this.createTheComponent();
}
createTheComponent() {
this.viewContainerRef.createComponent(DynamicComponent);
}
}
Et voilĂ notre composant est gĂ©nĂ©rĂ© dynamiquement ! đ

Rxjs passe en version 7
La version de rxjs par défaut est la version 7.4.
Améliorer de TestBed
Dans le fichier test.ts, on peut ajouter une option pour clear tous les modules :
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(),
{ teardown: { destroyAfterEach: true } }
);
On peut aussi le configurer dans chaque module de test (fichier .spec).
Nous pouvons d’abord le voir dans l’api :
/**
* @publicApi
*/
export declare type TestModuleMetadata = {
providers?: any[];
declarations?: any[];
imports?: any[];
schemas?: Array<SchemaMetadata | any[]>;
/**
* @deprecated With Ivy, AOT summary files are unused.
*/
aotSummaries?: () => any[];
teardown?: ModuleTeardownOptions;
};
Ainsi, on peut préparer un module de test également avec le teardown :
describe('DynamicComponent', () => {
let component: DynamicComponent;
let fixture: ComponentFixture<DynamicComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ DynamicComponent ],
teardown: { destroyAfterEach: true }
})
.compileComponents();
});
Pour plus de détails, un tour sur le blog de Brink Nielsen.
Le support de typescript v4.4
Fini le suppot v4.3, angular 13 supporte la v4.4 de typescript.
Ajout d’un nouveau type FormControlStatus
Lorsqu’on travaille avec les ReactiveForm, nous pouvons vĂ©rifier le statut de notre formulaire, grĂące Ă la propriĂ©tĂ© : status.

Son type est maintenant : FormControlStatus, qui regroupe tous les types possibles :
declare type FormControlStatus = 'VALID' | 'INVALID' | 'PENDING' | 'DISABLED';
Mettre Ă jour votre projet angular vers angular 13
On en présente plus le site https://update.angular.io/ ?
Dans le doute, c’est un site proposĂ© par angular qui nous Ă©paule, Ă©tape par Ă©tape, pour la mise Ă jour de notre version d’angular.

Toutes les Ă©tapes sont Ă suivre, point par point. Et nous pouvons choisir entre une application basic, vers une application complexe (avec plein de dĂ©pendances, et une utilisation plus poussĂ©e d’angular).