Angular 4读取环境变量报错：Cannot find name 'process' 求解决方案

首先，你提到的“Angular应用中无法使用process，因为它是运行时定义的”这个说法不完全准确：

• 编译阶段报错Cannot find name 'process'，本质是TypeScript不知道process这个全局变量的类型定义，而非Angular本身禁止使用它；
• 但在浏览器运行环境中，确实不存在Node.js的process对象，所以即使解决了编译问题，直接在浏览器端用process.env也会在运行时出错。

接下来给你几个不用angular-cli默认environment.ts文件的实现方案：

方案1：通过window对象挂载环境变量（最轻量化） #

这个方案适合需要在部署阶段动态替换变量的场景，无需修改Angular构建配置：

1. 在项目根目录的index.html中，添加一段脚本定义全局环境变量：

<head>
  <!-- 其他head内容 -->
  <script>
    // 这里的变量值可以在部署时用CI/CD工具（如sed、envsubst）动态替换
    window.env = {
      KEY_TO_READ: 'your_default_value'
    };
  </script>
</head>

2. 为了让TypeScript识别window.env的类型，在src/types目录下创建window.d.ts类型声明文件：

declare global {
  interface Window {
    env: {
      KEY_TO_READ: string;
      // 可以添加更多需要的环境变量
    };
  }
}

export {};

3. 在组件或服务中直接读取：

const myKey = window.env.KEY_TO_READ;
console.log('读取到的环境变量：', myKey);

方案2：通过HttpClient加载静态配置文件 #

适合需要将配置与代码分离，方便修改的场景：

1. 在assets目录下创建config.json配置文件：

{
  "KEY_TO_READ": "your_config_value"
}

2. 创建一个配置服务config.service.ts，负责加载和提供配置：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, tap } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ConfigService {
  private configData: Record<string, any> | null = null;

  constructor(private http: HttpClient) {}

  // 加载配置文件
  loadConfig(): Observable<Record<string, any>> {
    return this.http.get<Record<string, any>>('/assets/config.json').pipe(
      tap(data => this.configData = data)
    );
  }

  // 根据key获取配置值
  getConfig(key: string): any {
    return this.configData?.[key];
  }
}

3. 修改app.module.ts，使用APP_INITIALIZER在应用启动前加载配置：

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { ConfigService } from './config.service';

// 初始化函数：确保配置加载完成后再启动应用
export function initConfig(configService: ConfigService) {
  return () => configService.loadConfig().toPromise();
}

@NgModule({
  imports: [HttpClientModule], // 别忘了导入HttpClientModule
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initConfig,
      deps: [ConfigService],
      multi: true
    }
  ]
})
export class AppModule { }

4. 在组件中使用：

import { Component } from '@angular/core';
import { ConfigService } from './config.service';

@Component({
  selector: 'app-root',
  template: '<p>环境变量值：{{ keyValue }}</p>'
})
export class AppComponent {
  keyValue: string | undefined;

  constructor(private configService: ConfigService) {
    this.keyValue = this.configService.getConfig('KEY_TO_READ');
  }
}

方案3：扩展Webpack配置使用DefinePlugin #

适合希望保留process.env写法，且愿意自定义构建配置的场景：

1. 安装自定义Webpack构建工具：

npm install @angular-builders/custom-webpack --save-dev
npm install dotenv --save-dev # 可选：用于读取本地.env文件

2. 在项目根目录创建webpack.config.js：

const webpack = require('webpack');
require('dotenv').config(); // 读取本地.env文件的变量

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      // 将环境变量注入到代码中，编译时会替换为实际值
      'process.env.KEY_TO_READ': JSON.stringify(process.env.KEY_TO_READ)
    })
  ]
};

3. 修改angular.json，替换默认构建器为自定义Webpack构建器：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      // 保留原有build配置的其他内容
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server"
    // 保留原有serve配置的其他内容
  }
}

4. 添加TypeScript类型声明，解决编译报错：
   在src/typings.d.ts中添加：

declare var process: {
  env: {
    KEY_TO_READ: string;
  };
};

5. 现在就可以像原来一样在代码中使用：

const myKey = process.env.KEY_TO_READ;

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