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

Question

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

我正在尝试在 TestModule 的组件中使用带有选择器 'app-calendar' 的 CalendarComponent。

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' 不是已知元素（不是模块的一部分）的错误

我错过了什么？

Answer 1

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

calendar.module.ts

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

在 AppModule 中删除所有地方的 CalendarComponent 并导入 CalendarModule（或 SharedModule）如果某些声明使用 CalendarComponent

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 从模块中导出的组件在另一个模块中不可用

Angular exported component from module not useable in another module

angular-module

angular-components

angular