Angular library using forRoot

Question

I am setting up a library that I would like my other projects to use. I am trying to pass a config file to my module which I have defined like this:

@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;
}

This looks ok, but now I would like to use the cloudName in the actual module, like this:

@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;
}

Is this possible? If so, how can I do it?

---

I have created the module as such:

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 and images-config.token.ts look like this, respectively:

export interface ImagesConfig {
  cloudName: string;
}

and

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

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

When I try to use in the public-api.ts :

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

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


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

It all compiles, but if I try to build my library I get this error:

---

Unfortunately, the answer @yurzui provided doesn't appear to work. If I change my module to this:

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

And build my library, it works. If I do it like this:

@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,
      ],
    };
  }
}

When I try to build the library, I get an error stating:

If 'cl-image' is an Angular component, then verify that it is part of this module.

I am using cl-image in the ImageComponent .

Answer 1

You can try the following:

@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;
}