Angular：检测ng serve启动状态并加载dummy模拟数据的实现方案

方案1：使用内置环境配置（最稳定） #

Angular 自带多环境配置体系，ng serve 默认启动development环境，会使用src/environments/environment.ts配置，生产构建时自动替换为生产环境配置，无需额外运行时判断。

• 第一步：调整环境配置
  开发环境配置src/environments/environment.ts：

  export const environment = {
    production: false,
    // 新增自定义标识，明确区分本地serve场景
    isLocalDevServe: true
  };
  

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

  export const environment = {
    production: true,
    isLocalDevServe: false
  };
  

  如果你使用的是Angular 14以下版本，需要确认angular.json中build.configurations.development.fileReplacements已经配置了环境文件的替换规则，14及以上版本默认已内置该配置，无需修改。
• 第二步：业务逻辑中判断加载模拟数据
  在你的数据服务或者表格组件中直接引用环境变量判断即可：

  import { environment } from 'src/environments/environment';
  // 提前准备好的表格模拟数据
  import { MOCK_TABLE_DATA } from './mock/table-data.mock';
  
  @Injectable({ providedIn: 'root' })
  export class BusinessDataService {
    constructor(private http: HttpClient) {}
  
    getTableList() {
      // 本地ng serve启动时直接返回模拟数据，跳过接口请求
      if (environment.isLocalDevServe) {
        return of(MOCK_TABLE_DATA);
      }
      // 其他环境走正常后端接口请求
      return this.http.get('/api/business/table/list');
    }
  }
  

方案2：运行时域名判断（无需修改配置） #

如果你需要临时使用，不想修改环境配置，可以直接通过当前访问域名判断：

// 匹配ng serve默认的localhost/127.0.0.1地址，如果你自定义了serve host，新增对应值即可
const isLocalServe = ['localhost', '127.0.0.1'].includes(window.location.hostname);

注意：如果需要避免模拟数据被打包到生产版本，可以在angular.json的build.options.exclude数组中添加模拟数据文件的路径，减少生产包体积。

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