I’m working on an Angular project where I need to use environment variables managed by dotenv. For this, I’ve been using the custom webpack builder provided by @angular-builders/custom-webpack:browser. This allows me to define my custom webpack configuration and load environment variables from a .env file.

However, I want to deploy my application to Firebase Hosting, which only supports the default Angular application builder (@angular-devkit/build-angular:application). When I try to deploy my project, I get this Error: Only the Angular application builder is supported.

I tried somehow to add dotenv to @angular-devkit/build-angular:application, but no success.

angular.json:

{
  "projects": {
    "my-angular-app": {
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "src/custom-webpack.config.ts"
            },
            "outputPath": "dist/my-angular-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.css"],
            "scripts": []
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "my-angular-app:build"
          }
        }
      }
    }
  }
}