Angular 13 vient de sortir

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).