使用 forRoot 的 Angular 庫

Question

我正在建立一個我希望我的其他項目使用的庫。 我正在嘗試將配置文件傳遞給我定義的模塊：

@NgModule({
  declarations: [ImageComponent],
  imports: [CommonModule],
})
export class ImagesModule {
  static forRoot(config: ImagesConfig): ModuleWithProviders<ImagesModule> {
    return {
      ngModule: ImagesModule,
      providers: [{ provide: ImagesConfig, useValue: config }],
    };
  }
}

export class ImagesConfig {
  cloudName: string;
}

這看起來沒問題，但現在我想在實際模塊中使用cloudName ，如下所示：

@NgModule({
  declarations: [ImageComponent],
  imports: [
    CommonModule,

    CloudinaryModule.forRoot(Cloudinary, {
      config.cloudName,
    }),
  ],
})
export class ImagesModule {
  static forRoot(config: ImagesConfig): ModuleWithProviders<ImagesModule> {
    return {
      ngModule: ImagesModule,
      providers: [{ provide: ImagesConfig, useValue: config }],
    };
  }
}

export class ImagesConfig {
  cloudName: string;
}

這可能嗎？ 如果是這樣，我該怎么做？

---

我已經創建了這樣的模塊：

import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ImageComponent } from './image.component';

import { CloudinaryModule } from '@cloudinary/angular-5.x';
import * as Cloudinary from 'cloudinary-core';

import { ImagesConfig } from './images-config';
import { IMAGES_CONFIG } from './images-config.token';

@NgModule({
  declarations: [ImageComponent],
  imports: [CommonModule],
})
export class ImagesModule {
  static forRoot(config: ImagesConfig): ModuleWithProviders<ImagesModule> {
    return {
      ngModule: ImagesModule,
      providers: [
        { provide: IMAGES_CONFIG, useValue: config },
        ...CloudinaryModule.forRoot(Cloudinary, {
          cloud_name: config.cloudName,
        }).providers,
      ],
    };
  }
}

images-config.ts和images-config.token.ts分別如下所示：

export interface ImagesConfig {
  cloudName: string;
}

和

import { InjectionToken } from '@angular/core';

export const IMAGES_CONFIG = new InjectionToken('IMAGES_CONFIG');

當我嘗試在public-api.ts 中使用時：

/*
* Public API Surface of situ-angular-components
*/

export * from './lib/images/images-config';


export * from './lib/images/images.module';

它全部編譯，但如果我嘗試構建我的庫，我會收到此錯誤：

---

不幸的是，@yurzui 提供的答案似乎不起作用。 如果我將模塊更改為：

@NgModule({
  declarations: [ImageComponent],
  imports: [
    CommonModule,
    CloudinaryModule.forRoot(Cloudinary, { cloud_name: 'demo' }),
  ],
})
export class ImagesModule {}

並建立我的圖書館，它有效。 如果我這樣做：

@NgModule({
  declarations: [ImageComponent],
  imports: [CommonModule],
})
export class ImagesModule {
  static forRoot(config: ImagesConfig): ModuleWithProviders<ImagesModule> {
    return {
      ngModule: ImagesModule,
      providers: [
        { provide: IMAGES_CONFIG, useValue: config },
        ...CloudinaryModule.forRoot(Cloudinary, {
          cloud_name: config.cloudName,
        }).providers,
      ],
    };
  }
}

當我嘗試構建庫時，我收到一條錯誤消息：

如果 'cl-image' 是一個 Angular 組件，那么驗證它是否是這個模塊的一部分。

我在ImageComponent 中使用cl-image 。

Answer 1

您可以嘗試以下操作：

@NgModule({
  declarations: [ImageComponent],
  imports: [
    CommonModule,
    CloudinaryModule,
  ],
})
export class ImagesModule {
  static forRoot(config: ImagesConfig): ModuleWithProviders<ImagesModule> {
    return {
      ngModule: ImagesModule,
      providers: [
        { provide: ImagesConfig, useValue: config },
        ...CloudinaryModule.forRoot(Cloudinary, {
          // pass config.cloudName here,
        }).providers,
      ],
    };
  }
}

export class ImagesConfig {
  cloudName: string;
}