从一个模块导入一个组件到另一个模块的组件

Question

我使用角度6，我有一个media模块。 我想导入MediaComponent （在MediaModule导出）但我有这个错误：

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

这是MediaModule声明：

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

这是另一个模块声明：

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

从另一个模块中的组件（ EditorModule ），这是我的导入：

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

我得到了例外。

注意：当我在EditorModule上的组件中使用media directive时，它就是工作文件。 例如， <app-media></app-media>显示MediaComponent的内容

Answer 1

确保media.module.ts导出MediaComponent类。

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

Answer 2

您需要在Angular意义和JavaScript意义上从MediaModule导出MediaComponent，这是不同的事情。

您已经在Angular意义上导出了组件，方法是将它包含在模块的@NgModule装饰器的'exports'部分中，但是您还需要在模块文件的末尾添加export {MediaComponent} ，以便import { MediaComponent } from '@app/views/media/media.module'; 将工作。

此外，您不应该从模块中导出另一个模块 - 您应该从MediaModule的“导出”部分删除“CommonModule”。

所以，改变

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

至：

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

export {MediaComponent};