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

Question

我用CLI创建了一个简单的Angular库 ng g library <library-name>，现在我想从该库的模块中导入一个组件。我的应用程序模块中的导入数组中引入了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和bundles，但我认为我能够只导入我的模块并在任何地方使用它的任何组件——但看起来它们是私有的或其他原因，而使用CLI生成和构建库的文档并不是很好。

将感激所有帮助。

- grhu

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

- Kohei Arai

---

有没有可能将一个库分组，这样我就可以这样做：import { SomeService } from '@myOrg/lib/services'; 和 import { SomeEntity } from '@myOrg/lib/model'？ - ciekawy

我也做了同样的事情，但它显示找不到模块，新模块如何知道已构建模块的位置？ - Rahul Singh

我按照这种方式导出组件后无法导入它。作为解决方法，我在库名称后面使用完整路径进行导入。例如：import { MyComponent } from "my-lib/path/to/component"。 - Vallerious

Answer 2

我按照这个很好的小指南创建了一个库，以便测试将其添加到我的本地npm注册表（Verdaccio）中。 https://jasonwatmore.com/post/2020/06/16/angular-npm-how-to-publish-an-angular-component-to-npm 但是当我尝试在我的应用程序中导入该库的模块时，它找不到它，尽管我可以看到该文件夹在我的node_modules中。问题出在我在ng build之后发布时，我错过了进入库项目的dist/my-library-name文件夹的步骤。一旦我从正确的位置发布了新版本，我就能够将该模块导入到我的应用程序中。

- Eric Soyke