从模块中导出的角度组件在另一个模块中不可用

Posted 2023-03-13

【中文标题】从模块中导出的角度组件在另一个模块中不可用

【英文标题】：Angular exported component from module not useable in another module

【发布时间】：2018-03-05 00:53:51

【问题描述】：

我正在我的 AppModule 中导出一个自定义组件，但无法在另一个模块中使用它，该模块正在 AppModule 中导入。我以为导出的组件是全局可见的？

我正在尝试在 TestModule 的一个组件中使用 CalendarComponent 和选择器“app-calendar”。

app.module.ts

@NgModule(
  declarations: [ ... ,
    CalendarComponent,
  ],
  imports: [ ... ,
    TestModule,
  ],
  exports: [ ...
    CalendarComponent,
  ],
  providers: [ ... ],
  bootstrap: [AppComponent]
)

test.module.ts

@NgModule(
  declarations: [ ... ,
    TestComponent
  ],
  imports: [ ... ],
  exports: [ ... ],
  providers: [ ... ]
)

test.component.html

<app-calendar></app-calendar>

控制台抛出“app-calendar”不是已知元素（不是模块的一部分）的错误

我错过了什么？

【问题讨论】：

TestModule 应该导入正在导出日历组件的模块

你可以阅读Avoiding common confusions with modules in Angular

@yurzui AppModule 已经导入了 TestModule，所以 TestModule 无法导入 AppModule，因为那将是循环依赖还是我错了？

是的，你是对的

你应该在游览页面的模块中导入calendarComponent的模块

【参考方案1】：

创建CalendarModule 或将Calendar 组件添加到您的共享模块（取决于您的架构），例如：

calendar.module.ts

@NgModule(
  declarations: [CalendarComponent],
  exports: [CalendarComponent]
)
export class CalendarModule 

如果某些声明使用CalendarComponent，则在AppModule 中删除CalendarComponent 并导入CalendarModule（或SharedModule）

app.module.ts

@NgModule(
  declarations: [ ... ,
    CalendarComponent,  <== remove it
  ],
  imports: [
    TestModule,
    // import CalendarModule here if any of declarations above use CalendarComponent in their template
  ],
  exports: [ ...
    CalendarComponent,  // remove it
  ],
  bootstrap: [AppComponent]
)
export class AppModule 

test.module.ts

@NgModule(
  declarations: [ ... ,
    TestComponent
  ],
  imports: [ 
    CalendarModule <=== add this, so TestComponent will be able to use CalenderComponent in its template
  ]
)
export class TestModule 

更多详情见

Angular 2 Use component from another module