I have a component, which I will build using my custom builder. This builder builds my component in ESM format.

My component code (which will be built) is a simple standalone component which imports MyModule.

APPLICATION CODE

MyModule.ts

import { NgModule } from "@angular/core";
import { MyTestLibModule } from "my-test-lib"
@NgModule({
    exports: [
        MyTestLibModule,
    ],
    imports: [
        MyTestLibModule,
    ]
})
export default class MyModule {
}

@Component({
  standalone: true,
  imports:[MyModule]
  selector: 'lib-my-test-lib',
  templateUrl: './my-test-lib.component.html',
  styles: ``
})
export class MyTestLibComponent {

}

LIBRARY CODE

In my test lib I have simple structure like following:

I have my-test-lib.component.ts which creates MyContentComponent on demand <on click>.

@Component({
  selector: 'lib-my-test-lib',
  templateUrl: './my-test-lib.component.html',
  styles: ``
})
export class MyTestLibComponent {
  private popRef: OverlayRef;

  constructor(private overlay: Overlay, private viewContainerRef: ViewContainerRef) {
    this.popRef = this.overlay.create();
  }

  createDynamicComponent(): void {
    const portal = new ComponentPortal(MyContentComponent, this.viewContainerRef);
    let componentRef: ComponentRef<MyContentComponent> = this.popRef.attach(portal);
  }
}

MyContentComponent is empty , it has child component MyChildComponent in its HTML template

@Component({
  selector: 'app-my-content',
  templateUrl: './my-content.component.html',
  styleUrls: ['./my-content.component.css']
})
export class MyContentComponent{
 // empty component
}

my-content.component.html

<app-my-child></app-my-child>

and MyChildComponent

@Component({
  selector: 'app-my-child',
  templateUrl: './my-child.component.html',
  styleUrls: ['./my-child.component.css']
})
export class MyChildComponent{

  constructor(private _init: MyTestLibService) {
    console.log(this._init.someValue, 'This is value from component')
  }
}

MyTestLibService is a very simple component BUT NOT ROOT

@Injectable()
export class MyTestLibService {
  constructor() { }

  someValue: string = 'This is value from MyTestLibService'
}

In MyTestLibModule of course I add it to providers array.

import { NgModule } from "@angular/core";
import { MyTestLibModule } from "my-test-lib"
@NgModule({
    declarations:[
    MyTestLibComponent,
    MyChildComponent,
    MyContentComponent
    ]
    exports: [
        MyContentComponent,
        MyTestLibComponent,
        MyChildComponent
    ]
    providers:[MyTestLibService]
})
export default class MyTestLibModule {
}

And here I get the error. When I compile it by my custom builder the following error appears

NullInjectorError: No provider for MyTestLibService!

I have to add this service to providers of MyContentComponent to make it work…

Additionally, when I just put selector with MyContentComponent in main lib HTML it works without any issue…

Any idea why it doesn’t recognize the provider when I build it to ESM?