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

Posted 2023-03-13

【中文标题】Angular CLI 生成的库 - 无法从它的模块导入组件

【英文标题】：Angular CLI generated library - can't import components from it's module

【发布时间】：2019-01-04 11:34:56

【问题描述】：

所以我使用 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 生成和构建库的文档不太好。

感谢所有帮助。

【参考方案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';

【讨论】：

是否有可能拥有一个库但将其分组在里面，这样我就可以做到：import SomeService from '@myOrg/lib/services'; 和 import SomeEntity from '@myOrg/lib/model' ？

我也是这样做的，但是它说找不到模块，新模块如何知道构建模块的位置

以这种方式导出组件后，我无法导入组件。作为一种解决方法，我在库名称后使用完整路径导入它。即从“my-lib/path/to/component”导入 MyComponent