[英]Angular Custom Material Theme not loading after v11 to 14 upgrade
Styles.scss Styles.scss
@import "./material";
$pace-red: #bb2d1c;
$green: #008000;
$red: #f00;
$black: #000;
body {
margin: 0;
}
...
Custom Theme - Material.scss自定义主题 - 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.我收到一条错误消息,指出由于 @use 无法构建模块。 I have also tried using
@use '~@angular/material' as mat;
我也尝试过使用
@use '~@angular/material' as mat;
but that doesn't change the error.但这不会改变错误。
Package.json 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.scss 通过 -
"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. 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.
其他页面没有问题,质量检查工作正常。
The solution is a rather simple one.解决方案是一个相当简单的解决方案。 After Angular 13+, we don't need to import styles with tilde
@use ~() as xxx
.在 Angular 13+ 之后,我们不需要使用波浪号
@use ~() as xxx
导入 styles 。 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.确保在升级到 Angular 14 时使用正确的命令。我发现这个 git 问题也可能有一些帮助。
https://github.com/angular/components/issues/24227 https://github.com/angular/components/issues/24227
https://update.angular.io/?v=13.0-14.0 https://update.angular.io/?v=13.0-14.0
@use "~@angular/material" as mat;
@use "@angular/material" as mat;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.