Override Angular providers provided in root

Question

I import a modal library of ng-bootstrap in a lazy module.

@NgModule({imports: [NgbModalModule]})

This library has a NgbModal service provided in root.

@Injectable({providedIn: 'root'})
class NgbModal {...}

I inject it into a component.

constructor(private modal: NgbModal) {}

I develop a class extension of that one.

export class CustomNgbModal extends NgbModal{...}

How can I override NgbModal type with CustomNgbModal?

Using modules will be

{provide: NgbModal, useClass: CustomNgbModal}

but using providedIn root metadata, no clue.

So, how can I override a module which is provided in root?

do you want to make library think it is using CustomNgbModal and your code using it as CustomNgbModal? — Andrei
@Andrei I've injected NgbModal in a lot of componentes in my app. I want replace this type with my custom type. Like {provide: NgbModal, useClass: CustomNgbModal}but with modules provided in root. — Serginho

Andrei Andrei · Accepted Answer · 2020-01-29T16:41:49

I beleieve what you are trying to achieve can be done with

//module
providers: [
  CustomNgbModal, // so you can inject your custom service
  {provide: NgbModal, useExisting: CustomNgbModal} // to the library would use this service instead of its own
]

Override Angular providers provided in root

1 Answers