ASP.NET Core 2.0 Angular+Angular Material 2 SSR失效及样式延迟问题

这个问题本质是FOUC（Flash of Unstyled Content）——浏览器先渲染了未被Angular处理的原生HTML元素，等Angular框架和Material组件加载完成后，才替换成带样式的组件。下面是针对ASP.NET Core + Angular模板的具体解决方案：

1. 提前加载Angular Material主题样式 #

确保你的Material主题CSS在页面最开始加载，优先于Angular的脚本文件：

• 在wwwroot/index.html的<head>标签内，内联引入你的自定义主题CSS，或者引用预构建的Material主题：

<head>
  <!-- 内联自定义主题样式（推荐，避免额外请求） -->
  <style>
    @import '@angular/material/prebuilt-themes/indigo-pink.css';
    /* 或者你的自定义主题代码 */
  </style>
  <!-- 其他meta标签、标题等 -->
  <!-- 然后再引入Angular的脚本 -->
  <script src="~/runtime.js" asp-append-version="true"></script>
  <script src="~/polyfills.js" asp-append-version="true"></script>
  <script src="~/styles.js" asp-append-version="true"></script>
  <script src="~/vendor.js" asp-append-version="true"></script>
  <script src="~/main.js" asp-append-version="true"></script>
</head>

这样浏览器在渲染页面时，会先拿到Material的样式规则，避免后续样式突变。

2. 使用ng-cloak隐藏未初始化内容 #

Angular提供了ng-cloak指令，用于隐藏未被Angular编译的DOM内容，直到框架初始化完成：

• 在全局样式（比如styles.css）中添加：

[ng-cloak] {
  display: none !important;
}

• 在你的根组件模板（比如app.component.html）或者包含Material按钮的容器上添加ng-cloak属性：

<div ng-cloak>
  <button mat-button>我的Material按钮</button>
</div>

这样初始状态下容器会被隐藏，Angular编译完成后自动移除ng-cloak属性，显示已样式化的组件。

3. 确保服务器端渲染（SSR）正确配置（如果使用SSR） #

如果你的ASP.NET Core Angular模板启用了SSR，需要确认Angular Universal服务器端模块中正确导入了Material组件模块，并且主题样式在服务器端也能被加载：

• 在src/app/app.server.module.ts中，确保所有用到的Material模块都被导入并添加到imports数组里；
• 确保主题样式被包含在服务器端的bundle中，或者在index.html中全局引入，让服务器端渲染时就能生成带有正确样式的HTML。

4. 避免原生元素与Material组件混用 #

确保所有需要Material样式的按钮都使用<button mat-button>（或者对应的mat-raised-button等指令），而不是先写原生<button>再通过Angular动态添加指令——这种写法更容易导致初始渲染的样式闪烁。

通过以上步骤，应该能有效解决页面加载时先显示普通HTML按钮，再切换为Material样式的问题。

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