web-dev-qa-db-fra.com

Angular - Utilisation d'un composant sur plusieurs modules

Ce que j'utilise

  • Angular

Ce que j'essaie de faire

  • J'ai un composant de chargement que je souhaite réutiliser sur plusieurs modules

Ce que j'ai fait

  • J'ai créé un nouveau module appelé 'loading-overlay'

  • Dans ce module, j'exporte le composant de superposition

  • J'ajoute ce module à app.module

  • Lors de l'ajout du composant à plusieurs modules, je reçois l'erreur suivante:

Le type LoadingOverlayComponent fait partie des déclarations de 2 modules: LoadingOverlayModule et ProjectsModule! Veuillez envisager de déplacer LoadingOverlayComponent vers un module supérieur qui importe LoadingOverlayModule et ProjectsModule. Vous pouvez également créer un nouveau NgModule qui exporte et inclut LoadingOverlayComponent, puis importer ce NgModule dans LoadingOverlayModule et ProjectsModule.

  • J'ai essayé de le supprimer de app.module et de l'importer dans les autres modules dont j'ai besoin sans trop de chance. Je dois manquer une évidence.

Module de superposition

// Modules
import { NgModule } from '@angular/core';

// Components
import { LoadingOverlayComponent } from './loading-overlay.component';



@NgModule({
  declarations: [
    LoadingOverlayComponent,
  ],

  imports: [

  ],

  exports: [
    LoadingOverlayComponent
  ],

  providers: [ ],

})

export class LoadingOverlayModule { }

Module d'application

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Routing
import { AppRouting } from './routing/app-routing';

// Modules
import { ProjectsModule } from './projects/projects.module';
import { UserModule } from './user/user.module';
import { LoadingOverlayModule } from './loading-overlay/loading-overlay.module';


// Services / Providers
import { AuthService } from './user/auth.service'





@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRouting,
    LoadingOverlayModule  
  ],
  providers: [
    AuthService,

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Module Projet

// Modules
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { LoadingOverlayModule } from '../loading-overlay/loading-overlay.module';

import { LoadingOverlayComponent } from '../loading-overlay/loading-overlay.component';






@NgModule({
  declarations: [

    LoadingOverlayComponent
  ],

  imports: [
    CommonModule,
    RouterModule,

    LoadingOverlayModule
  ],

  providers: [ ],

})

export class ProjectsModule { }

Toute aide soulignant ce que j'ai bêtement manquée serait grandement appréciée.

angularangular-module
12
MegaTron

Retirer :

LoadingOverlayModule de AppModule

LoadingOverlayComponent de ProjectsModule

Et :

importLoadingOverlayModule Où son requis

5
Vivek Doshi

LoadingOverlayModule est un module partagé. Il a sa propre composante. Maintenant, pour utiliser son composant, vous devez importer LoadingOverlayModule dans le module Project. Supprimer LoadingOverlayComponent des déclarations du module de projet.

Vous aurez besoin d'un autre composant (disons ProjectComponent ) pour la déclaration du module de projet. Comme le module partagé est importé dans votre module de projet, vous pouvez directement utiliser le composant de superposition dans le modèle ProjectComponent , en utilisant le sélecteur. J'espère que cela t'aides.

5
Hiralal Manmode