Angular项目使用dotenv配置后process.env无法读取环境变量值

核心必现问题：校验逻辑与实际变量不匹配 #

你当前的setenv脚本里写了强制校验：

if (!process.env.API_KEY || !process.env.ANOTHER_API_KEY) {
  console.error('All the required environment variables were not provided!');
  process.exit(-1);
}

但你实际的.env文件只定义了APP_ID和API_KEY两个变量，根本没有ANOTHER_API_KEY。脚本启动后会直接命中这个判断，打印错误后直接退出进程，根本不会执行后面写入environment文件的逻辑，自然拿不到任何值。
直接把校验逻辑改成匹配你实际使用的变量即可：

if (!process.env.API_KEY || !process.env.APP_ID) {
  console.error('All the required environment variables were not provided!');
  process.exit(-1);
}

其他常见排查点 #

• .env文件路径配置错误
  dotenv默认从你执行npm命令的目录（也就是package.json所在的项目根目录）查找.env文件，如果你的.env放在其他目录，会读不到值。如果.env不在根目录，需要手动指定绝对路径：

const path = require('path');
// 示例：.env放在项目根目录，setenv.ts在scripts目录下的路径写法
require('dotenv').config({ path: path.resolve(__dirname, '../.env') });

注意：必须把.env加入.gitignore文件，禁止提交到代码仓库，否则就失去了隐藏敏感信息的作用。

• 错误地在业务代码直接读取process.env
  Angular代码最终运行在浏览器环境，浏览器里根本不存在process这个Node.js全局对象，不可能直接通过process.env.xxx拿到值。
  这套方案的本质是在构建/启动前，通过脚本把.env里的变量值写入src/environments/下的environment配置文件，业务代码必须通过引入Angular原生的environment对象取值：

// 正确写法
import { environment } from 'src/environments/environment';
const apiKey = environment.API_KEY;

• 脚本路径或依赖缺失

  • 确认setenv.ts的实际存放路径和package.json里配置的./scripts/setenv.ts一致
  • 提前安装全所有必需依赖：执行npm i -D dotenv yargs ts-node @types/node，缺任何一个包都会导致脚本运行失败
  • 可以单独执行npm run config测试脚本是否正常运行，如果控制台输出Wrote variables to xxx就说明脚本执行成功，此时打开对应路径的environment.ts文件，就能看到写入的变量值。

• Windows系统命令兼容问题
  如果是Windows环境，直接用&&拼接命令可能出现执行顺序异常，可以改用npm的pre钩子自动执行前置配置脚本，不需要手动拼接命令，跨平台兼容性更好：

"prestart": "npx ts-node ./scripts/setenv.ts --environment=dev",
"start": "ng serve",
"prebuild": "npx ts-node ./scripts/setenv.ts --environment=prod",
"build": "ng build"

改完之后直接执行npm start或者npm run build，npm会自动先跑对应的pre脚本生成环境配置，再启动服务/执行构建。

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