posts/angular/using-os-environment-variables-in-angular-with-docker/

[utterances-bot]

Using OS Environment Variables in Angular (with Docker) | Coding Latte - Coding is fun

CoverImage

https://codinglatte.com/posts/angular/using-os-environment-variables-in-angular-with-docker/

[Raghvendrachoubey]

in typing.d.ts file ihave done something like

declare var $ENV: Env; export interface Env { ENVIRONMENT: string; SomeAPIKey: string; SomeOtherAPIKey: string; } and importing it like

import { $ENV } from '../typing.d'

export const environment = { production: false, environment: $ENV.ENVIRONMENT, APIKeys: { SomeAPIKey: $ENV.SomeAPIKey, SomeOtherAPIKey: $ENV.SomeOtherAPIKey } };

then i am getting error "src/typing.d.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property."

in case i am not exporting and importing interface getting error "$ENV" not defined.

Can you please help me for the same Here is my package.json file

{ "name": "osvar", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~7.0.0", "@angular/common": "~7.0.0", "@angular/compiler": "~7.0.0", "@angular/core": "~7.0.0", "@angular/forms": "~7.0.0", "@angular/http": "~7.0.0", "@angular/platform-browser": "~7.0.0", "@angular/platform-browser-dynamic": "~7.0.0", "@angular/router": "~7.0.0", "core-js": "^2.5.4", "ngx-build-plus": "^7.8.3", "rxjs": "~6.3.3", "zone.js": "~0.8.26" }, "devDependencies": { "@angular-builders/custom-webpack": "^7.4.3", "@angular-builders/custom-webpack": "~7.4.3", "@angular-devkit/build-angular": "~0.10.0", "@angular/cli": "~7.0.5", "@angular/compiler-cli": "~7.0.0", "@angular/language-service": "~7.0.0", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "~4.5.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~3.1.6" } }

[Raghvendrachoubey]

inside my custom-webpack.config.js file i have given something like
const webpack = require('webpack');

module.exports = { plugins: [ new webpack.DefinePlugin({ $ENV: { ENVIRONMENT: JSON.stringify(process.env.ENVIRONMENT), SomeAPIKey: JSON.stringify(process.env.SomeAPIKey), SomeOtherAPIKey: JSON.stringify(process.env.SomeOtherAPIKey) } }) ] };

[mainawycliffe]

This does not work if I run the container with --env option. It always uses the value set in Dockerfile

If you want to specify environment variables outside your dockerfile i.e. using Docker Compose or Env flag, don't add the same environment variables to your docker file.

[mainawycliffe]

@Raghvendrachoubey the $ENV should not be imported:

export const environment = {
  production: true,
  environment: $ENV.ENVIRONMENT,
  APIKeys: {
    SomeAPIKey: $ENV.SomeAPIKey,
    SomeOtherAPIKey: $ENV.SomeOtherAPIKey
  }
};

Check the full example here.

I am sorry for the late response, I was away on vacation.

[Stijn-Rutten]

Hi, my environment variables are not defined at runtime. Does this still work for Angular 13?

[mainawycliffe]

@Stijn-Rutten it's possible something has changed since I published this, let me investigate and get back to you.

[mainawycliffe]

@Stijn-Rutten Here is a quick demo on Angular 13, would work with any other version of Angular I presume.