javascript - Angular CLI Proxy with env variables - Stack Overflow

admin管理员组

文章数量:1410717

I need to create a proxy to my backend server in order to municate with it. I've already succesfully set this up, but now I have 2 places where I need to change variables when changing the environment.

My versions:

• Angular CLI 7.0.6
• Angular 7.1.0

NOTE: I have the proxy working (see Angular docs for the setup), I only want to improve the setup.

---

Proxy.conf.js

This is my current (and working!) config.js

const PROXY_CONFIG = {
  "/api/*": {
    "target": "/",
    "logLevel": "debug",
    "changeOrigin": true
  }
};

module.exports = PROXY_CONFIG;

What I would like it to bine this file with the Angular environment.ts file.

---

What I want

I would like to use the variables from the environment.ts file to configure the proxy, so I would only have to maintain my environment.ts instead of both files (also the proxy.conf.js).

Something along the lines of this:

import {env} from 'environments/environment';

const root = env.BASE_SUFFIX + '/*'; // BASE_SUFFIX = '/api'

function getConfig() {
  const PROXY_CONFIG = {};
  PROXY_CONFIG[root] = {
    target: env.API_URL, // API_URL = /
    logLevel: "debug",
    changeOrigin: true,
  };

  return PROXY_CONFIG;
}

module.exports = getConfig();

The problem I currently run into is that environment.ts is a Typescript file and cannot be correctly included by the javascript, because I have some import {foo} from 'bar' in my environment.ts file.

So const env = require(environments/environment.ts).env is not working, due to the ES6 imports.

---

Any suggestions on how I should do this or is this not possible and should I just use 2 separate files?

I need to create a proxy to my backend server in order to municate with it. I've already succesfully set this up, but now I have 2 places where I need to change variables when changing the environment.

My versions:

• Angular CLI 7.0.6
• Angular 7.1.0

NOTE: I have the proxy working (see Angular docs for the setup), I only want to improve the setup.

---

Proxy.conf.js

This is my current (and working!) config.js

const PROXY_CONFIG = {
  "/api/*": {
    "target": "https://url.to.somewhere/",
    "logLevel": "debug",
    "changeOrigin": true
  }
};

module.exports = PROXY_CONFIG;

What I would like it to bine this file with the Angular environment.ts file.

---

What I want

I would like to use the variables from the environment.ts file to configure the proxy, so I would only have to maintain my environment.ts instead of both files (also the proxy.conf.js).

Something along the lines of this:

import {env} from 'environments/environment';

const root = env.BASE_SUFFIX + '/*'; // BASE_SUFFIX = '/api'

function getConfig() {
  const PROXY_CONFIG = {};
  PROXY_CONFIG[root] = {
    target: env.API_URL, // API_URL = https://url.to.somewhere/
    logLevel: "debug",
    changeOrigin: true,
  };

  return PROXY_CONFIG;
}

module.exports = getConfig();

The problem I currently run into is that environment.ts is a Typescript file and cannot be correctly included by the javascript, because I have some import {foo} from 'bar' in my environment.ts file.

So const env = require(environments/environment.ts).env is not working, due to the ES6 imports.

---

Any suggestions on how I should do this or is this not possible and should I just use 2 separate files?

• javascript
• angular
• typescript
• proxy

Share Improve this question Follow edited Nov 26, 2018 at 10:42 Mr.wiseguy asked Nov 26, 2018 at 10:32 Mr.wiseguyMr.wiseguy 4,2521111 gold badges3939 silver badges6868 bronze badges 7

• If you use a proxy config in proxy.conf.json, you just need to call /api and it will do url.to.somewhere/api – Alann Commented Nov 26, 2018 at 10:36
• and you need to add your proxy conf file in your start mand for my project I did it like this : "start": "node node_modules/@angular/cli/bin/ng serve --host 0.0.0.0 --disable-host-check --proxy-config proxy.conf.json" in package.json – Alann Commented Nov 26, 2018 at 10:37
• 2 @Alann, I have a working setup, so that is not the problem. The problem is that I do NOT want to hardcode variables in the file, because then I would have to change the code in 2 places. I want to use the Angular environment.ts variables in the js file (cannot use .json, because it doesn't support variables) – Mr.wiseguy Commented Nov 26, 2018 at 10:39
• @Alann the setup you are suggesting in your package.json (start) is not the way Angular or the Angular-CLI is suggesting how you should do it btw. See my post for the link to the Angular page on how you should set it up. – Mr.wiseguy Commented Nov 26, 2018 at 10:43
• 1 Why would you need to change "it" in two places? With the proxy in place all your http requests should use relative URLs, like /api/path/to/endpoint. If anything you should delete the URL from the environment.ts file. – jrasm91 Commented Sep 13, 2021 at 17:00

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 1

I'm using it this way. you can try this

// create proxy.conf.json

{
  "/api/*": {
    "target": "http://localhost:8000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

// in package.json file "scripts" under that find "start"

"start": "ng serve --proxy-config proxy.conf.json",

// api call

this.http.post('/api/api_name/')

本文标签： javascriptAngular CLI Proxy with env variablesStack Overflow