=====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 --verion
  

====Gestion des paquets====

Ca se passe dans le fichier [[prog:nodejs:npm|package.json]].

===Installer une version spécifique===

  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


===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}}