Angular12+Node14项目读取环境变量始终返回undefined，求解决办法

问题根因 #

你用了Node.js服务端的环境变量方案来处理Angular前端项目的需求，本身逻辑不成立：

• process是Node.js运行时的全局对象，Angular代码最终运行在浏览器环境，默认不存在这个对象，即使你安装polyfill也无法实现服务端那样读取本地.env文件的能力
• dotenv库本身设计用于Node.js服务端项目，在前端组件内直接调用require('dotenv').config()没有效果
• Angular CLI有自己的内置环境变量管理机制，不需要额外引入dotenv相关依赖实现基础的环境变量需求

解决方法1：用Angular原生环境变量方案（推荐） #

1. 找到项目根目录下src/environments文件夹，里面存在两个默认文件：
   • environment.ts：开发环境配置
   • environment.prod.ts：生产环境配置
2. 在对应配置文件中添加你需要的变量：

// environment.ts 示例
export const environment = {
  production: false,
  CLIENT_ID: 'sample'
};

3. 在login.component.ts中直接引入使用即可：

import { environment } from 'src/environments/environment';

// 调用处
console.log('value is ', environment.CLIENT_ID);

4. 生产构建时执行ng build --prod，Angular会自动替换为environment.prod.ts中的配置

解决方法2：如果必须使用.env文件管理变量 #

需要配合自定义webpack配置实现：

1. 把你的.env文件移动到项目根目录（和package.json同级），不要放在组件文件夹内
2. 安装自定义构建器依赖：

npm install @angular-builders/custom-webpack --save-dev

3. 项目根目录新建webpack.config.js，内容如下：

const Dotenv = require('dotenv-webpack');
module.exports = {
  plugins: [new Dotenv()]
}

4. 修改angular.json配置：
   • 找到projects.[你的项目名].architect.build.builder字段，将默认值@angular-devkit/build-angular:browser替换为@angular-builders/custom-webpack:browser
   • 在build.options下添加配置：

"customWebpackConfig": {
  "path": "./webpack.config.js"
}

• 同时找到projects.[你的项目名].architect.serve.builder字段，替换为@angular-builders/custom-webpack:dev-server

5. 打开tsconfig.json，在compilerOptions下添加"types": ["node"]，避免ts类型报错
6. 重新执行ng serve即可读取到process.env.CLIENT_ID的值

注意事项 #

• 所有前端环境变量都会被打包到最终的静态代码中，绝对不要在环境变量里存储密钥、密码等敏感信息
• 修改.env文件或者environment配置文件后，需要重启ng serve才能生效

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