Aller au contenu principal

5-2 Créer un projet

Nous allons créer le projet Angular pour l'application Houdini via l'interface en ligne de commande d'Angular.

À partir d'un dossier sur votre ordinateur dans lequel vous voulez mettre le projet, exécutez la commande suivante:

ng new houdini --inline-style --inline-template --skip-tests --style scss

Aux questions:

  • Do you want to create a 'zoneless' application without zone.js (Developer Preview)? (y/N), répondez N pour non
  • Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?, répondez N pour non.
  • ? Which AI tools do you want to configure with Angular best practices? https://angular.dev/ai/develop-with-ai, répondez ❯◉ None.

À propos des paramètres:

  • ng new: permet de créer un nouveau projet
  • houdini: le nom du projet/dossier
  • --inline-style: les règles de style scss pourront être mises directement dans la composante plutôt qu'un fichier séparé
  • --inline-template: le code HTML sera dans le même fichier que la logique et le code
  • --skip-tests: ne pas créer automatiquement un fichier de test pour chaque composant, mais vous aurez quand même à écrire des tests 😉
  • --style scss: utiliser scss pour le style

Il se pourrait que cela prenne un peu de temps avec l'installation des différents paquets npm.

Ouvrir le projet​

Une fois terminé, vous pouvez ouvrir le dossier dans WebStorm.

Ajout de l'attribut "flat": true à angular.json​

Nous verrons bientôt plus en détails le fichier angular.json qui contient certaines configurations propres au projet.

Pour l'instant, nous allons ajouter à ce fichier une configuration "flat": true. Ce paramètre fera en sorte de ne pas créer un dossier propre à chaque composant lors de leur création, qui est le comportement par défaut d'Angular.

Ajoutez la ligne "flat": true dans la section @schematics/angular:component:

angular.json
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "houdini-test": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "inlineTemplate": true,
          "inlineStyle": true,
          "style": "scss",
          "skipTests": true,
          "flat": true
        },
//...

Déposer votre projet sur Git​

Vous pouvez créer un nouveau projet sur Gitlab. Choisir:

  • Blank Projet
  • SANS Readme (Ne PAS cocher Initialize repository with a README)

Et ensuite suivre les instructions Push an existing Git repository pour pousser le nouveau projet (dossier houdini) vers GitLab:

cd houdini
git remote add origin url_de_votre_repo_git
git push --set-upstream origin --all
git push --set-upstream origin --tags

Cela enverra sur git l'installation initiale de votre projet Angular (un commit est créé automatiquement lors de l'installation).

Envoyer vos changements​

Si vous faites git status, vous verrez dans changements à angular.json:

On branch main
Your branch is up to date with 'origin/main'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   angular.json

C'est normal, vous avez ajouté une ligne "flat": true au fichier!

Pour soumettre vos changements:

  1. git add . -> ajoute les fichiers modifiés au suivi git
  2. git commit -m "Ajout de 'flat: true' à angular.json" (ou tout autre message de commit que vous jugerez pertinent)
  3. git push