Angular 8中如何让Angular Material样式构建时加载，避免运行时生成style标签？

可以实现让Angular Material样式仅在构建时加载，避免运行时动态生成style标签，具体操作步骤如下：

1. 禁用Angular Material运行时样式注入 #

在app.module.ts中导入MATERIAL_SANITY_CHECKS并配置为禁用状态，同时确保动画模块正确导入：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MATERIAL_SANITY_CHECKS } from '@angular/material/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, BrowserAnimationsModule],
  providers: [
    { provide: MATERIAL_SANITY_CHECKS, useValue: false }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

该配置会关闭Angular Material的运行时样式注入逻辑，阻止其动态生成style标签。

2. 确认预构建主题的完整性 #

你已在angular.json中配置预构建主题，需确保主题文件（如@angular/material/prebuilt-themes/indigo-pink.css）被正确加入全局样式列表，且优先级高于自定义样式：

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.css"
            ]
          }
        }
      }
    }
  }
}

保证预构建主题包含所有Angular Material组件的样式，避免组件因样式缺失触发运行时注入。

3. 检查组件样式封装模式 #

保持组件默认的ViewEncapsulation.Emulated封装模式（Angular默认配置），不要使用ViewEncapsulation.None，这样组件样式会被正确打包到构建后的静态CSS文件中，不会在运行时生成额外标签。

4. 构建验证 #

执行生产构建命令：

ng build --prod

构建完成后，检查dist目录下的CSS文件，确认所有Angular Material样式已被打包；运行应用时查看DOM，应不再出现Angular Material动态生成的style标签。

完成以上操作后，你就可以在构建后的HTML文件中，为静态style标签添加所需的CSP属性。

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