Angular CLI 生成的库 - 无法从它的模块导入组件

Question

所以我使用 CLI ng g library <library-name> 制作了一个简单的 Angular 库，我正在尝试从它的模块中导入一个组件。我在导入数组中的应用程序模块中导入 components.module，但我希望能够将此模块中的组件类导入另一个组件，只需编写：

import {MyComponent} from ...;

但我不能这样做 - 我的 IDE 说这个模块没有以我的组件名称导出的成员，当我打开时它看起来像这样：

export declare class ComponentsModule {
}

和 public_api.d.ts {

export * from './lib/components.service';
export * from './lib/components.component';
export * from './lib/components.module';

另外，这里是 library-name.d.ts 文件：

/**
* Generated bundle index. Do not edit.
*/
export * from './public_api';
export { ApiErrorComponent as ɵa } from './lib/modals/api-error/api-error.component';
export { ConfirmationModalComponent as ɵb } from './lib/modals/confirmation- modal/confirmation-modal.component';
export { InfoModalComponent as ɵc } from './lib/modals/info-modal/info- modal.component';

我在 ng build 之前的模块源文件：

import {NgModule} from '@angular/core';
import {ComponentsComponent} from './components.component';
import {ApiErrorComponent} from './modals/api-error/api-error.component';
import {ConfirmationModalComponent} from './modals/confirmation-modal/confirmation-modal.component';
import {InfoModalComponent} from './modals/info-modal/info-modal.component';

@NgModule({
  imports: [],
  declarations: [
    ComponentsComponent,
    ApiErrorComponent,
    ConfirmationModalComponent,
    InfoModalComponent,
  ],
  exports: [
    ComponentsComponent,
    ApiErrorComponent,
    ConfirmationModalComponent,
    InfoModalComponent,
  ],
})
export class ComponentsModule {
}

为什么它不起作用以及为什么我无法导入这些组件中的任何一个？它是使用 ng build library-name 从 Angular CLI 自动生成的。在包中，除了“lib”之外，我还有几个目录 - ems2015、esm5、fesm5、fesm2015 和捆绑包，但我认为我可以导入我的模块并在任何我喜欢的地方使用它的任何组件 - 但它看起来像它们是私有的或其他东西，使用 CLI 生成和构建库的文档不太好。

感谢所有帮助。

Answer 1

我希望您届时能找到解决方案。我遇到了同样的问题，让我分享我的解决方案。

修改库中的 public_api.d.ts 以包含所有自定义组件。所以在你的情况下，它应该是这样的：

export * from './lib/modals/api-error/api-error.component';
export * from './lib/modals/confirmation- modal/confirmation-modal.component';
export * from './lib/modals/info-modal/info- modal.component';

然后，运行 ng build <library-name> 当 library-name.d.ts 看起来像这样时，您的所有组件都已导出。

export * from './public_api';

要在另一个模块中导入组件，请执行以下操作：

import {NgModule} from '@angular/core';
import {ComponentsComponent} from './components.component';
import {ApiErrorComponent} from 'library-name';
import {ConfirmationModalComponent} from 'library-name';
import {InfoModalComponent} from 'library-name';