Using environment.ts value in proxy.config.mjs file + Angular

Question

At work we are trying to use proxy.config.mjs (located in src folder) as per Angular Docs to talk to back-end API in Dev mode but we want to set target value in this proxy conf using environment.ts file.

Have followed all default configurations to set-up proxy.config.mjs, environment files but getting below error when doing ng serve :

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

Other files :

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, <- Trying to use env value here
    secure: false
  }
];

angular.json :

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "proxy-test:build",
        "proxyConfig": "./src/proxy.config.mjs" <- Using proxy conf here
      },
      "configurations": {
        "production": {
          "browserTarget": "proxy-test:build:production"
        },
        "development": {
          "browserTarget": "proxy-test:build:development"
        }
      },
      "defaultConfiguration": "development"
    }

Answer 1

Since the environment is most likely a TypeScript file, you're running a Node Javascript Module (.mjs) and not TypeScript.

Now, there is an experimental feature in the works from Node (and as of Node 21 it's at stage 3) which will allow you to import .json into your mjs.

For example:

import jsonObj from "./some/file.json" with { type: "json" };

You'll get a warning, but feel free to use this or not. You can track it at: https://github.com/tc39/proposal-import-attributes

So let's go over what you'll need:

1. In the resolveJsonModule flag in your tsconfig.json:

{
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

2. Have a json dev file (say, src/environments/environment-data-dev.json):

{
  "dev": true,
  "apiUrl": "http://localhost:3000"
}

3. Then in src/environments/environment.ts:

// Just import the Json Object as a Javascript Object //
import devData from "./environment-data-dev.json";

// Expand it in your environment const. //
export const environment = { ...devData };

4. For the production you can make a separate src/environments/environment-data-prod.json:

{
  "dev": false,
  "apiUrl": "http://localhost:3000"
}

5. In the src/environments/environment-prod.ts:

import prodData from "./environment-data-prod.json";

export const environment = { ...prodData };

6. Finally, in your mjs file, you can use:

import environment from "./src/environments/environment-data-dev.json" with { type: "json" };

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

Answer 2

You could try to update the import statement to use the full path of the environment.ts file.

Change this :

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

To this :

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