forRoot method Angular library not firing

Question

i have created an angular library with a static forRoot method to pass static data from the application to the library so i created an forRoot method to handle this

export class DynamicFormBuilderModule {
  public static forRoot(config: Configurations): ModuleWithProviders<DynamicFormBuilderModule> {
    console.log('inside forRoot method',config)
    return {
      ngModule: DynamicFormBuilderModule,
      providers: [
        ConfigService,
        {
          provide: Configurations,
          useValue: config,
        },
      ],
    };
  }
}

this is passed data from the application to the library

 DynamicFormBuilderModule.forRoot({
  production: environment.production,
  baseUrl: environment.baseUrl,
  maxMaskCharacterLength: environment.maxMaskCharacterLength,
  rejectedExtentions: environment.rejectedExtentions,
  attachmentImage: environment.attachmentImage,
  attachmentFile: environment.attachmentFile,
  attachmentBoth: environment.attachmentBoth,
  socketAutomaticReconnectIntervals: environment.socketAutomaticReconnectIntervals,
  undoCount: environment.undoCount,
}),

the problem is after building the lib and uploading it into devops artifact and downloaded into the node_module folder

i got all the sent data from application is blank so after adding some console logs inside the forRoot created inside the library module i found that the forRoot is not firing i have no idea why and i have spent a lot of time trying to debug but with no luck.

here is a snap shot of the uploaded artifact files

UPDATE : here is my ConfigService constructor

constructor(@Optional() config?: Configurations) {
    if (config) {
      this._production = config.production;
      this._baseUrl = config.baseUrl;
      this._maxMaskCharacterLength = config.maxMaskCharacterLength;
      this._rejectedExtentions = config.rejectedExtentions;
      this._attachmentImage = config.attachmentImage;
      this._attachmentFile = config.attachmentFile;
      this._attachmentBoth = config.attachmentBoth;
      this._socketAutomaticReconnectIntervals = config.socketAutomaticReconnectIntervals;
      this._undoCount = config.undoCount;
    }
  }

Answer 1

I made a little example that work. I put all the differents components and service (it is a very large post, sorry)

Library

app-lib.module

import { ModuleWithProviders,NgModule,Optional,SkipSelf } from '@angular/core';

import { AppLibComponent } from './app-lib.component';
import { CommonModule } from '@angular/common'; 
import { AppLibService,UserServiceConfig } from './app-lib.service';


@NgModule({
  declarations: [AppLibComponent],
  imports: [CommonModule
  ],
  exports: [AppLibComponent]
})
export class AppLibModule { 
  constructor(@Optional() @SkipSelf() parentModule?: AppLibModule) {
    if (parentModule) {
      throw new Error(
        'GreetingModule is already loaded. Import it in the AppModule only');
    }
  }

  public static forRoot(config: UserServiceConfig): ModuleWithProviders<AppLibModule> {
    console.log(config)
    return {
      ngModule: AppLibModule,
      providers: [
        {provide: AppLibService, useValue: config }
      ]
    };
  }
}

app-lib.component

import { Component, OnInit } from '@angular/core';
import { AppLibService } from './app-lib.service';
@Component({
  selector: 'lib-app-lib',
  template: `
  <h1>{{title}}</h1>
  <p *ngIf="user">
    <i>Welcome, {{user}}</i>
  <p>
  `,
  styles: [
  ]
})
export class AppLibComponent implements OnInit {
  title = 'NgModules';
  user = '';

  constructor(userService: AppLibService) {
    this.user = userService.userName;
  }

  ngOnInit(): void {
  }

}

app-lib.service

import { Injectable,Optional } from '@angular/core';

let nextId = 1;

export class UserServiceConfig {
  userName = 'Philip Marlowe';
}

@Injectable({
  providedIn: 'root'
})
export class AppLibService {
  private id = nextId++;

  constructor(@Optional() config?: UserServiceConfig) {
    if (config) { this._userName = config.userName; }
  }

  get userName() {
    // Demo: add a suffix if this service has been created more than once
    const suffix = this.id > 1 ? ` times ${this.id}` : '';
    return this._userName + suffix;
  }
  private _userName = 'Sherlock Holmes';
}

aplication

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';  
import { environment } from './../environments/environment';

import { AppComponent } from './app.component';
import { AppLibModule} from 'app-lib'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,CommonModule,AppLibModule.forRoot({userName: environment.userName})
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component

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

@Component({
  selector: 'app-root',
  template:`
  <lib-app-lib></lib-app-lib>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app-library-use';
}

the enviroment.ts

export const environment = {
  production: false,
  userName:"User Developer"
};

the enviroment.ts

export const environment = {
  production: true,
  userName:"User Production"
};

NOTE I use this SO to generate the library in local

NOTE: I had problems because at fisrt, I not imported the commonModule to the library

NOTE: I put in github the two projects

Answer 2

if your lib is correctly built, you should see in local all the components it's supposed to expose. Remember that everything that you want to expose outside your lib must be declared in the publi-api.ts file.

My advice : first test your integration of your lib components in local with a "sandbox" app situated next to your lib in a directory like /projects. This must always work if your tsconfig.json does declare your lib correctly :

"paths": {
      "@me/lib-dfb": [
        "dist/lib-dfb/lib-dfb",
        "dist/lib-dfb"
      ],
}

Only when this works, test in pack / publish mode.