NgbRTL isn't exported from @ng-bootstrap/ng-bootstrap

[snakamura]

Bug description:

After upgrading ng-bootstrap from 13.0.0 to 13.1.0, I found that NgbTooltip now took NgbRTL. So I injected NgbRTL and passed it to the constructor of NgbTooltip. When I did this, I imported NgbRTL from @ng-bootstrap/ng-bootstrap/util/rtl directly, because it wasn't exported from @ng-bootstrap/ng-bootstrap.

Now, while building the Angular app, I encountered this error.

./dist/util/fesm2020/util.mjs:16:0-60 - Error: Module not found: Error: Package path ./util/rtl is not exported from package /Users/project/node_modules/@ng-bootstrap/ng-bootstrap (see exports field in /Users/project/node_modules/@ng-bootstrap/ng-bootstrap/package.json)

I guess this can be fixed by exporting NgbRTL from @ng-bootstrap/ng-bootstrap. Or, am I missing something?

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 14.2.6
ng-bootstrap: 13.1.0
Bootstrap: 5.2.2

[maxokorokov]

NgbRTL is a private service at the moment, you shouldn't use it

[snakamura]

@maxokorokov Thank you for your answer. Does it mean that we shouldn't create NgTooltip programmatically? We have a directive that will create NgbTooltip depending on the situation dynamically. So we instantiate NgbTooltip programmatically. Now that the constructor of NgbTooltip takes NgbRTL, we can no longer instantiate it if we shouldn't use NgbRTL. Can I ask what your suggestion is in this kind of situations?

[maxokorokov]

I wouldn't instantiate directives like this dynamically exactly because of the issue you're facing now... constructors are not meant to be called manually...

Would this solve your issues with Angular 15? → angular/angular#46868

I'll see if we can make NgbRTL public meanwhile

[snakamura]

@maxokorokov Thank you for your suggestion. Yes, I think angular/angular#46868 will help. With it, we would no longer need to instantiate NgbTooltip directly.

Even though creating an instance isn't recommended, it'd be great if you can make NgbRTL public.

[yildiraymeric]

We have a custom directive which extends NgbTooltip and adds additional functionality that we need to it. Now we can not compile our code due to NgbRTL not being public.

Please make NgbRTL public.

[murarinayak]

I have the same issue for NgbTooltip as well as NgbDropdown.
I have extended these 2 components with additional functionality. Now this doesn't work, after updating.

Please make NgbRTL public.

[jakobpinggera]

We got the same issue as we are extending NgbTooltip. Making NgbRTL public would resolve this.

[Wycza]

Hello, I have the same issue. I can't extend NgbPopover because NgbRTL is not exported. To make it work with Angular 15 now I just copied NgbRTL.ts file into my project and then used it as below:

constructor(
    [...]
    private rtl: NgbRTL,
    [...]
  ) {
    super(_elRef, rtl as any, _render, injector, viewContainerRef, config, ngZone, _document, changeRef, applicationRef);
    }

[maxokorokov]

While we still do not recommend extending our components, this would probably help → #4443. WDYT?

[snakamura]

@maxokorokov Oh, it looks great to me. Thank you.

We're moving toward hostDirectives based on your suggestion, by the way. It seems working fine with Angular 15 and ng-bootstrap 14.0.0.

[hudsontavares]

For people stumbling upon this problem where upgrading to version 14.0.0 isn't an immediate solution, two suggestions:

a) If you're injecting properties, use Angular 14+ inject() instead of declaring a constructor

import { inject } from '@angular/core';
import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';

import { MyInjectable } from './my/injectable';

export MyExtendedClass extends NgbPopover {
private readonly myInjectable = inject(MyInjectable);

b) Any property initialization could be done on the ngOnInit instead of the constructor.

Using that, you don't need to override the constructor and avoid the ngbRTL problem.

[maxokorokov]

@hudsontavares, this should have been fixed in 14.0.1 → 7f2146d

[hudsontavares]

@hudsontavares, this should have been fixed in 14.0.1 → 7f2146d

Yes, @maxokorokov, thanks for pointing it out - I was shedding some alternative light for people in projects where upgrading to the fixed version isn't an immediate option and existing components are already extending some ng-bootstrap stuff. You don't need to redeclare a constructor in the subclass using the approaches above, so the original, ngbRTL-enabled constructor will continue working.