How to use dotenv-webpack with angular and nx

Question

I want to configure a .env file in my app so I can define my env variables from codebuild. I have an angular application in a nx workspace. I'm overriding my webpack to configure dotenv-webpack, but I'm getting this error when I try to build my app using nx build --prod

A value for 'process' cannot be determined statically, as it is an external declaration.

Not sure what I'm doing wrong.

Here is my webpack:

const Dotenv = require('dotenv-webpack');
require('dotenv').config();
module.exports = (config, context) => {
    return {
        ...config,
        plugins: [
            ...config.plugins,
            new Dotenv({
                systemvars: true,
            }),
        ],
    };
};

Here is the app config on angular.json:

"myapp": {
    "projectType": "application",
    "root": "apps/myapp",
    "sourceRoot": "apps/myapp/src",
    "architect": {
        "build": {
            "builder": "@angular-builders/custom-webpack:browser",
            "options": {
                "customWebpackConfig": {
                    "path": "apps/myapp/webpackConfig.js"
                }
            },
            "configurations": {
                "production": {
                    "customWebpackConfig": {
                        "path": "apps/myapp/webpackConfig.js"
                    },
                    "fileReplacements": [
                        {
                            "replace": "apps/myapp/src/environments/environment.ts",
                            "with": "apps/myapp/src/environments/environment.prod.ts"
                        }
                    ]
                }
            }
        },
    },
},

My .env file:

API_URL=https://someurl.com/

And my environment.prod.ts:

export const environment = {
    apiUrl: process.env.API_URL,
};

Is there anything missing?

How to use dotenv-webpack with angular and nx

0 Answers0