Error: Can't resolve '~@swimlane/ngx-datatable/index.css' in 'component'

Question

After migrating Angular project from v14 to v15 it throws these errors for components that use @swimlane/ngx-datatable:

'component'.component.scss?ngResource - Error: Module build failed (from ./node_modules/css-          loader/dist/cjs.js):
Error: Can't resolve '~@swimlane/ngx-datatable/index.css' in 'component'.

I got this error after i added "optimization": false in angular.json.

This is my @swimlane/ngx-datatable version in package.json: "@swimlane/ngx-datatable": "^20.0.0".

These are "dependencies" and

"devDependencies":

"dependencies": {
    "@angular/animations": "^15.2.9",
    "@angular/cdk": "^15.2.9",
    "@angular/common": "^15.2.9",
    "@angular/compiler": "^15.2.9",
    "@angular/core": "^15.2.9",
    "@angular/flex-layout": "^9.0.0-beta.31",
    "@angular/forms": "^15.2.9",
    "@angular/material": "^15.2.9",
    "@angular/material-moment-adapter": "^7.3.7",
    "@angular/platform-browser": "^15.2.9",
    "@angular/platform-browser-dynamic": "^15.2.9",
    "@angular/router": "^15.2.9",
    "@swimlane/ngx-datatable": "^20.0.0",
    "core-js": "^2.5.4",
    "file-saver": "^2.0.5",
    "moment": "^2.24.0",
    "ngx-csv": "^0.3.1",
    "ngx-material-timepicker": "^5.6.0",
    "ngx-xml2json": "^1.0.2",
    "rxjs": "^6.5.3",
    "sass": "^1.57.1",
    "zone.js": "^0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.9",
    "@angular/cli": "^15.2.9",
    "@angular/compiler-cli": "^15.2.9",
    "@angular/language-service": "^15.2.9",
    "@types/file-saver": "^2.0.5",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "^4.8.2"
  }

This is how i import ngx/datatable in components: 

    @import '~@swimlane/ngx-datatable/index.css';
    @import '~@swimlane/ngx-datatable/themes/material.css';
    @import '~@swimlane/ngx-datatable/assets/icons.css';

Answer 1

Changing the import statements will resolve the issue. Change the statements FROM this:

@import "~@swimlane/ngx-datatable/index.css";
@import "~@swimlane/ngx-datatable/themes/dark.css";
@import "~@swimlane/ngx-datatable/themes/bootstrap.css";
@import "~@swimlane/ngx-datatable/themes/material.css";
@import "~@swimlane/ngx-datatable/assets/icons.css";

TO this:

@import "node_modules/@swimlane/ngx-datatable/index.css";
@import "node_modules/@swimlane/ngx-datatable/themes/dark.css";
@import "node_modules/@swimlane/ngx-datatable/themes/bootstrap.css";
@import "node_modules/@swimlane/ngx-datatable/themes/material.css";
@import "node_modules/@swimlane/ngx-datatable/assets/icons.css";

I believe the error is due to Angular version upgrades; I copied working code from an existing app to a new one, and experienced the same issue without having made any code changes.

Credit goes to: Đôn Nguyễn, for the correct suggestion. https://stackoverflow.com/users/1745871/%c4%90%c3%b4n-nguy%e1%bb%85n