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

时间:2018-07-27 10:45:30

标签: angular typescript npm angular-cli

因此,我使用CLI ng g library <library-name>制作了一个简单的Angular库,我正尝试从其模块中导入组件。我正在将我的应用程序模块中的components.module导入imports数组中,但是我希望能够通过以下方式将组件类从该模块导入到另一个组件中:

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构建之前我的模块源文件:

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库名从Angular CLI自动生成的。在软件包中,除了“ lib”外,我还有几个目录-ems2015,esm5,fesm5,fesm2015和bundles,但我认为我可以导入模块并在需要的地方使用其中的任何组件-但看起来像它们是私有的,使用CLI生成和构建库的文档不是很好。

将欣赏所有帮助。

1 个答案:

答案 0 :(得分:0)

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

修改库中的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';