Angular CLI Proxy with env variables
I need to create a proxy to my backend server in order to communicate 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 combine 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 asked Nov 26 '18 at 10:32
Mr.wiseguyMr.wiseguy
1,18531743
add a comment |
I need to create a proxy to my backend server in order to communicate 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 combine 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 asked Nov 26 '18 at 10:32
Mr.wiseguyMr.wiseguy
1,18531743
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
Nov 26 '18 at 10:36
and you need to add your proxy conf file in your start command 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
Nov 26 '18 at 10:37
@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
Nov 26 '18 at 10:39
@Alann the setup you are suggesting in yourpackage.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
Nov 26 '18 at 10:43
add a comment |
I need to create a proxy to my backend server in order to communicate 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 combine 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 asked Nov 26 '18 at 10:32
Mr.wiseguyMr.wiseguy
1,18531743
I need to create a proxy to my backend server in order to communicate 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 combine 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 javascript
angular typescript proxy asked Nov 26 '18 at 10:32
Mr.wiseguyMr.wiseguy
1,18531743
asked Nov 26 '18 at 10:32
Mr.wiseguyMr.wiseguy
1,18531743
edited Nov 26 '18 at 10:42
Mr.wiseguy
asked Nov 26 '18 at 10:32
Mr.wiseguyMr.wiseguy
1,18531743
asked Nov 26 '18 at 10:32
Mr.wiseguyMr.wiseguy
1,18531743
asked Nov 26 '18 at 10:32
Mr.wiseguyMr.wiseguy
1,18531743
1,18531743
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
Nov 26 '18 at 10:36
and you need to add your proxy conf file in your start command 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
Nov 26 '18 at 10:37
@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
Nov 26 '18 at 10:39
@Alann the setup you are suggesting in yourpackage.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
Nov 26 '18 at 10:43
add a comment |
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
Nov 26 '18 at 10:36
and you need to add your proxy conf file in your start command 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
Nov 26 '18 at 10:37
@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
Nov 26 '18 at 10:39
@Alann the setup you are suggesting in yourpackage.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
Nov 26 '18 at 10:43
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
Nov 26 '18 at 10:36
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
Nov 26 '18 at 10:36
and you need to add your proxy conf file in your start command 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
Nov 26 '18 at 10:37
and you need to add your proxy conf file in your start command 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
Nov 26 '18 at 10:37
@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
Nov 26 '18 at 10:39
@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
Nov 26 '18 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
Nov 26 '18 at 10:43
@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
Nov 26 '18 at 10:43
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53479209%2fangular-cli-proxy-with-env-variables%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53479209%2fangular-cli-proxy-with-env-variables%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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
Nov 26 '18 at 10:36
and you need to add your proxy conf file in your start command 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
Nov 26 '18 at 10:37
@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
Nov 26 '18 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
Nov 26 '18 at 10:43