Différences

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

--- lang:angular:projet [2021/08/05 08:27] – [Erreurs] ; ajout de "NullInjectorError: No provider for FormBuilder!" root
+++ lang:angular:projet [2024/01/15 00:28] (Version actuelle) – [Configuration] : mise à jour vers node16 root
@@ Ligne 68: / Ligne 68: @@
 [[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}}
+====Configuration====
+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}})
+  * Rubrique ''compilerOptions''
+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}}
+Pour utiliser les dernières fonctionnalités javascript, utiliser ''esnext''.
+<file javascript tsconfig.json>
+{
+  "compilerOptions": {
+    ...,
+    "target": "esnext",
+    "module": "esnext",
+    "lib": ["esnext", "dom"],
+    ...
+  }
+}
+</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 587: / Ligne 623: @@
 <file javascript xxx.module.ts>
-import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 @NgModule({
-  imports: [..., FormsModule]
+  imports: [..., ReactiveFormsModule]
 })
 export class ...
@@ Ligne 654: / Ligne 690: @@
 [[https://stackoverflow.com/questions/54976493/nullinjectorerror-no-provider-for-formbuilder-im-importing-reactiveformsmodul|Nullinjectorerror: no provider for formbuilder (I'm importing ReactiveFormsModule)]] {{ :lang:angular:projet:angular_-_nullinjectorerror_no_provider_for_formbuilder_i_m_importing_reactiveformsmodule_-_stack_overflow_2021-08-05_08_25_13_.html |Archive du 04/03/2019 le 05/08/2021}}
+  * ''No value accessor for form control with name''
+Ou encore ''ERROR Error: No value accessor for form control with unspecified name attribute''.
+Peut se déclencher lors des tests et pas en production.
+Dans la page HTML, il faut ajouter ''ngDefaultControl'' aux éléments possédant un ''formControlName'' et n'étant pas de type ''input'' (par exemple, un composant Angular affichant un autre formulaire).
+[[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=====