Angular 12+项目DOM中大量诊断注释如何彻底清除？

1. 确保enableProdMode正确启用 #

在main.ts中，必须在启动应用前调用enableProdMode，代码示例：

import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

2. 关闭模板空白字符保留 #

空注释通常来自模板的空白字符处理，可通过全局或组件级配置关闭：

全局配置（angular.json） #

在项目的angular.json中，给生产构建添加preserveWhitespaces配置：

"projects": {
  "你的项目名称": {
    "architect": {
      "build": {
        "configurations": {
          "production": {
            // 其他生产配置项
            "preserveWhitespaces": false
          }
        }
      }
    }
  }
}

组件级配置 #

如果仅需针对特定组件处理，在组件装饰器中设置：

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
  preserveWhitespaces: false
})
export class HeaderComponent {
  // 组件逻辑
}

3. 使用生产配置构建项目 #

确保构建命令使用生产环境配置：

# Angular 12+
ng build --configuration production

# 旧版本
ng build --prod

4. 清理缓存后重新构建 #

避免缓存导致配置不生效，执行以下命令：

ng clean
ng build --configuration production

完成以上步骤后，生产环境构建的项目将彻底移除所有诊断注释和空注释节点。

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