CODEWITHSUNDEEP
angulartypescriptng-bootstrap
Gods-Favorite-Idiot
Gods-Favorite-Idiot

Reputation: 11

NG0203 error while using ngbTooltip directive as manual trigger in custom qtip directive

Bug description:

I have a directive dewQtip in qtip.directive.ts which basically does the same thing as ngbTooltip directive along with some customizations that are to be maintained in the entire organization ecosystem. In the directive, I am manually triggering the tooltip to open : this.ngbToolTip.open();

But right above this I am setting the ngbToolTip as:

this.ngbToolTip = new NgbTooltip(
        this._elementRef,
        this._renderer,
        this.injector,
        this.viewContainerRef,
        this.ngbTooltipConfig,
        this.ngZone,
        document,
        this._cdRef,
        this._appRef
      );

And this is where the error generates from.

Error:

Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with runInInjectionContext. Find more at here

Call Stack

The error seems to stem from

export function ngbPositioning() {
    const rtl = inject(NgbRTL);

So it goes from,

export function ngbPositioning() {         
    const rtl = inject(NgbRTL);

in positioning.ts ^ ^ private _positioning = ngbPositioning(); in tooltip.ts ^ ^ this.ngbToolTip = new NgbTooltip(.....) in /qtip.directive/

Link to minimally-working StackBlitz that reproduces the issue:

Have created a minimal reproduction with the custom directive in question. Reproduction Link

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 16.1.7

ng-bootstrap: 15.1.2

Bootstrap: 5.2.3

Workarounds:

Still investigating.

I tried downgrading to the previous versions of @ng-bootstrap/ng-bootstrap (since the issue itself was faced after ng upgrade 11 --> 16) but these versions are not supported by angular 16 anymore. Yet to find any workarounds so far.

Upvotes: 1

Views: 77

Answers (0)

Related Questions