typescript - Angular CLI 生成的庫 - 無法從它的模組導入組件

所以我使用 CLI ng g library <library-name> 製作了一個簡單的 Angular 函式庫，並且我正試圖從它的模組中導入一個組件。我在應用程式模組的 imports 陣列中導入了 components.module，但我希望能夠直接通過寫入以下方式，將這個模組中的 components 類導入到另一個組件中：

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 {
}

為什麼它不起作用，為什麼我無法導入這些組件？它是使用 Angular CLI 通過 ng build library-name 自動生成的。在這個包中，除了「lib」之外，我還有幾個目錄 - ems2015、esm5、fesm5、fesm2015 和 bundles，但我以為我能夠直接導入我的模組，並在任何地方使用其中的任何組件 - 但看起來它們像是私有的或者其他什麼情況，而且有關使用 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';

答案＃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 資料夾這一步。一旦我從正確的位置發佈了較新的版本，我就能將模組導入到我的使用應用程式中。