Angular项目报错：类型'{}'不存在属性'API_BASE_URL'，求解决方案

这个问题的核心是环境文件类型不一致导致的TypeScript类型推断错误：

你的environment.development.ts是空对象{}，而TypeScript会根据当前运行环境加载对应的环境文件（比如Angular中ng serve默认加载development环境文件）。当加载这个空对象时，TypeScript会推断environment的类型为{}，自然找不到API_BASE_URL属性。

下面是两种靠谱的解决方法：

方法一：统一所有环境文件的结构 #

直接给environment.development.ts补上对应属性，保持和environment.ts结构一致：

// environment.development.ts
export const environment = {
    production: false,
    API_BASE_URL: 'http://localhost:8092' // 填写开发环境对应的API地址
};

两个环境文件结构完全匹配后，TypeScript能正确识别API_BASE_URL属性，错误会直接消失。

方法二：用接口约束环境对象类型 #

如果项目环境文件较多，不想重复编写属性，可以定义一个接口来统一约束：

1. 新建environment.model.ts文件：

export interface Environment {
    production: boolean;
    API_BASE_URL: string;
}

2. 在两个环境文件中导入接口并标注类型：

// environment.ts
import { Environment } from './environment.model';

export const environment: Environment = {
    production: false,
    API_BASE_URL: 'http://localhost:8092'
};

// environment.development.ts
import { Environment } from './environment.model';

export const environment: Environment = {
    production: false,
    API_BASE_URL: 'http://localhost:8092' // 开发环境地址
};

这种方式下，哪怕你漏写了某个属性，TypeScript会在编译阶段直接提示补全，从根源避免类型不一致的问题。

另外可以检查下当前项目的运行环境配置，确认是否是切换到development环境才触发的错误，确保加载的环境文件符合预期。

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