Angular's environment file is not working properly in production build

[anuj-scanova]

Please provide the environment you discovered this bug in.

Production build

Which area/package is the issue in?

Don't know / other

Description

I have a requirement to call service to the backend API whose endpoint is different for each environment. So I created environment files for development and production as per Angular's guide.

# /src/environments/environment.prod.ts

export const environment = {
  production: true,
  apiEndpoint: 'https://api.tapbeep.com',
  systemStatusURL: 'https://status.tapbeep.com',
}

and updated angular.json with

"architect": {
  "build": {
    "builder": "@analogjs/platform:vite",
    "options": {
      "configFile": "vite.config.ts",
      "main": "src/main.ts",
      "outputPath": "dist/client",
      "tsConfig": "tsconfig.app.json",
      "styles": [
      ]
    },
    "defaultConfiguration": "production",
    "configurations": {
      "development": {
        "mode": "development"
      },
      "production": {
        "sourcemap": false,
        "mode": "production",
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.prod.ts"
          }
        ]
      }
    }
  },
  "serve": {
    ...
  },
  "test": {
    ...
  }
}

*updated fileReplacements

And in service using like

export class MyService {
  apiURL = environment.apiEndpoint;
}

This is working fine in the development because, in the case of the development, it is using the src/environments/environment.ts file. But at the time of production build, it should use the environment.prod.ts file instead.

Also tried this command but it's not working

ng build
// or 
ng build --configuration production

Please provide the exception or error you saw

No error, but not using the specified environment variable.

Other information

Client-side environment management should be well documented if it does not support Angular's way of managing environment variables.

I would be willing to submit a PR to fix this issue

• [ ] Yes
• [X] No

[DerHerrGammler]

Since Analog is not using the webpack file replacement you have to configure multiple environments different through a .env file as in this comment described.

[rlmestre]

Since Angular 17.2.0 you can use "define" when executing via @angular-devkit/build-angular:application (which @analogjs/platform:vite) uses under the hood.

{
  "targets": {
    "build": {
      "executor": "@nx/angular:application",
      "configurations": {
        "development": {
          "define": {
            "API_URL": "'https://api.tapbeep.com'" // note the inner quotes: they are required for strings!
          }
        }
      }
    }
  }
}

You'd need to declare these variables' types somewhere that TypeScript will pick them up.

declare const API_URL: string;

Commit where it was implemented with some background information: https://github.com/angular/angular-cli/commit/7f57123fd40b345d7880cb9e2eccd4757c0fb6ee Nx Docs (not Nx-specific but Angular docs don't have a page for this): https://nx.dev/recipes/angular/use-environment-variables-in-angular

[brandonroberts]

Minor correction. @analogjs/platform:vite does not use @angular-devkit/build-angular:application under the hood, so if you want to use some type of "environment" file, you can use environment variables directly.

https://github.com/analogjs/analog/issues/1040#issuecomment-2059859260

[rlmestre]

Maybe I misunderstood or misspoke about that dependency, but I did try this in a brand new Analog project and "define" works as mentioned.