How to inject environment variables into your Angular applications

[chihab]

Discussion about the article How to inject environment variables into your Angular applications

[grantwparks]

Would be great if the code example(s) were placed in context. I.e. ID where the heck to put it.

[maxkoretskyi]

which part?

[chihab]

The code snippets are supposed to be implemented in an Angular CLI builder. I invite you to read other articles that describe how to implement an Angular CLI builder.
You can also check the source code of @ngx-env/builder which uses exactly the same logic described in the article.

[grantwparks]

The code examples for someone new to Angular, IDK what files the code belongs in. I inferred that several code examples were refinements of previous examples, but I'm not sure about that. I haven't been able to gather what code actually needs to be put where.

[chihab]

For someone new to Angular, I would suggest going with a ready to use solution, the simplest being @ngx-env/builder (biased opinion here :)).

The webpack configuration needs to be placed in a custom builder, which is outside the scope of this document. The article only explains how that works behind the scenes.

If you are referring to a specific code snippet where the context is not clear, please let us know which one it is.

[jtheyer]

All the code snippets. I'm new to learning angular and nodejs, no idea where to put these even though the concepts are very clear. I have a server w/ .env variables that need to get passed over to the angular app for use there but something seems off when it's looking easier to do the "tedious" version than simply implement the package.

[chihab]

The easiest way to inject environment variables into your angular application is to use @ngx-env/builder.

[wpannell]

Where is the function secureEnvBeforePassingToAngular?

[maxkoretskyi]

the function is probably irrelevant to the examples and does some kind of sanitizing

[chihab]

The function is supposed to select only the environment variables that we want to pass to our Angular application, for example you might want to only see environment variables starting with "MY_APP". If you don't secure your environment you might pass sensitive environment variables such as keys.
The code snippets are supposed to be implemented in an Angular CLI builder. I invite you to read other articles that describe how to implement an Angular CLI builder.
You can also check the source code of @ngx-env/builder which uses exactly the same logic described in the article.

[wpannell]

Thanks for your quick reply and the clarity of your answer.

[jtheyer]

Yes, thank you chihab!

[joe20123]

Thanks for the package and article. After installing the @ngx-env/builder package to an Angular project, I came across an error during start up:
Error: node_modules/@types/node/globals.d.ts:171:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'process' must be of type '{ env: { NG_APP_ENV: string; NG_APP_LaunchDarklySdkKey: string; }; }', but here has type 'Process'.
is it possible to rename 'process' to something different to avoid the name conflict?

[chihab]

Hey please update to @ngx-env/builder v15.0.0 which should fix the issue.

[joe20123]

thank you!

[famzila]

@chihab is there a way to avoid having extra env file (.env) and use directly the environement files? I find .env great for React apps as they don't have any env to begin with, but not Angular ...

[chihab]

Hey @famzila, you don't have to have this file actually .env is not the only option to set the environment variables. You can also set them from the command line as descibed here https://github.com/chihab/ngx-env#command-line.

They just have to be present in your shell session before building the application, through the .bashrc file if you're using bash or through your CI workflow config as descibed here for GitHub for example: https://docs.github.com/en/actions/learn-github-actions/variables...

[brentarias]

My problem is that my Angular app is hosted as a static app (there is no Node server) and I need it to be configured with environment variables. Examples of hosting options I have: Azure Static Web Apps or Azure App Service running .Net Core Web API.

So far the only solution I've found is this:
https://stackoverflow.com/questions/61764213/how-to-use-azure-app-configuration-in-angular

Know of other options I might have?

[chihab]

The environment variables are injected at build time not at runtime. So if you've already built the app and only deploy the static files to your server, that's too late indeed unless you're using a runtime config retrieval as the one you mentioned.

If you can somehow access the environment variables at build time in your Azure DevOps pipeline, they can be injected into the application using @ngx-env/builder . The final JS file will contain the values as strings (don't use sensitive data though as it will be exposed to your users).