多个模块时Angular库无法导出组件

Question

我使用此处的文档创建了一个库：https://angular.io/guide/creating-libraries

我的库中现在有一些组件、指令和服务，我想分成不同的模块。我创建了单独的模块并在 public-api.ts 文件中引用它们，如下所示：

export * from './lib/animations/animations.module';
export * from './lib/breadcrumb/breadcrumb.module';
export * from './lib/directives/directives.module';
export * from './lib/footer/footer.module';
export * from './lib/header/header.module';
export * from './lib/loader/loader.module';

export * from './lib/animations/collapse';
export * from './lib/animations/fade';
export * from './lib/animations/fade-in-up';

每个模块声明任何组件并导出它们，例如：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { HeaderComponent } from './header.component';

@NgModule({
  declarations: [HeaderComponent],
  exports: [HeaderComponent],
  imports: [CommonModule],
})
export class HeaderModule {}

但是如果我尝试在另一个项目中使用它，它就不起作用。 我可以很好地导入模块，并且实际上可以在 HTML 中使用该组件，但是如果我尝试在后面的代码中使用该组件，则会出现错误：

import { HeaderComponent } from '@situlive/situ-angular-components';

public toggle(header: HeaderComponent, toggled: boolean) {
  header.toggle = toggled;
}

它告诉我我的模块没有导出成员'HeaderComponent'，但是如果我删除了引用并将方法更改为：

public toggle(header: any, toggled: boolean): void {
  header.toggle = toggled;
}

它有效。有什么我想念的吗？我是否也需要从主模块中导出我的组件？

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HeaderComponent } from './header/header.component';
import { HeaderModule } from './header/header.module';

@NgModule({
  imports: [CommonModule, RouterModule, HeaderModule],
  exports: [HeaderComponent],
})
export class SituAngularComponentsModule {}

Answer 1

export * from AType;

允许你导出一个 Type 并在外部使用它，它与 Angular 无关，但你需要它来编译 typescript。

如果您需要在外部项目中有组件类型引用，您还需要导出此组件类。所以添加你的模块 .ts 文件或 public-api.ts

export * from HeaderComponent;

信息

模块声明中的“exports”数组仅用于角度范围（允许或不允许跨模块共享组件）。对于@injectable，它们会自动导出，但您仍然需要为 typescript 导出类：“export * from MyService”