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

Question

所以我使用 CLI 创建了一个简单的 Angular 库 ng g library <library-name>我正在尝试从它的模块导入一个组件。我正在导入数组中的应用程序模块中导入 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';

此外，这是库名.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 构建之前我的模块源文件:

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 和 bundle ，但我认为我可以导入我的模块并在任何我喜欢的地方使用其中的任何组件 - 但它看起来像它们是私有(private)的或者其他的，并且使用 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';