Update - solution at bottom of main thread post -
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.
UPDATE SOLUTION: The issue is that SASS can have issues with UTF-8-BOM encoding. I had to go through all my .scss files and ensure the encoding was set to UTF-8. My Material.scss was encoded with UTF-8 with BOM which caused the issue. I used Notepad++ to change encodings. See issue on github here - https://github.com/angular/components/issues/24227
Thanks to @Anglesvar for the github link which solved the issue.
