LG

Pour chacune des opérations ci-dessous, ne pas oublier

ng build

npm install -g npm@latest
npm --version
npm install -g @angular/cli
ng --verion

Ca se passe dans le fichier package.json.

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

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.

ng generate component modules/general/contact --module=app

Ce component pourra être appelé via

<app-contact></app-contact>

Un module est un ensemble de components et d'autres modules.

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 :

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: []
})

• Ajouter dans le fichier app.component.html :

<router-outlet></router-outlet>

• Ajouter dans le fichier de test app.component.spec.ts :

import { RouterTestingModule } from '@angular/router/testing';
 
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();

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 :

<router-outlet></router-outlet>

• Dans le fichier app.module.ts

Enlever manuellement le nouveau module :

-import { ContactComponent } from './modules/general/contact/contact.component';
-import { ContactModule } from './modules/general/contact/contact.module';
 ...
 @NgModule({
   declarations: [
 ...
-    ContactComponent,
 ...
   imports: [
 ...
-    ContactModule,

• Dans le fichier app-routing.module.ts

Le chargement du component ne se fait plus au niveau global de l'application.

-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)
+  },

• Dans le fichier modules/general/contact/contact.module.ts

Le chargement du component se fait lors du chargement du module contact.

+import { ContactComponent } from './contact.component';
 ...
 @NgModule({
-   declarations: [],
+   declarations: [
+     ContactComponent
+   ],
   imports: [
     CommonModule,
     ContactRoutingModule
   ],
+   exports: [
+     ContactComponent
+   ]
 })

• Dans le fichier modules/general/contact/contact-routing.module.ts

Remplacer const routes: Routes = []; par :

import { ContactComponent } from './contact.component';
 
const routes: Routes = [
  { path: '', component: ContactComponent },
];

Lazy loading avec Angular 9 Archive du 03/05/2020 le 09/05/2020