Ngx-bootstrap: Import ModalDirective won't build in 5.6.1

[kkilton]

import { ModalDirective } from "ngx-bootstrap";

Here's my error using "ngx-bootstrap": "^5.2.0" in my package.json

import { ModalDirective } from "ngx-bootstrap"; ~~~~~~~~~~~~~~~ app/xx/xx.component.ts:10:32 - error TS2307: Cannot find module 'ngx-bootstrap'.

this builds just fine though "ngx-bootstrap": "~5.5.0"

[mowme]

I get the same issues for components using ngx-bootstrap (example isArray from Cannot find module 'ngx-bootstrap' using isArray).

[bartromgens]

Try import { ModalDirective } from "ngx-bootstrap/modal";

[kkilton]

Thanks, that worked @bartromgens but why did they make breaking changes like that inside a minor change? Bad form!

[daniloff200]

This change was needed for compatibility with Angular 9: https://github.com/valor-software/ngx-bootstrap/issues/5653

This change was mentioned in the documentation for each component, for example, check Usage block here:

https://valor-software.com/ngx-bootstrap/#/modals

Also, I wish, that users, that create issue, will not only mention a ngx-bootstrap version, that they use, but also an Angular version. Bad form! (c)

[kkilton]

Thanks for pointing me to the documentation, I missed that. @daniloff200. I actually DID mention the versions that I was using what version was working.

Looks like I will be locking down all versions of my packages from now on to use ~, not the default ^, since this is the 2nd time this week that I've spent half a day or more troubleshooting this type of breaking change with a package in the middle of a sprint.

[daniloff200]

I see, @kkilton .
I asked about the Angular version, because, if you used 8, then, it means, that something wrong on our side.
If it's 9, the solution from @bartromgens is an obvious one

Actually, locking up the package version is a good practice, because, you can't watch all changelogs of all libraries that you're using, and you don't know what changes can be done there, and also, what features can be broken. Sometimes, even better to use package-lock.json and be 100% safe

https://blog.logrocket.com/why-you-should-use-package-lock-json/

[bartromgens]

@daniloff200 It would be nice to somehow make it more explicit what version supports what Angular version. I don't know if Angular 9 is fully supported, but the readme only lists 8 (https://github.com/valor-software/ngx-bootstrap#compatibility).
A versioning that follows Angular versions would be nice (so ngx-bootstrap 9.x works with Angular 9). Not sure about the downsides or any convention here.

Anyway, I am very happy to see support for Angular 9.

[devin5885]

This is an issue for Angular 8.x as well. I have not yet updated to Angular 9, but the update to ngx-bootstrap 5.6.1 forced me to update almost 25 source files.