CODEWITHSUNDEEP
angularangular5devopsangular-universalng-build
deathstroke
deathstroke

Reputation: 603

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

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

Upvotes: 2

Views: 5561

Answers (4)

mac
mac

Reputation: 113

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.

Upvotes: 3

sabithpocker
sabithpocker

Reputation: 15558

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"
  }

Upvotes: 0

user4676340
user4676340

Reputation:

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.

Upvotes: 0

Anuradha Gunasekara
Anuradha Gunasekara

Reputation: 6983

Try this

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

private apiEndPoint: string;

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

Upvotes: 0

Related Questions