Différences

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

--- lang:angular:cli [2020/05/18 22:21] – Ajout des tests pour le routage root
+++ lang:angular:cli [2024/10/20 00:34] (Version actuelle) – [Mise à jour] : fix typo root
@@ Ligne 6: / Ligne 6: @@
   ng build
+====Mise à jour====
+  npm install -g npm@latest
+  npm --version
+  npm install -g @angular/cli
+  ng --version
 ====Gestion des paquets====
@@ Ligne 15: / 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
-===Mettre à jour un projet===
-  npm i -g npm-check-updates
-  ncu -u
-  npm install
 ===Gestion des erreurs de mise à jour===
@@ Ligne 32: / Ligne 35: @@
 ====Ajouter====
-===Component (page web)===
+====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'' :
@@ Ligne 45: / Ligne 59: @@
 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: 'contact', component: ContactComponent },
+  { path: '**', component: NotFoundComponent }
 ];
@@ Ligne 56: / Ligne 72: @@
 })
 </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'' :
@@ Ligne 76: / Ligne 96: @@
       ],
     }).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}}