首页 文章

Angular CLI生成的库 - 可以't import components from it'的模块

提问于
浏览 次
0

所以我使用CLI ng g library <library-name> 和I 'm trying to import a component from it'模块创建了一个简单的Angular库 . 我正在导入数组中的app模块中导入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和bundle，但我认为我可以导入我的模块并使用任何我喜欢的任何组件 - 但它看起来像它们是私有的或类似的东西，使用CLI生成和构建库的文档并不是那么好 .

将适用所有的帮助 .

angular typescript npm angular-cli

1 回答

  • 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';
    回复于

相关问题