web-dev-qa-db-fra.com

De nombreux modules utilisant le même composant provoquent une erreur - Angular 2

J'ai un composant partagé appelé GoComponent que je souhaite utiliser dans 2 modules: FindPageModule et AddPageModule.

Lorsque je l'ajoute dans les déclarations de "FindPageModule" et dans mon "AddPageModule", une erreur se produit:

find: 21 Erreur: (SystemJS) Type GoComponent fait partie des déclarations de 2 modules: FindPageModule et AddPageModule! S'il vous plaît, envisagez de déménager GoComponent à un module supérieur qui importe FindPageModule et AddPageModule. Vous pouvez également créer un nouveau NgModule qui exporte et inclut GoComponent puis importer ce NgModule dans FindPageModule et AddPageModule.

Donc, je les retire et les ajoute aux déclarations AppModule, qui importent FindPageModule et AddPageModule, et j'obtiens une erreur dans un composant appelé "FindFormComponent" qui figure dans les déclarations de FindPageModule et utilise "GoComponent":

zone.js:355 Unhandled Promise rejection: Template parse errors:
'go' is not a known element:
1. If 'go' is an Angular component, then verify that it is part of this module.
2. If 'go' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" style="height:64px;">
            <div style="position: relative; display: inline-block; width: 100%;">
                [ERROR ->]<go></go>
            </div>
        </div>
"): FindFormComponent@101:4 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
'go' is not a known element:
1. If 'go' is an Angular component, then verify that it is part of this module.
2. If 'go' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" style="height:64px;">
            <div style="position: relative; display: inline-block; width: 100%;">
                [ERROR ->]<go></go>
            </div>
        </div>
"): FindFormComponent@101:4

Comment laisser des composants tels que FindFormComponent déclarés dans FindPageModule utiliser GoComponent et laisser également les composants déclarés par AddPageModule utiliser GoComponent?

angularng-modules
17
BeniaminoBaggins

Oui, les composants ne peuvent être déclarés que dans un seul module, et leur accès n'est en aucun cas hérité. En d'autres termes, le fait de le déclarer dans le module principal de l'application ne vous donnera accès à aucun autre module.

Si vous avez un composant utilisé par d'autres modules, il est généralement préférable de le placer dans un module partagé.

Inclure un composant dans un module partagé:

@NgModule({
  declarations: [ SharedComponent ],
  exports: [ SharedComponent ]
})
class SharedModule {}

Comment utiliser le module partagé ailleurs:

@NgModule({
  imports: [ SharedModule ]
})
class ModuleWithComponentThatUsesSharedComponent {}

Voir également

31
Paul Samsotha

Si vous souhaitez utiliser le GoComponent sur plusieurs modules, vous devez créer un module "partagé" et ajouter le GoComponent aux exportations du module partagé. Ensuite, vous importez le module partagé dans vos autres modules où vous souhaitez utiliser ce composant.

Plus d'informations sur ici

J'espère que cette aide!

1
Ha Hoang