'ngx-bootstrap/modal' module or it's corresponding type declarations cannot be found

Product/components used and version/fix level:

I am using my-first-plugin@1016.0.278 to make my first plugin using the widgets template.

Detailed explanation of the problem:

It appears that ngx-bootstrap cannot be found in the widget template.

In app.module.ts it requires an import;

import { BsModalRef } from 'ngx-bootstrap/modal';


  imports: [
    ngRouterModule.forRoot([], { enableTracing: false, useHash: true }),
  providers: [BsModalRef],
  bootstrap: [BootstrapComponent]
export class AppModule {}

I tried to run npm install ngx-bootstrap however an error came up as it was unable to resolve the dependency tree.

Error messages / full error message screenshot / log file:

> my-first-plugin@1016.0.278 postinstall
> ngcc

Processing legacy "View Engine" libraries:
- @ngx-formly/core [fesm2015/esm2015] (git+https://github.com/ngx-formly/ngx-formly.git)
- @ngx-formly/core/json-schema [fesm2015/esm2015] (git+https://github.com/ngx-formly/ngx-formly.git)
- @ngx-formly/core/select [fesm2015/esm2015] (git+https://github.com/ngx-formly/ngx-formly.git)
- @ngx-formly/core [fesm5/esm5] (git+https://github.com/ngx-formly/ngx-formly.git)
- @ngx-formly/core [esm2015/esm2015] (git+https://github.com/ngx-formly/ngx-formly.git)
- @ngx-formly/core [esm5/esm5] (git+https://github.com/ngx-formly/ngx-formly.git)
- @ngx-formly/core [main/umd] (git+https://github.com/ngx-formly/ngx-formly.git)
- @ngx-formly/core/json-schema [fesm5/esm5] (git+https://github.com/ngx-formly/ngx-formly.git)
- @ngx-formly/core/json-schema [esm2015/esm2015] (git+https://github.com/ngx-formly/ngx-formly.git)
- @ngx-formly/core/json-schema [esm5/esm5] (git+https://github.com/ngx-formly/ngx-formly.git)
- @ngx-formly/core/json-schema [main/umd] (git+https://github.com/ngx-formly/ngx-formly.git)
- @ngx-formly/core/select [fesm5/esm5] (git+https://github.com/ngx-formly/ngx-formly.git)
- @ngx-formly/core/select [esm2015/esm2015] (git+https://github.com/ngx-formly/ngx-formly.git)
- @ngx-formly/core/select [esm5/esm5] (git+https://github.com/ngx-formly/ngx-formly.git)
- @ngx-formly/core/select [main/umd] (git+https://github.com/ngx-formly/ngx-formly.git)
Encourage the library authors to publish an Ivy distribution.

added 1894 packages, and audited 1895 packages in 1m
198 packages are looking for funding
  run `npm fund` for details

24 vulnerabilities (2 moderate, 22 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible, run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
PS C:\Users\myUser\OneDrive\Documents\Project Orion\Cumulocity\Web Dev Tutorials\my-first-plugin> npm install ngx-bootstrap
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-first-plugin@1016.0.278
npm ERR! Found: @angular/animations@14.0.6
npm ERR! node_modules/@angular/animations
npm ERR!   @angular/animations@"14.0.6" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/animations@"^15.0.0" from ngx-bootstrap@10.2.0
npm ERR! node_modules/ngx-bootstrap
npm ERR!   ngx-bootstrap@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\myUser\AppData\Local\npm-cache\eresolve-report.txt for a full report.

You need to pick a version of ngx-bootstrap that is compatible with the angular version you are using. They have a compatibility table here: Angular Bootstrap

1 Like

Thank you! I fixed the version to be compatible with the older version of Angular it required!