Différences

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

--- lang:angular:projet [2021/08/20 22:04] – Ajout de "Configuration" root
+++ lang:angular:projet [2024/01/15 00:28] (Version actuelle) – [Configuration] : mise à jour vers node16 root
@@ Ligne 70: / Ligne 70: @@
 ====Configuration====
-Elle se fait avec le fichier ''tsconfig.json''.
+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''.
@@ Ligne 85: / Ligne 89: @@
 }
 </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 604: / 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 683: / Ligne 702: @@
 =====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=====