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

Question

因此，我使用 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';

此外，这是库名.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 生成和构建库的文档不太好。

感谢所有帮助。

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

Answer 2

我按照这个漂亮的小指南创建了一个库来测试将其添加到我的本地 npm 注册表 (Verdaccio)。 https://jasonwatmore.com/post/2020/06/16/angular-npm-how-to-publish-an-angular-component-to-npm

但是当我尝试在我的消费应用程序中导入库的模块时，它找不到它，即使我可以看到该文件夹位于我的node_modules中。问题是当我在 ng 构建之后发布它时，我错过了位于库项目的 dist/my-library-name 文件夹中的步骤。一旦我从正确的位置发布了新版本，我就能够将该模块导入到我的消费应用程序中。