Différences

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

--- lang:angular:cli [2020/05/08 07:36] – Création avec "Installer une version spécifique" root
+++ lang:angular:cli [2024/10/20 00:34] (Version actuelle) – [Mise à jour] : fix typo root
@@ Ligne 1: / Ligne 1: @@
-====Installation====
+=====Installation=====
+====Base====
+Pour chacune des opérations ci-dessous, ne pas oublier
+  ng build
+====Mise à jour====
+  npm install -g npm@latest
+  npm --version
+  npm install -g @angular/cli
+  ng --version
+====Gestion des paquets====
+Ca se passe dans le fichier [[prog:nodejs:npm|package.json]].
 ===Installer une version spécifique===
@@ Ligne 5: / Ligne 23: @@
   npm install @angular/core@9.1.4 @angular/animations@9.1.4 @angular/common@9.1.4 @angular/forms@9.1.4 @angular/platform-browser@9.1.4 @angular/router@9.1.4 @angular/platform-browser-dynamic@9.1.4 @angular/compiler@9.1.4 @angular/compiler-cli@9.1.4 @angular/language-service@9.1.4
-Et ne pas oublier de recompiler
-  ng build
+===Gestion des erreurs de mise à jour===
+En cas de problème, il est possible d'installer une version spécifique.
+  * ''%%npm WARN @angular/animations@9.1.7 requires a peer of tslib@^1.10.0 but none is installed. You must install peer dependencies yourself.%%''
+Suite à la mise à jour, j'avais ''tslib@2.0'' d'installée. J'ai dû changer la version en ''^1.10.0'' dans ''package.json'' et faire ''npm install''.
+=====Modification d'un projet=====
+====Ajouter====
+====Component (page web)====
+  ng generate component modules/general/contact --module=app
+Ce component pourra être appelé via
+  <app-contact></app-contact>
+====Module====
+Un module est un ensemble de components et d'autres modules.
+===Routage===
+Définir la jonction entre URL et component.
+  ng generate module app-routing --flat --module=app
+''%%--flat%%'' : ''When true, creates the new files at the top level of the current project root.''
+  * Modifier le fichier ''app-routing.module.ts'' :
+<code typescript>
+import { Routes, RouterModule } from '@angular/router';
+import { ContactComponent } from './modules/general/contact/contact.component';
+import { NotFoundComponent } from './modules/general/not-found/not-found.component';
+const routes: Routes = [
+  { path: 'contact', component: ContactComponent },
+  { path: '**', component: NotFoundComponent }
+];
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+  declarations: []
+})
+</code>
+<WRAP center round important 60%>
+Dans ''routes'', l'ordre est important. Si ''**'' est mis au début, tous les liens seront redirigés vers ''not-found''.
+</WRAP>
+  * Ajouter dans le fichier ''app.component.html'' :
+<code xml>
+<router-outlet></router-outlet>
+</code>
+  * Ajouter dans le fichier de test ''app.component.spec.ts'' :
+<code typescript>
+import { RouterTestingModule } from '@angular/router/testing';
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+</code>
+===Lazy load===
+Chargement en différé d'un component.
+  ng generate module modules/general/contact --routing  --module=app
+  ng generate component modules/general/contact/mailing --module=app
+  * Ajouter dans le fichier ''app.component.html'' :
+<code xml>
+<router-outlet></router-outlet>
+</code>
+  * Dans le fichier ''app.module.ts''
+Enlever manuellement le nouveau module :
+<code diff>
+-import { ContactComponent } from './modules/general/contact/contact.component';
+-import { ContactModule } from './modules/general/contact/contact.module';
+ ...
+ @NgModule({
+   declarations: [
+ ...
+-    ContactComponent,
+ ...
+   imports: [
+ ...
+-    ContactModule,
+</code>
+  * Dans le fichier ''app-routing.module.ts''
+Le chargement du component ne se fait plus au niveau global de l'application.
+<code diff>
+-import { ContactComponent } from './modules/general/contact/contact.component';
+ const routes: Routes = [
+-  { path: 'contact', component: ContactComponent },
++    path: 'contact',
++    loadChildren: () => import('./modules/general/contact/contact.module')
++      .then(mod => mod.ContactModule)
++  },
+</code>
+  * Dans le fichier ''modules/general/contact/contact.module.ts''
+Le chargement du component se fait lors du chargement du module contact.
+<code diff>
++import { ContactComponent } from './contact.component';
+ ...
+ @NgModule({
+-   declarations: [],
++   declarations: [
++     ContactComponent
++   ],
+   imports: [
+     CommonModule,
+     ContactRoutingModule
+   ],
++   exports: [
++     ContactComponent
++   ]
+ })
+</code>
+  * Dans le fichier ''modules/general/contact/contact-routing.module.ts''
+Remplacer ''const routes: Routes = [];'' par :
+<code typescript>
+import { ContactComponent } from './contact.component';
+const routes: Routes = [
+  { path: '', component: ContactComponent },
+];
+</code>
+[[https://www.ganatan.com/tutorials/lazy-loading-avec-angular|Lazy loading avec Angular 9]] {{ :lang:angular:cli:3-implementer_le_lazy_loading_avec_angular_2020-05-09_9_30_19_am_.html | Archive du 03/05/2020 le 09/05/2020}}