import one component from module to component of another module

Question

I work with angular 6 and i have a media module. I want to import MediaComponent ( exported in MediaModule) but i have this error:

media.module"' has no exported member 'MediaComponent'.

this is the MediaModule declaration:

@NgModule({
  imports: [
    CommonModule,
    MediaRoutingModule,
    MaterialModule
  ],
  declarations: [LayoutComponent, MediaComponent],
  exports: [
    MediaComponent,
    CommonModule
  ]
})

and this is another module declaration:

@NgModule({
  imports: [
    CommonModule,
    MaterialModule,
    FormsModule,
    EM,
    EditorRoutingModule,
    MediaModule
  ],
  declarations: [ListComponent, CreateComponent, AddimageComponent]
})

from component in another module (EditorModule), this is my import:

import { MediaComponent } from '@app/views/media/media.module';

and i got the exception.

Notice: When i use media directive in a component on EditorModule, it work file. for example <app-media></app-media> display the content of MediaComponent

Answer 1

make sure media.module.ts exports a the MediaComponent class.

export { MediaComponent } from 'path/to/media.component';

Answer 2

You need to export the MediaComponent from the MediaModule in both the Angular sense and in the JavaScript sense, which are different things.

You have already exported the component in the Angular sense by including it the 'exports' section of the module's @NgModule decorator, but you also need to add export {MediaComponent} at the end of the module file so that your import { MediaComponent } from '@app/views/media/media.module'; will work.

Also, you should not be exporting another module from your module - you should remove 'CommonModule' from the MediaModule's 'exports' section.

So, change

@NgModule({
  imports: [
    CommonModule,
    MediaRoutingModule,
    MaterialModule
  ],
  declarations: [LayoutComponent, MediaComponent],
  exports: [
    MediaComponent,
    CommonModule
  ]
})
export class MediaModule {
}

to:

@NgModule({
  imports: [
    CommonModule,
    MediaRoutingModule,
    MaterialModule
  ],
  declarations: [LayoutComponent, MediaComponent],
  exports: [
    MediaComponent
  ]
})
export class MediaModule {
}

export {MediaComponent};