'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!

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.