Amplify environment variable not getting replaced in Angular

The issue you're experiencing with environment variables not being replaced in your Angular project hosted on AWS Amplify is a common challenge. Here's how you can address this:

1. Environment Variable Format: In your Angular environment.ts file, you should use the following format for environment variables:

export const environment = {
  callsApiUrl: process.env.CALLS_API_URL || 'default_value'
};

2. Build-time Variable Replacement: Amplify doesn't automatically replace environment variables in your Angular code. You need to set up a build process that replaces these variables at build time. One way to do this is by using the env-cmd package and modifying your build command in the Amplify console.

3. Amplify Build Settings: In your Amplify console, under the "Build settings" section, modify your build command to use env-cmd. For example:

env-cmd -f .env npm run build

4. Create a .env file: Create a .env file in your project root with your environment variables:

CALLS_API_URL=$CALLS_API_URL

5. Update angular.json: In your angular.json file, add the following to the "fileReplacements" array under the build configurations:

{
  "replace": "src/environments/environment.ts",
  "with": "src/environments/environment.prod.ts"
}

6. Handling Many Variables: For managing 30-40 environment variables across different environments, consider using AWS Systems Manager Parameter Store. You can store your variables there and fetch them during the build process.

7. Documentation: While Amplify's documentation could be more comprehensive for Angular specifically, the general principles of environment variable management apply across frameworks. You may need to combine Amplify's general guidance with Angular-specific build processes.

Remember, when using Amplify Hosting for a front-end only application, all environment variable replacement happens at build time, not runtime. This means you'll need to rebuild and redeploy your application when changing environment variables.

Lastly, be cautious about environment variable limits in Amplify. There's typically a limit of around 25-28 variables per app, with each variable name and value limited to 512 characters. If you exceed these limits, consider consolidating related variables or using Parameter Store for more extensive configurations.

Sources
Issue with Amplify Environment Variables Limit | AWS re:Post
Environment variables and secrets - AWS Amplify Gen 2 Documentation
How can I make amplify rebuild my app | AWS re:Post