@ngx-env/builder
Advanced tools
Easily inject environment variables into your Angular applications
ng add @ngx-env/builder
.envNG_APP_VERSION=$npm_package_version
NG_APP_COMMIT=$GITHUB_SHA
NG_APP_ENABLE_SENTRY=false
@Component({
selector: "app-main",
})
export class MainComponent {
branch = process.env.NG_APP_BRANCH_NAME;
}
<span> {{ branch }} </span>
<!-- Using env pipe from @ngx-env/core -->
<span> {{ 'process.env.NG_APP_VERSION' | env }} </span>
<span> {{ 'NG_APP_COMMIT' | env }} </span>
<!-- index.html -->
<head>
<title>NgApp on %NG_APP_BRANCH_NAME% - %NG_APP_COMMIT%</title>
</head>
npm start
NG_APP_BRANCH_NAME=$GITHUB_HEAD_REF ng test
NG_APP_ENABLE_SENTRY=true npm run build
| Angular | @ngx-env/builder |
|---|---|
| [12 - 14] | ^2.2.0 |
| [8 - 12[ | ^1.1.0 |
Your project can consume variables declared in your environment as if they were declared locally in your JS files.
These environment variables can be useful for:
The environment variables will be defined for you on process.env. For example, having an environment variable named NG_APP_NOT_SECRET_CODE will be exposed in your JS as process.env.NG_APP_NOT_SECRET_CODE.
The environment variables are embedded during the build time.
Do not store any secrets (such as private API keys) in your Angular app!
Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.
NG_APP_*You must create custom environment variables beginning with NG_APP_.
Any other variables will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. See how to use system environment variables.
Changing any environment variables will require you to restart the development server if it is running.
NG_APP_ENVThere is also a built-in environment variable called NG_APP_ENV. You can read it from process.env.NG_APP_ENV.
By default NG_APP_ENV is set to NODE_ENV but you are free to override it.
Having access to the NG_APP_ENV is also useful for performing actions conditionally:
if (process.env.NG_APP_ENV !== "production") {
analytics.disable();
}
When you compile the app with npm run build, the minification step will strip out this condition, and the resulting bundle will be smaller.
You have two options to consume an environment variable in your component's template.
@Component({
selector: "app-footer",
})
export class FooterComponent {
public version = process.env.NG_APP_VERSION;
}
{{ version }}
env pipenpm install @ngx-env/core
import { NgxEnvModule } from "@ngx-env/core";
@NgModule({
declarations: [FoooterComponent],
imports: [CommonModule, NgxEnvModule],
})
export class FooterModule {}
{{ 'process.env.NG_APP_ENV' | env }}
{{ 'NG_APP_ENV' | env }}
You can also access the environment variables starting with NG_APP_ in the index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<title>NgApp on %NG_APP_BRANCH_NAME%</title>
</head>
<body>
<app-root></app-root>
</body>
</html>
Defining environment variables can vary between OSes. It’s also important to know that this manner is temporary for the life of the shell session.
set "NG_APP_NOT_SECRET_CODE=abcdef" && npm start
(Note: Quotes around the variable assignment are required to avoid a trailing whitespace.)
($env:NG_APP_NOT_SECRET_CODE = "abcdef") -and (npm start)
NG_APP_NOT_SECRET_CODE=abcdef npm start
.env@ngx-env/builder uses dotenv to support loading environment variables from .env files.
.env files are to be stored alongside the package.json.
@ngx-env/builder loads .env files with these specific names for the following NG_APP_ENV values, files on the bottom have less priority than files on the top.
valid .env filenames | NG_APP_ENV=* | NG_APP_ENV=test |
|---|---|---|
.env | ✔️ | ✔️ |
.env.local | ✔️ | ✖️ |
.env.${NG_APP_ENV} | ✔️ | ✔️ |
.env.${NG_APP_ENV}.local | ✔️ | ✔️ |
.envYou can expand variables already available on your machine for use in your .env
For example:
NG_APP_VERSION=$npm_package_version
NG_APP_HOSTNAME=$HOSTNAME
Or expand variables local to the current .env file:
DOMAIN=www.example.com
NG_APP_FOO=$DOMAIN/foo
NG_APP_BAR=$DOMAIN/bar
I wrote an article on InDepth.dev explaining how it works.
Declare your environment variables in the generated .env.d.ts file
declare var process: {
env: {
NG_APP_ENV: string;
NG_APP_BASE_URL: string;
NG_APP_VERSION: string;
};
};
Use process.env inside environment.ts files
We recommend to consume environment variables in Angular environment files, for two reasons:
To avoid using process.env in your business code.
If one day you decide that a variable is no longer linked to the environment but rather to an Angular configuration, you would only have to modify the environment files.
To be ready for the day when Angular would implement the consumption of environment variables directly in the CLI.
If the syntax proposed by Angular CLI to access the environment variables turns out to be different, you would only have to modify the environment files.
Example:
environment.ts
export const environment = {
production: false,
baseUrl: process.env.NG_APP.BASE_URL,
version: process.env.NG_APP_VERSION,
};
footer.component.ts
import { environment } from "src/environments/environment";
@Injectable()
export class SomeService {
version = environment.version;
baseUrl = environment.baseUrl;
}
MIT © Chihab Otmani
FAQs
Easily inject environment variables into your Angular applications
The npm package @ngx-env/builder receives a total of 10,048 weekly downloads. As such, @ngx-env/builder popularity was classified as popular.
We found that @ngx-env/builder demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.