{
...
"targets": {
"build": {
"executor":"@nx/angular:application",
"options": {
...
"define": {
"MY_API_URL":"http://localhost:3333"
}
}
},
...
}
}

declare constMY_API_URL:string;

import { Injectable }from'@angular/core';
@Injectable({ providedIn:'root' })
exportclassApiHttpClient {
constructor() {
console.log('API URL:',MY_API_URL);
}
}

{
...
"targets": {
"build": {
"executor":"@nx/angular:application",
"options": {
...
"define": {
"process.env.MY_API_URL":"http://localhost:3333"
}
}
},
...
}
}

declare constprocess: {
env: {
API_URL:string;
};
};

import { Injectable }from'@angular/core';
@Injectable({ providedIn:'root' })
exportclassApiHttpClient {
constructor() {
console.log('API URL:', process.env.MY_API_URL);
}
}

{
...
"targets": {
"build": {
"executor":"@nx/angular:application",
"options": {
...
"plugins": ["apps/my-app/plugins/env-var-plugin.js"]
}
},
...
}
}

constmyOrgEnvRegex =/^MY_ORG_/i;
constenvVarPlugin = {
name:'env-var-plugin',
setup(build) {
constoptions =build.initialOptions;
constenvVars = {};
for(constkeyinprocess.env) {
if(myOrgEnvRegex.test(key)) {
envVars[key] =process.env[key];
}
}
options.define['process.env'] =JSON.stringify(envVars);
},
};
module.exports=envVarPlugin;

MY_ORG_API_URL=http://localhost:3333

Finally, you can use the environment variables in your application code:

import { Injectable }from'@angular/core';
@Injectable({ providedIn:'root' })
exportclassApiHttpClient {
constructor() {
console.log('API URL:', process.env.MY_ORG_API_URL);
}
}

Angular executors for Webpack (e.g.@nx/angular:webpack-browser and@angular-devkit/build-angular:browser) don't have built-in support for using environment variables when building applications.

To add support for environment variables we need to use the webpackDefinePlugin in our own custom webpack configuration. We'll see how to do so in the following sections.

The webpack-based Angular executors (e.g.@nx/angular:webpack-browser and@angular-devkit/build-angular:browser) set the webpack'smode configuration option based on the values for the following in the builder options:

• optimization
• optimization.scripts
• optimization.styles
• optimization.styles.minify

If any of the above is set totrue, webpack'smode is set toproduction. Otherwise, it's set todevelopment.

By default, webpack automatically sets theNODE_ENV variable to the value of themode configuration option. Therefore, Angular applications code have access to that environment variable at build time, but we can't change theNODE_ENV variable value directly as we would do with other environment variables because Angular always set themode configuration option based on the above.

To change theNODE_ENV variable we can do one of the following:

• Turn on the builder optimizations to set it toproduction
• Turn off the builder optimizations to set it todevelopment
• Use a custom webpack configuration to override the webpackmode set by Angular executors

The first two options is a matter of changing your build target configuration or passing the specific flag in the command line. We'll see how to do the last in the following section.

Update thebuild andserve targets to use the@nx/angular relevant executors and provide a custom Webpack configuration:

{
...
"targets": {
"build": {
"executor":"@nx/angular:webpack-browser",
"options": {
...
"customWebpackConfig": {
"path":"apps/my-app/webpack.config.js"
}
}
},
"serve": {
"executor":"@nx/angular:dev-server"
...
},
...
}
}

Then, we can useDefinePlugin in our custom Webpack configuration:

constwebpack =require('webpack');
constmyOrgEnvRegex =/^MY_ORG_/i;
functiongetClientEnvironment() {
constenvVars = {};
for (constkeyinprocess.env) {
if (myOrgEnvRegex.test(key)) {
envVars[key]=process.env[key];
}
}
return {
'process.env':JSON.stringify(envVars),
};
}
module.exports=(config,options,context)=> {
// Overwrite the mode set by Angular if the NODE_ENV is set
config.mode=process.env.NODE_ENV||config.mode;
config.plugins.push(newwebpack.DefinePlugin(getClientEnvironment()));
returnconfig;
};

In our custom Webpack configuration we collect all environment variables that start withMY_ORG_, define theprocess.env object with them, and provide it to theDefinePlugin. You can adjust the configuration to your needs (e.g., use a different regular expression, use a whitelist, add all environment variables, etc.).

Next, make sure to inform TypeScript of the defined variables to prevent type-checking errors during the build. We can achieve this in a number of ways. For example you could create or update a type definition file included in the TypeScript build process (e.g.src/types.d.ts) withdeclare statements for the defined variables:

declare constprocess: {
env: {
MY_ORG_API_URL:string;
};
};

Now, we can define variables in our.env file, such as:

MY_ORG_API_URL=http://localhost:3333

Finally, we can use environment variables in our code:

import { Injectable }from'@angular/core';
@Injectable({ providedIn:'root' })
exportclassApiHttpClient {
constructor() {
console.log('API URL:', process.env.MY_ORG_API_URL);
}
}

While you cannot use environment variables inindex.html, one workaround is to create differentindex.*.html files, such asindex.prod.html, then swap them in different environments.

For example, you can configure yourbuild target inproject.json as follows:

{
...
"targets": {
"build": {
"executor":"@angular-devkit/build-angular:browser",
...
"configurations": {
"production": {
...
"fileReplacements": [
{
"replace":"apps/my-app/src/index.html",
"with":"apps/my-app/src/index.prod.html"
}
]
}
}
}
}
}