How to get value of --env variable in Angular 5 server.ts?

Question

Currently i have three environments and I am trying to get --env=prod value in my server.ts which in this case is prod
I am getting the right environment object in my angular app but issues getting it in my server.ts file which is necessary for achieving ssr
i am setting the environment using the attribute --env=prod or --env=dev and importing in my server.ts like import { environment } from'./src/environments/environment';

this is what my environment object in .angular-cli.json looks like for both angular and server platform

"environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts",
    "test": "environments/environment.test.ts"
  }

and i do have all the files in the mentioned path

Can you show your angular-cli settings where environment names and environmentSource is defined, also post your environment.prod.ts — sabithpocker, May 15 '18 at 07:00
`{ "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts", "stage": "environments/environment.stage.ts" } }` this is what it looks like and i do have all these files in mentioned paths I am getting the correct environment on the client (i.e angular app) but problem getting environment object in server.ts which is used for ssr purposes — mkamranhamid, May 16 '18 at 04:14
if you're using docker i'd recommend an approach using gulp or something to generate a config file just when express starts up. https://medium.com/@kudresov/a-better-way-to-inject-environmental-variables-in-angular-d3b2d01a3c5e — Rusty Rob, May 21 '19 at 05:10

mac · Answer 1 · 2019-01-22T14:53:57.600

It amazes me how difficult it is for people to understand this issue. Yelling the same thing in bold all-caps is just silly.

Simplified:

environment.ts = { magicKey: "default" }

environment.prod.ts = { magicKey: "46df465d4f64fd654f6fe4d64f" }

---- after building with "--configuration=prod" ----

In app.component:

import { environment } from "environments/environment";
console.log(environment.magicKey); // == "46df465d4f64fd654f6fe4d64f"

In server.ts:

import { environment } from "environments/environment";

NOTE: This gives build error "Can't resolve 'environments/environment' in server.ts". Other threads suggest using the correct relative path, but now it seems that we just get the default file i.e. "fileReplacements" is not being respected/used:

import { environment } from "./src/environments/environment";
console.log(environment.magicKey); // == "default"

As far as i can tell... it should work. I have also verified that "fileReplacements" also exists for "server" in angular.json... no go though. It just doesn't seem to want to replace the file.

I assume this is because the "replace" just doesn't happen for server.ts. It's "outside" of the app and thus the fancy logic doesn't happen? Or maybe that the import (being different) is overriding it?

My workaround, is simply to import all environments in server.ts and the select the correct one based on an environment (process.env) variable that i set on each machine.

If anyone has some insights, then I'm sure I'm not the only one interested.

score 0 · Answer 2 · answered May 15 '18 at 06:55

0

Try this

import { environment } from '../../../environments/environment';
// use path to your environments file.

private apiEndPoint: string;

constructor() {
    this.apiEndPoint = environment.apiUrl;
}

answered May 15 '18 at 06:55

Anuradha Gunasekara

6,553
2
27
37

Read [this](https://stackoverflow.com/questions/41423716/environment-specific-service-endpoint-in-angular2-with-angular-cli) for more info – Anuradha Gunasekara May 15 '18 at 06:58
i'm using angular universal this is not a path issue i'm facing its more about i need the environment object in my server.ts – mkamranhamid May 15 '18 at 07:38
you can access environment object using the above way. Did you try? – Anuradha Gunasekara May 15 '18 at 07:39
yes i did try but i'm only getting default dev environment – mkamranhamid May 15 '18 at 07:51

score 0 · Answer 3 · answered May 15 '18 at 07:02

0

Angular handles the environment variable at build time.

When you write

import { environment } from 'environment';

Angular takes the environment you decide when you run your build command.

This means that even though you imported the dev environment (the default one), if you write

ng build --prod

Your production environment will be taken.

And by the way, if you don't have the exact same values in your environment files, you will have a compilation error. So you might as well copy and paste your variables from one environment to another.

answered May 15 '18 at 07:02

1

`Cannot find module 'environment'.` i'm using angular universal this is not a path issue i'm facing its more about i need the environment object in my server.ts – mkamranhamid May 15 '18 at 07:50
I'm not talking about any path, and I didn't ask you to copy and paste the lines of code, I made an example to explain to you. Let me make it simpler to you : **the command `ng build` decides what environment will be used**, and **all of your environment files must have the exact same properties**. – May 15 '18 at 07:57
Yes i do have the exact same properties in all the environment files but i don't understand why i'm only getting dev environment file – mkamranhamid May 15 '18 at 08:01
**THE COMMAND `ng build` DECIDES WHAT ENVIRONMENT WILL BE USED**. I really can't make it clearer. – May 15 '18 at 08:05
bro you need to calm down first i know which command do what i did try it with `ng build --prod --env=dev` and `ng build --prod --env=prod` but it didn't work only giving me development environment file thats what i've beens saying – mkamranhamid May 15 '18 at 08:42
Because the syntax is `--env prod`, and you didn't give us your CLI file so we don't know if you set up your environments correctly. I'm very calm, you're just not getting my point so I emphasize them. – May 15 '18 at 08:44
my friend you got to see [this](https://github.com/angular/angular-cli/blob/f32089967416ed08d06d08be34afdb45e4a54969/docs/documentation/1-x/build.md#build-targets-and-environment-files) they says `--env=prod` not `--env prod` plus this is not the issue i'm facing i just need the selected environment object in my server.ts or via `process.env` object – mkamranhamid May 16 '18 at 04:09

score 0 · Answer 4 · answered May 16 '18 at 10:23

0

Update angular-cli to latest, if you already haven't

leave environments/environment.ts and don't use it for dev, instead create one environment.dev.ts

Add one environmentSource, if you doesn't have one.

  "environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/environment.dev.ts",
    "prod": "environments/environment.prod.ts",
    "test": "environments/environment.test.ts"
  }

answered May 16 '18 at 10:23

sabithpocker

15,274
1
42
75

so what will i import on `server.ts` dev or prod and how do i do it without knowing which environment to run when ? – mkamranhamid May 17 '18 at 05:38

How to get value of --env variable in Angular 5 server.ts?

4 Answers4