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';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
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
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.
I think you can access everything directly through
@use '@angular/material' as mat;
You do not need the import `@import '@angular/material/core/theming'
Since angular is updated with material 3 I think the theming has changed. For now you can try to fix the errors by using the below code and then gradually bringing your app to integrate your changes one by one.
@use '@angular/material' as mat;
$theme: mat.define-theme((
color: (
theme-type: light,
primary: mat.$azure-palette,
tertiary: mat.$blue-palette,
)
));
body {
@include mat.all-component-themes($theme);
font-family: Roboto, "Helvetica Neue", sans-serif;
margin: 0;
padding: 30px;
height: 100%;
}
html {
height: 100%;
}
@include mat.core();
@include mat.color-variants-backwards-compatibility($theme);