Différences

Ci-dessous, les différences entre deux révisions de la page.

--- lang:angular:projet [2021/10/09 19:06] – Ajout des "Options" de "Compilation" root
+++ lang:angular:projet [2025/10/26 20:22] (Version actuelle) – [Workspace avec une librairie et une application] ajout d'une source pour l'arborescence d'un projet root
@@ Ligne 19: / Ligne 19: @@
 ''angular'' est le nom du dossier du nouveau projet
-  * Erreurs possibles
+====Configuration====
-<code>
+Elle se fait avec le fichier ''tsconfig.json''. ([[https://www.typescriptlang.org/tsconfig|TSConfig Reference]] {{ :lang:angular:projet:typescript_tsconfig_reference_-_docs_on_every_tsconfig_option_14_01_2024_23_58_59_.html |Archive v5.0 le 15/01/2024}})
-...
-CREATE angular/src/app/app.component.ts (211 bytes)
-CREATE angular/src/app/app.component.css (0 bytes)
-⠧ Installing packages (npm)...npm ERR! code ERESOLVE
-npm ERR! ERESOLVE unable to resolve dependency tree
-npm ERR!
-npm ERR! While resolving: angular@0.0.0
-npm ERR! Found: jasmine-core@3.7.1
-npm ERR! node_modules/jasmine-core
-npm ERR!   dev jasmine-core@"~3.7.0" from the root project
-npm ERR!
-npm ERR! Could not resolve dependency:
-npm ERR! peer jasmine-core@">=3.8" from karma-jasmine-html-reporter@1.7.0
-npm ERR! node_modules/karma-jasmine-html-reporter
-npm ERR!   dev karma-jasmine-html-reporter@"^1.5.0" from the root project
-npm ERR!
-npm ERR! Fix the upstream dependency conflict, or retry
-npm ERR! this command with --force, or --legacy-peer-deps
-npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
-npm ERR!
-npm ERR! See C:\Users\legar\AppData\Local\npm-cache\eresolve-report.txt for a full report.
-npm ERR! A complete log of this run can be found in:
+  * Rubrique ''compilerOptions''
-npm ERR!     C:\Users\legar\AppData\Local\npm-cache\_logs\2021-07-14T20_17_00_602Z-debug.log
-✖ Package install failed, see above.
-The Schematic workflow failed. See above.
-</code>
-Cela peut arriver si la version d'Angular est un peu ancienne et que le fichier [[https://github.com/angular/angular-cli/blob/master/packages/schematics/angular/workspace/files/package.json.template|package.json.template]] est obsolète.
-Supprimer le dossier créé et relancer :
-<code bash>
-ng new --skip-install [project]
-</code>
-Ici, on voit qu'il faut remplacer ''karma-jasmine-html-reporter@^1.5.0'' par ''karma-jasmine-html-reporter@1.7.0'' et ''jasmine-core@~3.7.0'' par ''jasmine-core@>=3.8''.
-et lancer
-<code bash>
-npm install
-</code>
-[[https://stackoverflow.com/questions/67433893/unable-to-resolve-dependency-tree-error-for-creating-new-angular-project|unable to resolve dependency tree error for creating new angular project]] {{ :lang:angular:projet:web_-_unable_to_resolve_dependency_tree_error_for_creating_new_angular_project_-_stack_overflow_2021-07-14_22_55_22_.html |Archive du 07/05/2021 le 14/07/2021}}
+Cette rubrique contient les options pour le compilateur tsc. [[https://www.typescriptlang.org/docs/handbook/compiler-options.html|tsc CLI Options]] {{ :lang:angular:projet:typescript_documentation_-_tsc_cli_options_10_01_2024_05_36_09_.html |Archive du 04/01/2024 le 10/01/2024}}
-====Configuration====
-Elle se fait avec le fichier ''tsconfig.json''.
 Pour utiliser les dernières fonctionnalités javascript, utiliser ''esnext''.
@@ Ligne 85: / Ligne 40: @@
 }
 </file>
+Il est possible d'ajouter :
+<code javascript>
+    "noImplicitOverride": true,
+</code>
+Et mettre à jour ''moduleResolution'' à ''node16'' (''node'' / ''node10'' est déprécié) et propager les autres modifications :
+<code javascript>
+    "moduleResolution": "node16",
+    "module": "node16",
+</code>
+et dans ''package.json'' : ''"type": "module"''.
 ====Workspace avec une librairie et une application====
@@ Ligne 174: / Ligne 144: @@
 [[https://angular.io/guide/file-structure|Workspace and project file structure]] {{ :lang:angular:projet:angular_-_workspace_and_project_file_structure_2021-07-31_09_06_47_.html |Archive du v12.1.5 le 31/07/2021}}
+Et contenu du dossier app:
+<code>
+src
+└── app
+    ├── core                 # services, guards, interceptors, models. Pas lié à la logique de l'application. Juste à son type.
+    │   ├── auth/
+    │   │   ├── guards/
+    │   │   │   └── auth-guard.ts
+    │   │   ├── models/
+    │   │   │   └── user.model.ts
+    │   │   ├── stores/
+    │   │   │   ├── auth-store.ts
+    │   │   │   └── auth-store.spec.ts
+    │   │   ├── auth.routes.ts
+    │   │   └── pages/
+    │   │       ├── login/
+    │   │       │   ├── login.ts
+    │   │       │   ├── login.html
+    │   │       │   └── login.css
+    │   │       ├── register/
+    │   │       └── password-reset/
+    │   └── layout/
+    ├── shared               # composants réutilisables génériques
+    │   ├── components
+    │   │       ├── notification.ts
+    │   │       ├── notification.html
+    │   │       └── notification.css
+    │   ├── directives
+    │   ├── pipes/
+    │   │   └── format-date-p.ts
+    │   └── shared.ts        # Module
+    └── features             # chaque grande fonctionnalité
+        └── feat1
+            ├── components
+            ├── dialogs
+            ├── directives
+            ├── pages
+            ├── pipes
+            ├── services
+            ├── store
+            ├── appointments-routing.ts # Module
+            └── appointments.ts         # Module
+</code>
+[[https://www.thinkitive.com/blog/angular-best-practices-tips-for-project-structure-and-organization/| Angular Best Practices: Tips for Project Structure and Organization ]] {{ :lang:angular:projet:angular_best_practices_tips_for_project_structure_and_organization_thinkitive_21_10_2025_23_40_23_.html |Archive du 22/11/2023 le 21/10/2025}}
+[[https://medium.com/@dragos.atanasoae_62577/angular-project-structure-guide-small-medium-and-large-projects-e17c361b2029|Angular Project Structure Guide: Small, Medium, and Large Projects]] {{ :lang:angular:projet:angular_project_structure_guide_small_medium_and_large_projects_by_dragos_atanasoae_medium_26_10_2025_20_19_17_.html |Archive du 12/10/2024 le 26/10/2025}}
+Convention de nommage des fichiers:
+  * Component : ''user-profile.ts'' (was ''user-profile.component.ts''),
+  * Directive : ''highlight.ts'' (was ''highlight.directive.ts''),
+  * Service : ''auth-store.ts'' (instead of ''auth.service.ts'', using domain-specific names like ''*-store.ts'', ''*-api.ts'', ''*-client.ts''),
+  * Pour les autres : ''auth-guard.ts'' (was ''auth.guard.ts''), ''currency-pipe.ts'' (was ''currency.pipe.ts''), ''shared-module.ts'' (was ''shared.module.ts'').
+[[https://learnwithawais.medium.com/still-using-component-ts-angular-20-just-changed-the-rules-dd7d8e21b9bc|Still Using *.component.ts? Angular 20 Just Changed the Rules]] {{ :lang:angular:projet:still_using_.component.ts_angular_20_just_changed_the_rules_by_learn_with_awais_medium_10_24_2025_12_47_14_pm_.html |Archive du 05/06/2025 le 24/10/2025}}
 ====Nouvelle vue====