Angular, using one component in other two components

Question

I want to use one component in another two components like that:

<jhi-articles-list-component [active]="true"></jhi-articles-list-component>

so i created some shared module and export that component like this:

@NgModule({
    exports: [ArticlesListComponent]
})
export class ArticlesListModule {}

And then im imported that module in modules that i want to use that component which causes the error:

Can't export directive ArticlesListComponent from ArticlesListModule as it was neither declared nor imported!

Answer 1

You should add declarations :

@NgModule({
    declarations: [ArticlesListComponent],
    exports: [ArticlesListComponent]
})
export class ArticlesListModule {}

Answer 2

Your component (used at multiple places) should be declared and exported from it's module.

This will make it available in other modules and can be used once component's module (in this case: ArticlesListModule ) is imported:

    @NgModule({
       declarations: [ArticlesListComponent],
       exports: [ArticlesListComponent]
    })
    export class ArticlesListModule {}

Answer 3

I add some imports to that shared module like CommonModule and it works now.

@NgModule({
   imports: [ArticleSharingAppSharedLibsModule, ArticleSharingAppSharedCommonModule, 
   ArticleSharingAppAppRoutingModule],
   declarations: [ArticlesListComponent],
   exports: [ArticlesListComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],

})
export class ArticlesListModule {}