Mismatch ng-bootstrap version for angular 12 and bootstrap 5

[Lausselloic]

https://github.com/Orange-OpenSource/Orange-Boosted-Angular/blob/main/package.json#L48

Ng-bootstrap version compatible with bootstrap 5 have moved from v11-beta to v12-beta => https://ng-bootstrap.github.io/#/home

Ng-boosted v10.1.0 is corrupted and load boosted 5 with a ng-bootstrap version that create html for boosted 4

[Fabiencdp]

I also noticed same behaviors.
Is there a quick workaround ?

[Lausselloic]

Hello yes at time the workaround is to add boosted and ng-bootstrap dependency in place of ng-boosted : npm uninstall ng-boosted && npm i --save boosted @ng-bootstrap/ng-bootstrap@bootstrap5

[Fabiencdp]

Thanks for your answer, using your solution i also get some dependencies warning...
No time to dig it for the moment, here is what i did to keep our app running :

Lock ng-boosted to 10.0.0
Lock all angular packages version to 12.2.3

[Lausselloic]

dependencies warning about boosted peerdependencies I think? They are optionnal, and you don't need them

[Fabiencdp]

Sorry, i should precise : dependencies warning and tooltips malfunctions.

[Fabiencdp]

I forced a reproduction with this configuration :

    "@angular/animations": "^12.2.1",
    "@angular/cdk": "^12.2.1",
    "@angular/common": "~12.2.1",
    "@angular/compiler": "~12.2.1",
    "@angular/core": "~12.2.1",
    "@angular/forms": "~12.2.1",
    "@angular/platform-browser": "~12.2.1",
    "@angular/platform-browser-dynamic": "~12.2.1",
    "@angular/router": "~12.2.1",
    "@angular/localize": "^12.2.1",
    "rxjs": "^6.6.7",
    "tslib": "^2.3.1",
    "zone.js": "~0.11.4",
    "ng-boosted": "^10.1.0",

I get following warnings:

npm WARN While resolving: @ng-bootstrap/[email protected]
npm WARN Found: @angular/[email protected]
npm WARN node_modules/@angular/common
npm WARN   @angular/common@"~12.2.1" from the root project
npm WARN   11 more (@angular/cdk, @angular/forms, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer @angular/common@"^13.0.0" from @ng-bootstrap/[email protected]
npm WARN node_modules/@ng-bootstrap/ng-bootstrap
npm WARN   @ng-bootstrap/ng-bootstrap@"^11.0.0-beta.2" from [email protected]
npm WARN   node_modules/ng-boosted
npm WARN 
npm WARN Conflicting peer dependency: @angular/[email protected]
npm WARN node_modules/@angular/common
npm WARN   peer @angular/common@"^13.0.0" from @ng-bootstrap/[email protected]
npm WARN   node_modules/@ng-bootstrap/ng-bootstrap
npm WARN     @ng-bootstrap/ng-bootstrap@"^11.0.0-beta.2" from [email protected]
npm WARN     node_modules/ng-boosted
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @ng-bootstrap/[email protected]
npm WARN Found: @angular/[email protected]
npm WARN node_modules/@angular/core
npm WARN   @angular/core@"~12.2.1" from the root project
npm WARN   19 more (@angular/animations, @angular/cdk, @angular/common, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer @angular/core@"^13.0.0" from @ng-bootstrap/[email protected]
npm WARN node_modules/@ng-bootstrap/ng-bootstrap
npm WARN   @ng-bootstrap/ng-bootstrap@"^11.0.0-beta.2" from [email protected]
npm WARN   node_modules/ng-boosted
npm WARN 
npm WARN Conflicting peer dependency: @angular/[email protected]
npm WARN node_modules/@angular/core
npm WARN   peer @angular/core@"^13.0.0" from @ng-bootstrap/[email protected]
npm WARN   node_modules/@ng-bootstrap/ng-bootstrap
npm WARN     @ng-bootstrap/ng-bootstrap@"^11.0.0-beta.2" from [email protected]
npm WARN     node_modules/ng-boosted
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @ng-bootstrap/[email protected]
npm WARN Found: @angular/[email protected]
npm WARN node_modules/@angular/forms
npm WARN   @angular/forms@"~12.2.1" from the root project
npm WARN   2 more (ng-boosted, ngx-forms-typed)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer @angular/forms@"^13.0.0" from @ng-bootstrap/[email protected]
npm WARN node_modules/@ng-bootstrap/ng-bootstrap
npm WARN   @ng-bootstrap/ng-bootstrap@"^11.0.0-beta.2" from [email protected]
npm WARN   node_modules/ng-boosted
npm WARN 
npm WARN Conflicting peer dependency: @angular/[email protected]
npm WARN node_modules/@angular/forms
npm WARN   peer @angular/forms@"^13.0.0" from @ng-bootstrap/[email protected]
npm WARN   node_modules/@ng-bootstrap/ng-bootstrap
npm WARN     @ng-bootstrap/ng-bootstrap@"^11.0.0-beta.2" from [email protected]
npm WARN     node_modules/ng-boosted
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @ng-bootstrap/[email protected]
npm WARN Found: @angular/[email protected]
npm WARN node_modules/@angular/localize
npm WARN   @angular/localize@"~12.2.1" from the root project
npm WARN   2 more (@angular-devkit/build-angular, ng-boosted)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer @angular/localize@"^13.0.0" from @ng-bootstrap/[email protected]
npm WARN node_modules/@ng-bootstrap/ng-bootstrap
npm WARN   @ng-bootstrap/ng-bootstrap@"^11.0.0-beta.2" from [email protected]
npm WARN   node_modules/ng-boosted
npm WARN 
npm WARN Conflicting peer dependency: @angular/[email protected]
npm WARN node_modules/@angular/localize
npm WARN   peer @angular/localize@"^13.0.0" from @ng-bootstrap/[email protected]
npm WARN   node_modules/@ng-bootstrap/ng-bootstrap
npm WARN     @ng-bootstrap/ng-bootstrap@"^11.0.0-beta.2" from [email protected]
npm WARN     node_modules/ng-boosted
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Package renamed as '@messageformat/core', see messageformat.github.io for more details. 'messageformat' will eventually provide a polyfill for Intl.MessageFormat, once it's been defined by Unicode & ECMA.
npm WARN deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1``` 

And the main problems is that every mouse hover on tooltips throw an error: 
`ERROR TypeError: componentFactory.create is not a function` 

[Lausselloic]

sorry for the late reply I miss your reply :-(
So according to Ng-boostrap official supported versions :
If you want to use angular 12 you need to stay with boosted 4 :-(
https://ng-bootstrap.github.io/#/getting-started

Compatibility with Boosted 5 (or bootstrap 5) is handled by Ng-Bootstrap v12 with angular 13
You need to remove ng-boosted dependency :
npm uninstall ng-boosted
And then work with boosted and ng-bootstrap
npm i --save boosted@5 @ng-bootstrap/ng-bootstrap@12