Les 6 étapes pour bien démarrer un projet Angular 17 en 2024

1. S’assurer d’utiliser la dernière version

npm i -g @angular/cli est votre ami. Il faut toujours utiliser la dernière version d’Angular pour des raisons de performance et sécurité.

2. Ajouter des paramètres au démarrage selon vos besoins

Pour démarrer un projet, il suffit généralement de faire ng new myApp. Le CLI d’Angular va proposer ensuite quelques options comme l’ajout du routing et la syntaxe pour vos stylesheet. Voici la commande que j’utilise toujours :

ng new myApp --routing --style=sass --minimal

1. --routing vous voulez avoir plusieurs pages dans votre application? Le routing d’angular est bien fait et obligatoire pour toute application digne de ce nom.

2. --style=sass préférence personnelle, si vous savez écrire du SCSS, vous savez écrire du SASS. Il suffit d’enlever les ; points virgule et les { accolades }, et de respecter l’indentation.

3. --minimal préférence personnelle, Angular vient avec des outils de tests suffisants pour la plupart des besoins, Karma et Jasmine. Enlever ces outils permet de réduire le nombre de fichiers de base et rend la lecture d’un projet de base beaucoup plus simple. Rien ne vous empêche d’ajouter vos propres outils par la suite quand le besoin arrivera ( hello cypress ).

Avec tout ça, vous êtes parés pour démarrer votre application avec le strict nécessaire et dans de bonnes conditions.

3. Appropriez vous le Angular CLI

Le CLI d’Angular est puissant. Il permet de générer des pipes, components, services… bref tout ce qui compose une application Angular, sans que vous ayez à faire toutes les étapes à la main. Par exemple, la commande ng generate component myNewComponent va vous créer un nouveau component dans le dossier ./src/app de votre application. La liste des commandes disponible se trouver sur le site de Angular.

4 .Ajustez le angular.json selon vos besoins

Ce fichier permet de communiquer avec webpack et de faire fonctionner votre application selon vos besoins. Quand vous utilisez la commande ng generate, angular va lire ce fichier et créer la fonctionnalité demandée selon les paramètres que vous lui avez passés. Ça s’appelle des schematics. Par exemple, pour la commande que j’utilise le plus dans un projet ( ng generate component ou ng g c en plus court ), voici les paramètres que j’utilise ( ligne 9 dans le fichier angular.json )

"@schematics/angular:component": {
  "inlineStyle": true,
  "style": "sass",
  "skipTests": true,
  "standalone": true,
  "changeDetection": "OnPush"
},

1. “inlineStyle”: true : Vous pouvez écrire du style dans les components directement et ce style sera uniquement appliqué à votre component. Je n’écris presque plus jamais de style inline depuis que j’utilise tailwind dans mes projets ( plus à ce sujet prochainement )

2. “style”: “sass” : Encore pour le style, du SCSS avec moins de bruit. Recommandé

3. “skipTests”: true: Le component généré n’aura pas de fichier de test par défaut. Les tests sont utiles quand notre projet grandit, au début ça rajoute juste de la complexité non nécessaire

4. “standalone”: true: Un component standalone importe les choses dont il a besoin, et peut être utilisé partout lorsque lui même est importé. Plus besoin de penser modules, imports, exports, declarations… plus à ce sujet plus bas dans l’article.

5. “changeDetection”: “OnPush”: La raison première de ça est de nous forcer à coder intelligemment. Ce paramètre va obliger a utiliser les observables et signals pour mettre à jour les valeurs de nos components Plus à ce sujet plus bas, vous pouvez aussi consulter cet article pour comprendre ce que ça signifie.

Tous les prochains component générés par le cli auront ces paramètres par défaut, et cela accélèrera votre façon de travailler.

5. Standalone components 4 ever

Pour avoir travaillé sur des applications de tailles moyennes à grandes avec modules, vous allez toujours vous retrouver dans une situation où vous allez avoir besoin d’un component à plusieurs endroits où ce n’était pas prévu au début. Étant lié à votre module, vous devez exporter votre component puis réimporter le module dans l’autre module qui va s’en servir, vous voyez ou je veux en venir, c’est déjà parti pour être confus.

Un component standalone importe ses dépendances, et fonctionnera toujours de façon indépendante. Voici ce que ça donne :

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [NgOptimizedImage, RouterLink],
  templateUrl: './login.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class LoginComponent { }

Le component ici déclaré importe routerLink pour la navigation et ngSrc pour optimiser les images. Plus besoin de déclarer ces imports dans un module, ils seront toujours accessibles peu importe où l’on utilise notre component. Ça veut dire que si nous voulons utiliser ce component dans un autre standalone component, il suffit de l’ajouter à la liste de ses imports (et dans le template html), et il fonctionnera normalement sans efforts supplémentaires.

@Component({
  selector: 'app-home-page',
  standalone: true,
  imports: [LoginComponent],
  templateUrl: './home-page.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HomePageComponent { }

Et voilà le travail ! Au revoir les modules, vous n’allez pas nous manquer.

Vous pouvez faire ça également pour les pipes et directives, à ne pas oublier.

6. Apprenez les observables et rxjs, c’est vital.

Quelque chose que la team Angular minimise ou manque de mettre en avant : L’utilisation poussée de la librairie rxjs par le framework. Cette librairie pourrait ( et va probablement ) avoir son propre article, mais pour faire court, Angular utilise cette librairie pour gérer les évènements dans l’application ( le router par exemple ) et également les requêtes http. J’ai eu beaucoup de mal à prendre cette librairie en main donc ne vous découragez pas, mais les possibilités sont vraiment incroyables. Attention cependant, cette librarie apporte également son lot de problèmes peu décrits par Angular ( dont des fuites mémoires ) qui peuvent rebuter les débutants.

Ça implique de s’assurer que les .subscribe() sont minimaux, que vos subjects sont bien takeUntilDestroy(), et que vous utilisez dès que possible les | async dans vos templates.

Amusez-vous bien dans le lancement de votre premier projet avec Angular!

N’hésitez pas à nous contacter si vous avez des questions supplémentaires concernant l’article ou Angular plus en général.