angular - 导入共享 Angular 模块 - 错误模块在本地声明组件，但未导出

Question

我正在尝试创建一个简单的功能模块，但我的导入失败了，我不知道为什么。以下是我的功能模块的重要部分

@NgModule({
  declarations: [
    ProducerLookupComponent,
    ProducerAddComponent
  ]
  exports: [
    ProducerLookupComponent,
    ProducerAddComponent
  ]
})
export class ProducerModule { }

我在我的应用程序模块中导入 ProducerModule。然后我想使用 ProducerLookupComponent 和 ProducerAddComponent 作为对话框的模板，所以我不会在任何地方的另一个 html 模板中添加它们的选择器。这是唯一与创建功能模块的基本教程不同的地方。我创建了其他功能模块，我只是通过它们的选择器使用组件就好了。

所以在我创建对话框的 ts 文件中，我有这样的代码

import { ProducerLookupComponent, ProducerAddComponent} from '../producer/producer.module';

然后我明白了

ERROR in src/app/application-initiation-fio/application-initiation-fio.component.ts:8:10 - error TS2459: Module '"D:/code/ade/client/src/app/producer/producer.module"' declares 'ProducerLookupComponent' locally, but it is not exported.

请注意，我可以像这样在我的生产者模块中添加导出语句来“修复”错误

export{ ProducerLookupComponent } from './producer-lookup/producer-lookup.component';
export{ ProducerAddComponent } from './producer-add/producer-add.component';

但这似乎是多余的。

任何帮助将不胜感激，谢谢!

Answer 1

在feature module中添加export并不是多余的。 header 中的 export 和 NgModule 装饰器中的 exports 属性解决了不同的目的。

NgModule 装饰器中的 exports 属性用于 Angular。Angular 为这些导出的组件创建一个模板，并在它找到该选择器的任何地方传递该模板。在这个过程中，feature 和 main 模块之间没有 typescript 文件依赖。所以 TSC 不会被打扰。

header 中的导出用于 Typescript。每当为 Typescript 类(模块或组件)发出导入时，该类应该有一个相应的导出。如果 TSC 无法找到导出的类，它将抛出此错误。