如何在Angular应用中仅在开发环境实现特定功能？

Angular生产构建默认会开启Tree Shaking（摇树优化），可以自动删除永远不会执行的死代码，按以下方式实现即可完全把填充按钮、填充逻辑从生产包中移除，不会残留任何相关代码：

第一步：配置环境变量标识 #

首先在两套环境配置文件中添加开发工具开关：

• 生产环境配置src/environments/environment.prod.ts：

export const environment = {
  production: true,
  enableDevFill: false // 生产环境固定关闭
};

• 开发环境配置src/environments/environment.ts：

export const environment = {
  production: false,
  enableDevFill: true // 开发环境开启
};

第二步：组件内条件加载填充逻辑 #

所有填充相关的代码都要包裹在环境判断的分支内，不要直接声明在类的顶层：

import { environment } from 'src/environments/environment';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-wizard-form',
  template: `
    <!-- 正常表单代码 -->
    <div [formGroup]="wizardForm">
      <!-- 多步骤表单内容 -->
    </div>

    <!-- 开发环境才渲染的填充按钮 -->
    <ng-container *ngIf="isDev">
      <button type="button" (click)="fillTestData()">一键填充测试数据</button>
    </ng-container>
  `
})
export class WizardFormComponent {
  wizardForm: FormGroup;
  isDev = environment.enableDevFill;
  // 填充函数声明为可选，仅开发环境会被赋值
  fillTestData?: () => void;

  constructor(private fb: FormBuilder) {
    this.wizardForm = this.fb.group({
      // 表单控件定义
    });

    // 所有填充逻辑完全写在环境判断块内
    if (environment.enableDevFill) {
      this.fillTestData = () => {
        this.wizardForm.patchValue({
          step1: { userName: '测试用户', phone: '13800000000' },
          step2: { address: '测试地址', email: 'test@demo.com' },
          // 剩余步骤的测试数据填充逻辑
        });
      };
    }
  }
}

注意：不要把环境判断写在函数内部，这种写法函数本身还是会被打包进生产环境，只是运行时不执行逻辑，不符合你的要求。

第三步：验证生产构建效果 #

执行ng build --configuration production构建生产包后，搜索打包产物不会找到任何和填充逻辑、填充按钮相关的代码，完全符合你的要求。

可选进阶方案（填充逻辑复杂时使用） #

如果填充逻辑代码量很大，可以单独封装为开发专属服务，在angular.json的生产构建配置中直接排除该文件，实现完全物理隔离：

// angular.json > 项目名 > architect > build > configurations > production
"production": {
  "exclude": ["src/app/services/dev-fill-form.service.ts"],
  // 其余原有配置保持不变
}

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