错误：无法解析“组件”中的“~@swimlane/ngx-datatable/index.css”

Question

将 Angular 项目从 v14 迁移到 v15 后，它会为使用 @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'.

在 angular.json 中添加“optimization”: false 后出现此错误。

这是我在package.json中的@swimlane/ngx-datatable版本：“@swimlane/ngx-datatable”：“^20.0.0”。

这些是“依赖项”并且

"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

更改导入语句将解决该问题。更改语句FROM：

@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";

致这个：

@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";

我相信该错误是由于 Angular 版本 升级造成的；我将工作代码从现有应用程序复制到新应用程序，并遇到了相同的问题无需进行任何代码更改。

感谢：Đôn Nguyễn，提供正确的建议。 https://stackoverflow.com/users/1745871/%c4%90%c3%b4n-nguy%e1%bb%85n