Angular Custom Material Theme not loading after v11 to 14 upgrade

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. Airo wants to to this question. 。

Styles.scss

@import "./material";

$pace-red: #bb2d1c;
$green: #008000;
$red: #f00;
$black: #000;

body {
  margin: 0;
}
...

Custom Theme - Material.scss

@use '~@angular/material' as mat;
@import '@angular/material/theming';
@include mat.core();

$core-app-primary: mat.define-palette(mat.$red-palette, A700);
$core-app-accent: mat.define-palette(mat.$blue-palette, 500);
$core-app-warn: mat.define-palette(mat.$amber-palette, 800);
$core-app-theme: mat.define-light-theme($core-app-primary, $core-app-accent, $core-app-warn);

@include mat.all-component-themes($core-app-theme);
...

I receive an error saying it cannot build the module due to the @use. I have also tried using @use '~@angular/material' as mat; but that doesn't change the error.

Package.json

{
  "name": "xxxxx-core-cli",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng",
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "hmr": "ng serve --configuration hmr",
    "stats": "webpack-bundle-analyzer wwwroot/stats.json"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "14.2.0",
    "@angular/cdk": "^14.2.0",
    "@angular/common": "14.2.0",
    "@angular/compiler": "14.2.0",
    "@angular/core": "14.2.0",
    "@angular/flex-layout": "^14.0.0-beta.40",
    "@angular/forms": "14.2.0",
    "@angular/material": "^14.2.0",
    "@angular/platform-browser": "14.2.0",
    "@angular/platform-browser-dynamic": "14.2.0",
    "@angular/platform-server": "14.2.0",
    "@angular/router": "14.2.0",
    "@material/banner": "^14.0.0",
    "angular-plotly.js": "^4.0.4",
    "core-js": "^3.25.0",
    "hammerjs": "^2.0.8",
    "ng2-currency-mask": "^13.0.3",
    "ng2-file-upload": "^1.4.0",
    "npm": "^8.18.0",
    "plotly.js": "^2.14.0",
    "rxjs": "^7.5.6",
    "tslib": "^2.4.0",
    "xlsx": "^0.18.5",
    "yarn": "^1.22.19",
    "zone.js": "~0.11.8"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.1",
    "@angular/cli": "14.2.1",
    "@angular/compiler-cli": "14.2.0",
    "@angular/language-service": "14.2.0",
    "@angularclass/hmr": "^3.0.0",
    "@types/jasmine": "^4.3.0",
    "@types/jasminewd2": "~2.0.10",
    "@types/node": "^18.7.13",
    "codelyzer": "^6.0.2",
    "jasmine": "^4.3.0",
    "jasmine-core": "~4.3.0",
    "jasmine-reporters": "^2.5.0",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.1",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-firefox-launcher": "^2.1.2",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.0.0",
    "karma-tfs-reporter": "^1.0.2",
    "protractor": "~7.0.0",
    "sass": "^1.54.8",
    "sass-lint": "^1.13.1",
    "sass-loader": "^13.0.2",
    "ts-node": "^10.9.1",
    "tslint": "~6.1.0",
    "tslint-angular": "^3.0.3",
    "typescript": "4.8.2",
    "webpack": "^5.74.0",
    "webpack-bundle-analyzer": "^4.6.1"
  }
}

Anyone know what the issue is? I am including the styles.scss into my angular.json via -

"styles": [
              "ClientApp/styles.scss"
            ],

I have tried importing both styles.scss and material.scss (custom theme) to the angular.json but am having an issue where the first page on dev always loads without Angular Material loaded. Other pages have no issues and QA works fine.

Answer 1

The solution is a rather simple one. After Angular 13+, we don't need to import styles with tilde @use ~() as xxx . Make sure you use the proper command while upgrading to Angular 14. I found this git issue which might be of some help as well.

https://github.com/angular/components/issues/24227

https://update.angular.io/?v=13.0-14.0

@use "~@angular/material" as mat;

@use "@angular/material" as mat;