Angular：proxy.config.mjs引用environment.ts出现模块找不到错误

执行ng serve时出现以下错误：

An unhandled exception occurred: Cannot find module '/proxy-test/src/environments/environment' imported from proxy-test/src/proxy.config.mjs

相关文件内容 #

src/environments/environment.ts #

export const environment = {
    production: false,
    apiUrl: 'http://localhost:3000'
};

src/proxy.config.mjs #

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

export default [
  {
    context: [
      '/api'
    ],
    target: environment.apiUrl, // 尝试使用环境变量的值
    secure: false
  }
];

angular.json中的serve配置 #

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "proxy-test:build",
        "proxyConfig": "./src/proxy.config.mjs" // 使用代理配置文件
      },
      "configurations": {
        "production": {
          "browserTarget": "proxy-test:build:production"
        },
        "development": {
          "browserTarget": "proxy-test:build:development"
        }
      },
      "defaultConfiguration": "development"
    }

解决方法 #

问题根源：.mjs属于Node.js原生模块，无法直接识别并加载TypeScript格式的environment.ts文件，导致模块找不到错误。

方案一：同步环境变量为Node可识别的JS格式 #

1. 在src/environments目录下创建environment.mjs文件：

export const environment = {
    production: false,
    apiUrl: 'http://localhost:3000'
};

2. 修改proxy.config.mjs的导入路径，指向JS版本的环境文件：

import { environment } from './environments/environment.mjs';

export default [
  {
    context: ['/api'],
    target: environment.apiUrl,
    secure: false
  }
];

3. 保留environment.ts原有内容（供Angular应用代码使用），后续修改API地址时需同步更新两个文件。

方案二：用dotenv统一管理环境变量（推荐） #

1. 安装依赖：

npm install dotenv --save-dev

2. 在项目根目录创建.env文件：

API_URL=http://localhost:3000

3. 修改proxy.config.mjs读取环境变量：

import dotenv from 'dotenv';

dotenv.config();

export default [
  {
    context: ['/api'],
    target: process.env.API_URL,
    secure: false
  }
];

4. 修改environment.ts同步读取环境变量：

export const environment = {
    production: false,
    apiUrl: process.env.API_URL || 'http://localhost:3000'
};

此方案只需维护一份.env文件，避免多文件同步的麻烦，同时支持多环境配置。

方案三：通过命令行参数传递代理目标 #

1. 修改proxy.config.mjs，读取Node.js命令行参数：

import { parseArgs } from 'node:util';

const args = parseArgs({
  options: {
    apiUrl: {
      type: 'string',
      default: 'http://localhost:3000'
    }
  }
});

export default [
  {
    context: ['/api'],
    target: args.values.apiUrl,
    secure: false
  }
];

2. 启动时通过命令行传递API地址：

ng serve --proxy-config src/proxy.config.mjs --apiUrl=http://localhost:3000

此方案无需额外维护环境文件，适合临时切换API地址的场景。

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