ASP .NET Core + Angular 13：Angular 材质动画视觉故障

Question

我最近使用开箱即用的 Angular 模板创建了我的第一个 .NET Core 项目，我计划使用 Angular Material 组件库。但是，动画效果（在本例中为材质波纹效果和表单字段选择）出现故障，如下面的 GIF 所示。

这是我应用的主题（只是复制粘贴官方文档中的内容）

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-warn: mat.define-palette(mat.$red-palette);

$my-theme: mat.define-light-theme(
  (
    color: (
      primary: $my-primary,
      accent: $my-accent,
      warn: $my-warn,
    ),
  )
);
@include mat.all-component-themes($my-theme);

这是我的 package.json 文件

{
  "name": "oop",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "prestart": "node aspnetcore-https",
    "start": "run-script-os",
    "start:windows": "ng serve --port 44432 --ssl --ssl-cert %APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem --ssl-key %APPDATA%\\ASP.NET\\https\\%npm_package_name%.key",
    "start:default": "ng serve --port 44432 --ssl --ssl-cert $HOME/.aspnet/https/${npm_package_name}.pem --ssl-key $HOME/.aspnet/https/${npm_package_name}.key",
    "build": "ng build",
    "build:ssr": "ng run oop:server:dev",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^13.3.11",
    "@angular/cdk": "^13.3.9",
    "@angular/common": "~13.3.5",
    "@angular/compiler": "~13.3.5",
    "@angular/core": "~13.3.5",
    "@angular/forms": "~13.3.5",
    "@angular/material": "^13.3.9",
    "@angular/platform-browser": "~13.3.5",
    "@angular/platform-browser-dynamic": "~13.3.5",
    "@angular/platform-server": "~13.3.5",
    "@angular/router": "~13.3.5",
    "@nguniversal/module-map-ngfactory-loader": "^8.2.6",
    "bootstrap": "^5.1.3",
    "hammerjs": "^2.0.8",
    "jquery": "^3.6.0",
    "oidc-client": "^1.11.5",
    "popper.js": "^1.16.0",
    "run-script-os": "^1.1.6",
    "rxjs": "~7.5.5",
    "tslib": "^2.4.0",
    "zone.js": "~0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.3.4",
    "@angular/cli": "~13.3.4",
    "@angular/compiler-cli": "~13.3.5",
    "@types/jasmine": "~4.0.3",
    "@types/jasminewd2": "~2.0.10",
    "@types/node": "^17.0.29",
    "jasmine-core": "~4.1.0",
    "karma": "~6.3.19",
    "karma-chrome-launcher": "~3.1.1",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.0.0",
    "karma-jasmine-html-reporter": "^1.7.0",
    "typescript": "~4.6.3"
  },
  "optionalDependencies": {}
}

起初我认为 ASP.NET Core 生成的模板在某处使用 NoopAnimationsModule 并且会产生某种冲突，但经过一些挖掘后，情况似乎并非如此。我已经从项目中删除了所有NoopAnimationsModule 引用，它仍然是一样的。

注意：我尝试切换到 NoopAnimationsModule，但除了进度条动画消失之外，它都是一样的

第二条线索是可疑的 ASP.NET Core 对其生成的 Angular 模板所做的事情。

我最后的线索是 SSR，但我对它没有经验，所以这只是一个疯狂的猜测。

经过几个小时的调试，我仍然一无所知，所以任何帮助都将不胜感激！

Answer 1

其实答案现在已经很明显了。我忘记将 @include mat.core(); 添加到我的 styles.scss 文件中。