Angular5中dotenv无法正常使用，寻求技术解决方案

兄弟，我明白你为啥卡壳了——直接在Angular里用Node.js的dotenv包行不通的，因为Angular最终是跑在浏览器环境里的，没有Node的process对象，而且这种用法也不符合Angular的项目架构逻辑。我给你两种解决方案，优先推荐第一种官方的方式：

方案一：使用Angular内置的环境配置（推荐） #

Angular本身就提供了一套成熟的环境变量管理系统，完全不需要依赖dotenv，步骤如下：

1. 找到环境配置文件
   项目根目录下的src/environments文件夹里，默认有两个文件：

   • environment.ts：开发环境用
   • environment.prod.ts：生产环境用

2. 在环境文件中定义变量
   比如在environment.ts里添加你的配置：

   // src/environments/environment.ts
   export const environment = {
     production: false,
     apiBaseUrl: 'http://localhost:3000/api',
     appApiKey: 'your-development-api-key'
   };
   

   生产环境的environment.prod.ts同理修改即可。

3. 在组件中导入并使用
   不需要任何declare声明，直接导入环境对象就行：

   import { Component, OnInit } from '@angular/core';
   // 导入环境配置
   import { environment } from '../environments/environment';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements OnInit {
     ngOnInit(): void {
       // 直接使用环境变量
       console.log('开发环境API地址:', environment.apiBaseUrl);
       console.log('API密钥:', environment.appApiKey);
     }
   }
   

4. 构建时自动切换环境
   运行ng build默认用开发环境，生产环境构建用ng build --prod，Angular会自动替换对应的环境配置文件。

方案二：用Webpack+dotenv加载.env文件（特殊需求场景） #

如果你确实需要从.env文件加载变量（比如和其他项目保持配置方式一致），可以通过自定义Webpack配置实现：

1. 安装依赖
   打开终端运行：

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

2. 创建Webpack配置文件
   在项目根目录新建webpack.config.js，内容如下：

   const webpack = require('webpack');
   const dotenv = require('dotenv');
   
   module.exports = () => {
     // 读取.env文件内容
     const env = dotenv.config().parsed;
     // 把环境变量转换成Webpack能识别的格式
     const envKeys = Object.keys(env).reduce((prev, next) => {
       prev[`process.env.${next}`] = JSON.stringify(env[next]);
       return prev;
     }, {});
   
     return {
       plugins: [
         new webpack.DefinePlugin(envKeys)
       ]
     };
   };
   

3. 修改Angular构建配置
   打开angular.json，找到architect下的build和serve节点，替换builder并指定Webpack配置：

   "architect": {
     "build": {
       "builder": "@angular-builders/custom-webpack:browser",
       "options": {
         "customWebpackConfig": {
           "path": "./webpack.config.js"
         },
         // 保留原有其他配置（比如outputPath、index、main等）
       }
     },
     "serve": {
       "builder": "@angular-builders/custom-webpack:dev-server",
       // 保留原有其他配置
     }
   }
   

4. 添加TypeScript类型声明
   在src目录下新建typings.d.ts，避免TS编译器报错：

   declare var process: {
     env: {
       [key: string]: string | undefined;
     };
   };
   

5. 创建.env文件并使用
   在项目根目录新建.env文件：

   API_BASE_URL=http://localhost:3000/api
   APP_API_KEY=your-dev-key
   

   然后在组件中直接使用：

   import { Component, OnInit } from '@angular/core';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements OnInit {
     ngOnInit(): void {
       console.log('API地址:', process.env.API_BASE_URL);
       console.log('API密钥:', process.env.APP_API_KEY);
     }
   }
   

注意：第二种方式要注意，.env文件里的敏感信息不要提交到版本库，记得把.env加入.gitignore。

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