Error: Failed to find 'node_modules/ngx-bootstrap/datepicker/bs-datepicker.css'

[PrashanthGowda]

For "@angular-devkit/build-angular": "^0.10.5", i am getting following error,

ERROR in ./src/styles.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find 'node_modules/ngx-bootstrap/datepicker/bs-datepicker.css'
  in [
    /home/root-2/imedrix_git/imedrix_backend/risk_analyzer/src
  ]
    at resolveModule.catch.catch (/home/root-2/imedrix_git/imedrix_backend/risk_analyzer/node_modules/postcss-import/lib/resolve-id.js:35:13)
    at runLoaders (/home/root-2/imedrix_git/imedrix_backend/risk_analyzer/node_modules/webpack/lib/NormalModule.js:286:20)
    at /home/root-2/imedrix_git/imedrix_backend/risk_analyzer/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /home/root-2/imedrix_git/imedrix_backend/risk_analyzer/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/home/root-2/imedrix_git/imedrix_backend/risk_analyzer/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Promise.resolve.then.then.catch (/home/root-2/imedrix_git/imedrix_backend/risk_analyzer/node_modules/postcss-loader/src/index.js:208:9)
ERROR in Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find 'node_modules/ngx-bootstrap/datepicker/bs-datepicker.css'
  in [
    /home/root-2/imedrix_git/imedrix_backend/risk_analyzer/src/app/shared/components/patient-detail-pdf-dialog
  ]
    at resolveModule.catch.catch (/home/root-2/imedrix_git/imedrix_backend/risk_analyzer/node_modules/postcss-import/lib/resolve-id.js:35:13)

for "@angular-devkit/build-angular": "^0.8.7", it works fine.

package.json

{
  "name": "risk-analyzer",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.5",
    "@agm/js-marker-clusterer": "^1.0.0-beta.5",
    "@angular/animations": "^7.0.3",
    "@angular/cdk": "^7.0.4",
    "@angular/common": "^7.0.3",
    "@angular/compiler": "^7.0.3",
    "@angular/core": "^7.0.4",
    "@angular/forms": "^7.0.3",
    "@angular/http": "^7.0.3",
    "@angular/material": "^7.0.4",
    "@angular/platform-browser": "^7.0.3",
    "@angular/platform-browser-dynamic": "^7.0.3",
    "@angular/pwa": "^0.8.7",
    "@angular/router": "^7.0.3",
    "@angular/service-worker": "^7.0.3",
    "@types/html2canvas": "0.0.34",
    "chart.js": "^2.7.3",
    "chart.piecelabel.js": "^0.8.1",
    "chartjs-plugin-annotation": "^0.5.7",
    "core-js": "^2.5.4",
    "html2canvas": "^1.0.0-alpha.12",
    "js-marker-clusterer": "^1.0.0",
    "json-typescript-mapper": "^1.1.3",
    "jspdf": "^1.4.1",
    "moment": "^2.22.1",
    "ng2-charts": "^1.6.0",
    "ng2-pdf-viewer": "^5.2.0",
    "ngx-bootstrap": "^3.1.1",
    "node-sass": "^4.10.0",
    "rxjs": "^6.3.3",
    "xlsx": "^0.14.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.8.7",
    "@angular/cli": "^7.0.6",
    "@angular/compiler-cli": "^7.0.3",
    "@angular/language-service": "^7.0.3",
    "@types/jasmine": "^2.8.11",
    "@types/jasminewd2": "^2.0.6",
    "bootstrap": "^4.1.3",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^2.0.5",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.4.3",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.4.1",
    "ts-node": "~7.0.1",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

angular

Angular CLI: 7.0.6
Node: 10.10.0
OS: linux x64
Angular: 7.0.4
... cdk, core, material

Package                             Version
-------------------------------------------------------------
@angular-devkit/architect           0.10.6
@angular-devkit/build-angular       0.10.6
@angular-devkit/build-optimizer     0.10.6
@angular-devkit/build-webpack       0.10.6
@angular-devkit/core                0.8.7
@angular-devkit/schematics          0.8.7
@angular/animations                 7.0.3
@angular/cli                        7.0.6
@angular/common                     7.0.3
@angular/compiler                   7.0.3
@angular/compiler-cli               7.0.3
@angular/forms                      7.0.3
@angular/http                       7.0.3
@angular/language-service           7.0.3
@angular/platform-browser           7.0.3
@angular/platform-browser-dynamic   7.0.3
@angular/pwa                        0.8.7
@angular/router                     7.0.3
@angular/service-worker             7.0.3
@ngtools/webpack                    7.0.6
@schematics/angular                 0.8.7
@schematics/update                  0.10.6
rxjs                                6.3.3
typescript                          3.1.6
webpack                             4.19.1

[svetoslavatanasov]

+1

[valorkin]

@Domainv is it fixed in dev branch?

[Domainv]

@valorkin checking

[Domainv]

@valorkin in the dev branch, I cannot reproduce By the way as well as in 3.1.1 version

[Domainv]

@PrashanthGowda Can you provide a reproduction of this issue? Some small repo with reproduction it helps a lot or You can use one of these templates: https://stackblitz.com/edit/ngx-bootstrap-3tldte?file=app/app.component.ts

[PrashanthGowda]

@Domainv below is the repo link,

https://github.com/PrashanthGowda/ngxerror

[Domainv]

Closing as is not ngx-bootstrap issue. bs-datepicker.css still there

[PrashanthGowda]

@Domainv if it is not an ngx-bootstrap issue, do you have any idea what could have possibly gone wrong???

[rdicroce]

I just ran into this, and it is definitely a problem with ngx-bootstrap. It looks like ngx-bootstrap uses ng-packagr to build the library. As per the ng-packagr documentation, ngx-bootstrap has to manually specify exports for stylesheet files. Because ngx-bootstrap currently does not do that, it is impossible to import bs-datepicker.scss in your own Sass files if you're using a version of Node that enforces the exports (12.7 or later, according to the Node docs).

ngx-bootstrap should declare exports for bs-datepicker.css and bs-datepicker.scss. In the meantime, I'm working around this by using Yarn's patch protocol to add the necessary export.