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

Question

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

\n\n

import {MyComponent} from ...;\n

\n\n

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

\n\n

export declare class ComponentsModule {\n}\n

\n\n

和 public_api.d.ts {

\n\n

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

\n\n

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

\n\n

/**\n* Generated bundle index. Do not edit.\n*/\nexport * from \'./public_api\';\nexport { ApiErrorComponent as \xc9\xb5a } from \'./lib/modals/api-error/api-error.component\';\nexport { ConfirmationModalComponent as \xc9\xb5b } from \'./lib/modals/confirmation- modal/confirmation-modal.component\';\nexport { InfoModalComponent as \xc9\xb5c } from \'./lib/modals/info-modal/info- modal.component\';\n

\n\n

ng 构建之前我的模块源文件：

\n\n

import {NgModule} from \'@angular/core\';\nimport {ComponentsComponent} from \'./components.component\';\nimport {ApiErrorComponent} from \'./modals/api-error/api-error.component\';\nimport {ConfirmationModalComponent} from \'./modals/confirmation-modal/confirmation-modal.component\';\nimport {InfoModalComponent} from \'./modals/info-modal/info-modal.component\';\n\n@NgModule({\n  imports: [],\n  declarations: [\n    ComponentsComponent,\n    ApiErrorComponent,\n    ConfirmationModalComponent,\n    InfoModalComponent,\n  ],\n  exports: [\n    ComponentsComponent,\n    ApiErrorComponent,\n    ConfirmationModalComponent,\n    InfoModalComponent,\n  ],\n})\nexport class ComponentsModule {\n}\n

\n\n

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

\n\n

将感谢所有的帮助。

\n

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';