The angular17 is giving this error when am using angular/material.
Its showing that angular/material/theme doesnt exist and showing other errors in legacy usage too.
Can somebody help me what changes should i make in version or is this not possible without changing the version of current angular.
Error:
./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';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
srcstylesthemematerial_theming.scss 4:9 @import
srcstylesthemematerialindex.scss 2:9 @import
srcstylesstyles.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';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
srcstylesthemematerial_theming.scss 4:9 @import
srcstylesthemematerialindex.scss 2:9 @import
srcstylesstyles.scss 6:9 root stylesheet
Am also using legacy material in this project:
// 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();
My package.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.