Angular从v12升级到v17后出现Material主题创建警告求助

我刚把Angular从v12升级到v17，现在碰到样式相关问题，不确定下面的警告是不是问题根源，我是Angular新手，麻烦帮忙看看。

警告信息 #

[webpack-dev-server] WARNING in ./src/styles.scss?ngGlobalStyle (./src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle)
Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Angular Material主题必须从包含"color"、"typography"和"density"键的映射创建。color值应该是包含"primary"、"accent"和"warn"调色板值的映射。查看官方主题指南了解更多信息。

node_modules@angular\material\core\theming_theming.scss 183:5 define-light-theme()
src\app\styles\colors\palettes.scss 9:16 @import
src\app\styles\theme.scss 39:9 @import
src\styles.scss 2:9

相关文件内容 #

Package.json #

{    
    "name": "WMRPD",    
    "version": "0.0.0",    
    "scripts": {        
        "ng": "ng",        
        "start": "echo Starting... && ng serve",        
        "build": "ng build",        
        "test": "ng test",        
        "test:ChromeHeadless": "ng test --watch=false --source-map=false --code-coverage --browsers=MyHeadlessChrome",        
        "lint": "ng lint",        
        "e2e": "ng e2e",        
        "dev:ssr": "ng run ClientApp:serve-ssr",        
        "serve:ssr": "node dist/ClientApp/server/main.js",        
        "build:ssr": "ng build --configuration production && ng run ClientApp:server:production",        
        "prerender": "ng run ClientApp:prerender"    
    },    
    "private": true,    
    "dependencies": {        
        "@angular/animations": "^17.3.6",        
        "@angular/cdk": "^17.3.6",        
        "@angular/common": "^17.3.6",        
        "@angular/compiler": "^17.3.6",        
        "@angular/core": "^17.3.6",        
        "@angular/flex-layout": "^15.0.0-beta.42",        
        "@angular/forms": "^17.3.6",        
        "@angular/material": "^17.3.6",        
        "@angular/platform-browser": "^17.3.6",        
        "@angular/platform-browser-dynamic": "^17.3.6",        
        "@angular/platform-server": "^17.3.6",        
        "@angular/router": "^17.3.6",        
        "@angular/ssr": "^17.3.6",        
        "@babel/runtime": "^7.24.5",        
        "@ng-idle/core": "^14.0.0",        
        "aspnet-prerendering": "^3.0.1",        
        "file-saver": "^2.0.5",        
        "jspdf": "^2.5.1",        
        "jspdf-autotable": "^3.8.2",        
        "ng": "^0.0.0",        
        "rxjs": "^7.8.1",        
        "rxjs-compat": "^6.6.7",        
        "tslib": "^2.6.2",        
        "update": "^0.7.4",        
        "zone.js": "~0.14.5"    
    },    
    "devDependencies": {        
        "@angular-devkit/build-angular": "^17.3.6",        
        "@angular/cli": "^17.3.6",        
        "@angular/compiler-cli": "^17.3.6",        
        "@types/jasmine": "^5.1.4",        
        "@types/node": "^20.12.7",        
        "eslint": "^9.1.1",        
        "jasmine-core": "~5.1.2",        
        "jasmine-spec-reporter": "~7.0.0",        
        "karma": "~6.4.3",        
        "karma-chrome-launcher": "~3.2.0",        
        "karma-cli": "~2.0.0",        
        "karma-coverage": "~2.2.1",        
        "karma-coverage-istanbul-reporter": "~3.0.3",        
        "karma-jasmine": "~5.1.0",        
        "karma-jasmine-html-reporter": "^2.1.0",        
        "protractor": "^7.0.0",        
        "ts-node": "~10.9.2",        
        "tslint": "^6.1.3",        
        "typescript": "^5.4.5"    
    }
}

styles.scss #

/* You can add global styles to this file, and also import other style files */
@import '../src/app/styles/theme';

/* Material Icons */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(./assets/icons/maticons.woff2) format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

app-data-grid.custom-column-width{
    th{
        width: 200px!important;
    }
}

theme.scss #

@use "sass:map";
@use '@angular/material' as mat;
/*@import '@angular/material/theming';*/
/*@import 'typography';*/
@import 'layout';
@import 'colors/palettes';
@import 'colors/palette-brand';
@import 'controls/controls';

// Include non-theme styles for core.
@include mat.core();

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

问题分析与修复方案 #

问题根源 #

Angular Material从v12到v17的版本迭代中，主题定义的规范发生了变化：旧版本允许仅基于调色板创建主题，而新版本要求主题必须是包含color、typography、density三个必填键的完整映射。你的$wf-app-theme变量不符合这个新规范，因此触发了警告，这大概率也是样式异常的原因。

修复步骤 #

1. 打开src/app/styles/colors/palettes.scss文件，重构主题变量的定义：

   @use '@angular/material' as mat;
   
   // 1. 定义基础调色板（替换成你项目实际使用的调色板）
   $wf-primary: mat.define-palette(mat.$indigo-palette);
   $wf-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
   $wf-warn: mat.define-palette(mat.$red-palette);
   
   // 2. 创建符合规范的完整主题
   $wf-app-theme: mat.define-light-theme((
     color: (
       primary: $wf-primary,
       accent: $wf-accent,
       warn: $wf-warn,
     ),
     // 使用默认排版配置，如需自定义可修改此部分
     typography: mat.define-typography-config(),
     // 密度值，0为默认，负数可减小组件间距
     density: 0,
   ));
   

2. 保存文件后，重启开发服务器，警告应该会消失，样式异常也会得到修复。

额外注意事项 #

• 你已经在theme.scss中使用了新版本推荐的@use语法替代旧的@import，这部分无需修改。
• @angular/flex-layout当前版本为15，与Angular 17存在跨版本兼容性风险，建议检查是否有布局相关的样式问题，如有需要可尝试升级到适配Angular 17的版本。

内容的提问来源于stack exchange，提问作者Scott Michael