Can't resolve 'ngx-bootstrap/component-loader/component-loader.factory'

Question

I'm getting this error when I tried ng build --prod with Angular 7.2.9

Module not found: Error: Can't resolve 'ngx-bootstrap/dropdown/bs-dropdown.config' in 'C:\Users\fvale\myproject\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'ngx-bootstrap/dropdown/bs-dropdown.module' in 'C:\Users\fvale\myproject\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'ngx-bootstrap/dropdown/bs-dropdown.state' in 'C:\Users\fvale\myproject\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'ngx-bootstrap/positioning/positioning.service' in 'C:\Users\fvale\myproject\src\app'

I don't have this error before I upgrade to Angular 7.x from Angular 6.x

But! the weird thing is that I didn't even use ngx-bootstrap in my project, and I don't have it in my package.json. I installed it to check if that resolves the problem, but it doesn't do anything.

Using:

ngx-bootstrap: 3.2.0

Angular: 7.2.9

Bootstrap: 4.1.3

and Angular CLI

Package.json

{
  "name": "myproject",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "prestart": "node version.js",
    "prebuild": "node version.js",
    "start": "ng serve --watch",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.5",
    "@angular/animations": "^7.2.9",
    "@angular/cdk": "^7.3.4",
    "@angular/common": "7.2.9",
    "@angular/compiler": "7.2.9",
    "@angular/core": "7.2.9",
    "@angular/forms": "7.2.9",
    "@angular/http": "7.2.9",
    "@angular/material": "^7.3.4",
    "@angular/platform-browser": "7.2.9",
    "@angular/platform-browser-dynamic": "7.2.9",
    "@angular/router": "7.2.9",
    "@fortawesome/fontawesome-svg-core": "^1.2.0",
    "@ng-bootstrap/ng-bootstrap": "^4.1.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@toverux/ngx-sweetalert2": "^4.0.0",
    "bootstrap": "^4.1.3",
    "bootstrap-social": "^5.1.1",
    "core-js": "^2.4.1",
    "flag-icon-css": "^3.3.0",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "moment": "^2.22.2",
    "ng2-color-picker": "^1.3.2",
    "ng2-slim-loading-bar": "^4.0.0",
    "ngx-bootstrap": "^3.2.0",
    "ngx-color": "^2.0.6",
    "ngx-embed-video": "^1.0.4",
    "ngx-moment": "^3.1.0",
    "ngx-slimscroll": "^7.1.0",
    "rxjs": "^6.4.0",
    "rxjs-compat": "^6.2.0",
    "simple-line-icons": "^2.4.1",
    "sweetalert2": "^8.3.0",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.5",
    "@angular/cli": "7.3.5",
    "@angular/compiler-cli": "7.2.9",
    "@angular/language-service": "7.2.9",
    "@types/jasmine": "~3.3.9",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~11.11.3",
    "codelyzer": "^5.0.0-beta.0",
    "fs-extra": "^7.0.0",
    "git-describe": "^4.0.3",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.0.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.5",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "^5.4.0",
    "ts-node": "~8.0.3",
    "tslint": "^5.9.1",
    "typescript": "3.2.4"
  }
}

Another package can use ngx-bootstrap package as dependency. Can you please search in your pages imports "ngx-bootstrap" in entire solution ? Please also add package.json as well. — rcanpahali
– rcanpahali, Commented Mar 14, 2019 at 13:30
Nothing, I don't import ngx-bootstrap anywhere in my code, and I don't know what package could be :/ Any idea how to quickly find if a package is importing it? — FrancoVP
– FrancoVP, Commented Mar 14, 2019 at 13:33

rcanpahali · Accepted Answer · 2019-03-14 13:50:05Z

3

I've generated package-lock.json from your package.json and I find-out that ng2-color-picker requires ngx-bootstrap as below,

"ng2-color-picker": {
      "version": "1.3.2",
      "resolved": "https://registry.npmjs.org/ng2-color-picker/-/ng2-color-picker-1.3.2.tgz",
      "integrity": "sha1-sdcd4Dhm0MJV9anjQzEd67v3Q+8=",
      "requires": {
        "@angular/common": "~4.0.0",
        "@angular/compiler": "~4.0.0",
        "@angular/core": "~4.0.0",
        "@angular/forms": "~4.0.0",
        "@angular/platform-browser": "~4.0.0",
        "ngx-bootstrap": "~1.6.6", <===here
        "rxjs": "^5.1.0",
        "zone.js": "^0.8.4"
      }

answered Mar 14, 2019 at 13:50

rcanpahali

2,6432 gold badges25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

FrancoVP Over a year ago

Oh, thanks. I'm not using that anymore, I forgot to remove it, now is working, thank you very much :)

hzitoun Over a year ago

Nice! well thought! Has the same problem because I upgraded the version of ngx-boostrap in my package.json AND a one of my dependencies requires an older version of ngx-boostrap so I downgraded.

Collectives™ on Stack Overflow

Can't resolve 'ngx-bootstrap/component-loader/component-loader.factory'

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related