Date de création : 2021/03/19 17:46

Quand on construit notre application Angular, il est bien de séparer les components en modules autonome, une architecture typique serait la suivante:

📦home
 ┣ 📂container
 ┃ ┗ 📂components
 ┃ ┃ ┗ 📂home
 ┃ ┃ ┃ ┣ 📜home.component.html
 ┃ ┃ ┃ ┣ 📜home.component.scss
 ┃ ┃ ┃ ┣ 📜home.component.spec.ts
 ┃ ┃ ┃ ┗ 📜home.component.ts
 ┣ 📜home-routing.modules.ts
 ┗ 📜home.modules.ts

Dans cet exemple, un dossier home qui contient tout le module Home avec son router son module.ts et son component.

Le problème ici est que la délaration du components : HomeComponent va se trouver dans le home.module.ts et dans le app.module.ts.

Nous allons donc nous retrouver avec une joli erreur:

The component is declared by more than one NgModule.

Pour régler ce genre d'erreur rien de plus simple, on garde les déclarations au niveau du module home.modules.ts mais dans le fichier app.module.ts nous allons faire une petite modification.

Donc au départ on doit avoir un fichier app.module.ts genre:

import { NgModule } from '@angular/core';
 
// Import du module
import { HomeComponent } from './home/home.modules';
 
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Et on modifie la déclaration en import mais cette fois si cela n'est pas le component mais le module que nous importons

import { NgModule } from '@angular/core';
// Import du module
import { HomeModule } from './home/home.modules';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    HomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Voila maintenant notre application Angular à accès à tout ce qui est dans notre module Home

Page dans la catégorie: