Angular 15 est sorti courant novembre 2022. Découvrons ensemble les belles avancées de cette nouvelle version.
Ca continue pour les standalone API
Dans la version 14, Angular nous avions la possibilité de créer des SCAM, super facilement !
ng g c mon-component –standalone=true
Vous vous rappelez ?
Ca donnait un composant comme ça :
@Component({
selector: 'app-menu-global',
standalone: true,
imports: [CommonModule, RouterModule],
templateUrl: './menu-global.component.html',
styleUrls: ['./menu-global.component.css']
})
export class MenuGlobalComponent {
}
Imaginez ! On peut créer une application sans module !
On démarre l’application comme ça :
bootstrapApplication(MainComponent);Un truc de dingue !
Le standalone des routes !
Dans angular 15, nous pouvons aller plus loin et dire au revoir aux modules de routing !
bootstrapApplication(MainComponent, { providers: [ provideRouter(mainRoutes) ] });Où les routes représentent un simple tableau !
export const mainRoutes: Routes = [
{ path: 'child-one', component: ChildOneComponent }
]
Et on peut aller encore plus loin !
Le standalone des lazy routes !
export const mainRoutes: Routes = [
{ path: 'child-one', loadChildren: () => import('./lazy/index').then(item => item.lazyRoutes) }
];Où l’on charge uniquement des routes qui appellent des composants !! Vive le treeShaking facilité !
Regardons le fichier lazy/index :
import { Routes } from "@angular/router";
import { ChildOneComponent } from "src/app/childs/child-one/child-one.component";
export const lazyRoutes: Routes = [
{ path: '', component: ChildOneComponent }
]
Tiens au passage, je vous ai parlé de notre formation angular avancée qu’on prépare ?
Nous en parlons dans notre formation elearning angular avancée !
Et puis la team Angular a ajouté des fonctions pour nous faciliter la configuration, avec les with !
Un exemple :
bootstrapApplication(MainComponent, { providers: [ provideRouter(mainRoutes, withDebugTracing()) ] })Impressionnant !
Les route guards profitent aussi de cette avancée
const route = {
path: 'admin',
canActivate: [() => inject(LoginService).isLoggedIn()]
};On notera ici la capacité à injecter sans passer par le constructor, grâce à un import d’angular 14 : le @inject !
Et d’autres avancées
Ils ont amélioré la stack trace (épurée, plus facile à lire).
L’ajout d’une directive pour optimiser les performances autour du chargement des images : la balise ngSrc (NgOptimizedImage).
Pour finir sunr une partie à tester : les directives composition
Nous y reviendrons dans un prochain article.
Un code qu’on peut voir circuler sur le net depuis la sortie d’Angular 15 :
@Component({
selector: 'admin-menu',
template: 'admin-menu.html',
hostDirectives: [{
directive: MenuBehavior,
inputs: ['menuId: id'],
outputs: ['menuClosed: closed'],
}],
})
export class AdminMenu { }Au lieu de faire l’héritage de Directive, mieux vaut maintenant lui préférer la composition !
Curieux-se d’en savoir plus ? Nous en parlons dans nos formations angular avancée distanciel/présentiel :