Aspnetcore-angular-universal: Question: how can I add a server side environment variable?

[joshcomley]

Hi and truly thanks for this repo!

How can I add an environment variable that is accessible server side in Angular?

For example an API endpoint that is localhost for development and some online endpoint for production.

I have studied the code but can't see an example, apologies if I've missed anything!

[fmeira]

Don't think there is support for it at the moment.
I did tackle this by adding a service call to load those environment variables at app startup. Can provide a PR if desired.

[kukjevov]

Hello, i`m not entirely sure what you mean by your question. But you can stuff like that using webpack.

Don`t know if you mean ENVIRONMENT VARIABLE from system, or just variable that is accessible in your typescript as global variable lets say.

You can provide "global" variable that will be available in all your scripts using https://webpack.js.org/plugins/define-plugin/.

If you want to use System Environment Variable on server side you can since SSR is running in nodejs and process.env.ENV_VARIABLE.

I hope this helps, if not try to be more specific what you need :), i ll try to help you :).

[MarkPieszak]

@kukjevov Is right, I actually have it setup already in the project so you should be able to test again process.env.production to set a different BASE_URL for your Apis for example.

https://github.com/MarkPieszak/aspnetcore-angular2-universal/blob/master/src/Angular2Spa/webpack.config.js#L185

You can see it in use here in bootstrap-client: https://github.com/MarkPieszak/aspnetcore-angular2-universal/blob/master/src/Angular2Spa/Client/bootstrap-client.ts#L16

Hope that helps and glad the Starter is helping people get going!

I'm working on doing a super cleanup and 2017 upgrade here soon. Some things aren't working as well now that the projects have split up, want to get it all back together soon!

[joshcomley]

Hi all/Mark,

Thanks for that, I'll have a look at using process.env, I guess this will only be accessible within an "isNode" if statement, which is fine.

As an aside, really looking forward to Angular 4 and AOT integration! It's great they're moving Universal to the core so it is not left behind and kept in line with Angular Core's standards.

Anyway, once again this project really was a huge help for me, so much appreciated.

[MarkPieszak]

So the process.env are set from webpack and become available in your code, so when it builds development mode, in your code (process.env.defelopment) will be true, and process.env.production will be false. You can use those if you need to set something based on those scenarios.

Glad it helped! The project structure might change a bit again, think I'm going to keep it simpler as it originally was and let people split out the projects on their own if they want.

[fmeira]

Just as a side note, I am loading a json file with app config setting as I don't see it proper to have those in the webpack config. These settings are per-installation and thus should be easily changed by non technical people. That was the type of solution I was referring to.

[iberodev]

Could you please clarify how to use webpack for environment variables or refer me to a link?
The previous links are broken.
I would need something similar to the ng environment where I define a json for each environment and within the Angular application I use something like import { environment } from '../environments/environment'; to read constants that are different for the different environments.

Then at runtime the variables will be used for the environment build (e.g: ng serve --prod would use production variables).

Is there anything inplace for this or any example I could look at, please?

Thank you

[wmild]

I don't see process.env anywhere in this code. Was this functionality removed since a year ago?

[peterdobson]

Yes it was removed. You can pass variables from server to client by adding properties to the TransferData objects. Search the solution for TransferData and find the relevant .ts and cs files to change. I also pass my API endpoint url via transferData in order to avoid having toimport { ORIGIN_URL } from '@nguniversal/aspnetcore-engine'; because that import pulls a huge (about 500 kb) bundle of unnecessary server side stuff to the client. see #512 for info.

[charedim]

Hi!!, Can I get environment variables from the server without using .NET (AspnetCore)
server side?

[mkamranhamid]

Did anyone get any progress getting env variables or value of --env in server.ts or if its possible from webpack please help me out here

[specialobyno]

Did anyone get any progress getting env variables or value of --env in server.ts or if its possible from webpack please help me out here

I am in the same issue. I have an angular app with nodejs backend. In the nodejs app, I used process.env a lot to fetch environment variables. But when I run npm run build:ssr, the code compiles without my already set node environment variables. Hence my code fails. I'm seriously searching for solution

[mkamranhamid]

@specialobyno Sorry for the late reply. I made it work using a technique. I wrote an article on it feel free to message me if you're stuck anywhere. Here's the link.