Différences

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

--- lang:angular:projet [2021/08/09 09:59] – [Erreurs] : fix "ng test" avec le message "If 'xxx' is an Angular component, then verify that it is part of this module" 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.
+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}}
-Supprimer le dossier créé et relancer :
+Pour utiliser les dernières fonctionnalités javascript, utiliser ''esnext''.
-<code bash>
+<file javascript tsconfig.json>
-ng new --skip-install [project]
+{
-</code>
+  "compilerOptions": {
+    ...,
+    "target": "esnext",
+    "module": "esnext",
+    "lib": ["esnext", "dom"],
+    ...
+  }
+}
+</file>
-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''.
+Il est possible d'ajouter :
-et lancer
+<code javascript>
+    "noImplicitOverride": true,
-<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}}
+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 157: / 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====
@@ Ligne 587: / Ligne 632: @@
 <file javascript xxx.module.ts>
-import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 @NgModule({
-  imports: [..., FormsModule]
+  imports: [..., ReactiveFormsModule]
 })
 export class ...
@@ Ligne 624: / Ligne 669: @@
 export * from '...';
 </file>
-Si le problème existe uniquement lors des ''ng test'', c'est qu'il s'agit d'un composant enfant du composant à tester. On peut donc désactiver cet avertissement en ajoutant ''schemas: [NO_ERRORS_SCHEMA]'' lors du test.
-<code javascript>
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-TestBed.configureTestingModule({
-        declarations: [YourComponent],
-        schemas: [NO_ERRORS_SCHEMA]
-      }).compileComponents();
-</code>
-[[https://stackoverflow.com/questions/51147707/ng-test-angular-5-not-a-known-element|ng test angular 5 not a known element]] {{ :lang:angular:projet:ng_test_angular_5_not_a_known_element_-_stack_overflow_2021-08-09_09_53_21_.html |Archive du 03/07/2018 le 09/08/2021}}
   * ''TypeError: control.registerOnChange is not a function''
@@ Ligne 677: / Ligne 709: @@
 [[https://stackoverflow.com/questions/46465891/what-is-ngdefaultcontrol-in-angular|What is ngDefaultControl in Angular?]] {{ :lang:angular:projet:javascript_-_what_is_ngdefaultcontrol_in_angular_-_stack_overflow_2021-08-06_10_40_06_.html |Archive du 28/09/2017 le 06/08/2021}}
+=====Compilation=====
+====Options====
+Les options sont dans les fichiers ''tsconfig.json'', dans le champ ''compilerOptions''.
+<code javascript>
+{
+  "compilerOptions": {
+    ...
+  },
+}
+</code>
+[[https://www.typescriptlang.org/tsconfig|Intro to the TSConfig Reference]] {{ :lang:angular:projet:typescript_tsconfig_reference_-_docs_on_every_tsconfig_option_2021-10-09_18_50_50_.html |Archive du v4.1 le 09/10/2021}}
+===Javascript===
+  * json
+Pour autoriser l'import depuis des fichiers json, il faut ajouter :
+<code javascript>
+  "resolveJsonModule": true
+</code>
+  * Import Javascript
+Pour autoriser l'import depuis des fichiers javascript, il faut ajouter :
+<code javascript>
+  "allowJs": true
+</code>
+  * Import Javascript non module
+Pour convertir des imports javascript en des modules, il faut ajouter :
+<code javascript>
+  "allowSyntheticDefaultImports": true
+</code>
+Pas besoin d'utiliser ''esModuleInterop'' si ce n'est pas nécessaire.
+====Séparer la build développement et production====
+Après de nombreux tests, je n'ai pas réussi à avoir une application avec un module et de la compiler, en même temps, en version de développement et de production. C'est possible de compiler les deux mais chaque compilation va remplacer la précédent.
+====peerDependencies et les librairies====
+Les ''peerDependencies'' sont les dépendances des librairies.
+Si le projet final utilise les mêmes dépendances, il va y avoir conflit sur la localisation des ''node_modules'' à utiliser.
+<code>
+ERROR: src/lib/data/geotechnical/meyerhof/meyerhof-form.component.ts:49:13 - error TS2345: Argument of type 'MonoTypeOperatorFunction<any>' is not assignable to parameter of type 'OperatorFunction<any, any>'.
+Types of parameters 'source' and 'source' are incompatible.
+Type 'import("G:/Github/jessica/src/angular/node_modules/rxjs/internal/Observable").Observable<any>' is not assignable to type 'import("G:/Github/jessica/src/angular/projects/jessica/node_modules/rxjs/dist/types/internal/Observable").Observable<any>'.
+The types of 'operator.call' are incompatible between these types.
+Type '(subscriber: import("G:/Github/jessica/src/angular/node_modules/rxjs/internal/Subscriber").Subscriber<any>, source: any) => import("G:/Github/jessica/src/angular/node_modules/rxjs/internal/types").TeardownLogic' is not assignable to type '(subscriber: import("G:/Github/jessica/src/angular/projects/jessica/node_modules/rxjs/dist/types/internal/Subscriber").Subscriber<any>, source: any) => import("G:/Github/jessica/src/angular/projects/jessica/node_modules/rxjs/dist/types/internal/types").TeardownLogic'.
+Types of parameters 'subscriber' and 'subscriber' are incompatible.
+Type 'Subscriber<any>' is missing the following properties from type 'Subscriber<any>': syncErrorValue, syncErrorThrown, syncErrorThrowable, _unsubscribeAndRecycle, and 2 more.
+</code>
+et Angular détecter une incompatibilité qui n'en ai pas une, même si les deux modules ont la même version.
+Il faut donc configurer le fichier ''tsconfig.app.json''.
+<file javascript tsconfig.app.json>
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": [],
+    "paths": {
+      // Dépendances du projet et des librairies
+      "@angular/*": ["./projects/app-main/node_modules/@angular/*"],
+      "@ngx-translate/*": ["./projects/app-main/node_modules/@ngx-translate/*"],
+      "cldr": ["./projects/app-main/node_modules/cldrjs/dist/cldr"],
+      "cldr/*": ["./projects/app-main/node_modules/cldrjs/dist/cldr/*"],
+      "globalize/*": [
+        "./projects/app-main/node_modules/globalize/dist/globalize/*"
+      ],
+      // Librairies
+      "jessica": ["./projects/jessica/dist"],
+      "toolbox": ["./projects/toolbox/dist"]
+    }
+  },
+  ...
+}
+</file>
+Il doit bien y avoir un moyen d'éviter ça mais je n'ai pas trouvé.
 =====Ajout de fonctionnalités=====