Использование устаревших стилей материала angular в angular is 17 дает эту ошибку

angular17 выдает эту ошибку, когда я использую angular/material. Это показывает, что angular/material/theme не существует, а также показывает другие ошибки в устаревшем использовании. Может ли кто-нибудь помочь мне, какие изменения мне следует внести в версию, или это невозможно без изменения версии текущего angular.

Ошибка:

./src/styles/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
  ╷
4 │ @import '@angular/material/core/theming';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles\theme\material\_theming.scss 4:9  @import
  src\styles\theme\material\index.scss 2:9     @import
  src\styles\styles.scss 6:9                   root stylesheet

./src/styles/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
  ╷
4 │ @import '@angular/material/core/theming';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles\theme\material\_theming.scss 4:9  @import
  src\styles\theme\material\index.scss 2:9     @import
  src\styles\styles.scss 6:9                   root stylesheet

В этом проекте я также использую устаревшие материалы:

// Custom Theming for Angular Material
@import '@angular/material' as mat;
// For more information: https://material.angular.io/guide/theming
@import '@angular/material/core/theming';



@import 'form-field';

// --------------------------------------------------------------------------------------------------------------------
// fonts
// --------------------------------------------------------------------------------------------------------------------

$custom-typography: mat.define-legacy-typography-config(
    $font-family: $bodyFont,
    $display-4: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
    $display-3: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
    $display-2: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
    $display-1: mat.define-typography-level(34px, 40px, 400),
    $headline: mat.define-typography-level(22px, 30px, 400, $headingFont),
    $title: mat.define-typography-level(18px, 30px, 500, $headingFont),
    $subheading-2: mat.define-typography-level(inherit, 28px, 400),
    $subheading-1: mat.define-typography-level(15px, 24px, 400),
    $body-2: mat.define-typography-level(13px, 24px, 500),
    $body-1: mat.define-typography-level(13px, 20px, 400),
    $caption: mat.define-typography-level(13px, 20px, 400),
    $button: mat.define-typography-level(13px, 14px, 500),
    $input: mat.define-typography-level(inherit, 1.125, 400)
);

// Include the common styles for Angular Material
// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
//  The following line adds:
//    1. Default typography styles for all components
//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
//  If you specify typography styles for the components you use elsewhere, you should delete this line.
//  If you don't need the default component typographies but still want the hierarchy styles,
//  you can delete this line and instead use:
//    `@include mat.legacy-typography-hierarchy($custom-typography);`
@include mat.all-legacy-component-typographies($custom-typography);
@include mat.legacy-core();

Мой пакет.json

  "dependencies": {
    "@angular/animations": "^17.3.11",
    "@angular/cdk": "^17.3.10",
    "@angular/common": "^17.3.11",
    "@angular/compiler": "^17.3.11",
    "@angular/core": "^17.3.11",
    "@angular/flex-layout": "^15.0.0-beta.42",
    "@angular/forms": "^17.3.11",
    "@angular/material": "^17.3.10",
    "@angular/platform-browser": "^17.3.11",
    "@angular/platform-browser-dynamic": "^17.3.11",
    "@angular/router": "^17.3.11",
    "@apollo/client": "^3.0.0",
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@kolkov/angular-editor": "^3.0.0-beta.0",
    "@material/density": "^10.0.0",
    "@ngx-progressbar/core": "^5.3.2",
    "@ngx-progressbar/http": "^5.3.2",
    "@types/lodash": "^4.14.182",
    "angular-calendar": "^0.31.1",
    "angular-oauth2-oidc": "^17.0.2",
    "apollo-angular": "^7.0.2",
    "bootstrap": "~4.6.0",
    "chart.js": "^3.8.0",
    "date-fns": "^2.28.0",
    "graphql": "^15.0.0",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.21",
    "mat-timepicker": "^5.1.8",
    "moment": "^2.29.1",
    "ng-multiselect-dropdown": "^1.0.0",
    "ng2-charts": "^3.1.0",
    "ngx-mat-select-search": "^7.0.6",
    "rxjs": "~6.6.0",
    "signature_pad": "^4.1.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.14.7"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.8",
    "@angular-eslint/builder": "^17.5.2",
    "@angular-eslint/eslint-plugin": "^2.0.2",
    "@angular-eslint/eslint-plugin-template": "^2.0.2",
    "@angular-eslint/schematics": "^18.1.0",
    "@angular-eslint/template-parser": "^2.0.2",
    "@angular/cli": "^17.3.8",
    "@angular/compiler-cli": "^17.3.11",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "^4.20.0",
    "@typescript-eslint/eslint-plugin-tslint": "^4.20.0",
    "@typescript-eslint/parser": "^4.20.0",
    "babel-eslint": "^10.1.0",
    "codelyzer": "^6.0.0",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^6.15.0",
    "eslint-config-wesbos": "^1.0.1",
    "eslint-plugin-html": "^6.1.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.23.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.3",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "prettier": "^2.2.1",
    "prettier-eslint": "^12.0.0",
    "prettier-eslint-cli": "^5.0.1",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~5.4.5"
  }```


I have tried downgrading the material to version 11 but still nothing changes and instead it started showing errors in each material component and module i have used in the project.