DEV Community

Cover image for How to configure and use environment specific values in Angular
Adrian Matei for Codever

Posted on • Updated on • Originally published at codever.dev

How to configure and use environment specific values in Angular

Configuring application environments

First define different environment files for the environments you might have under the project's src/environments/ folder. Below there is an extract from environment.ts (used for development) and environment.prod.ts used for production:

//environment.ts
export const environment = {
  production: false,
  HOST: 'http://localhost:4200',
  API_URL: 'http://localhost:3000/api',
};

//environment.prod.ts
export const environment = {
  production: true,
  HOST: 'https://www.codever.land',
  API_URL:  'https://www.codever.land/api',
};
Enter fullscreen mode Exit fullscreen mode

The build command (and ng serve) uses environment.ts as the build target when no environment is specified.

The main CLI configuration file, angular.json, contains a fileReplacements section in the configuration for each build target, which lets you replace any file in the TypeScript program with a target-specific version of that file. This is useful for including target-specific code or variables in a build that targets a specific environment, such as production or staging.

By default, no files are replaced. You can add file replacements for specific build targets. For example

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    
Enter fullscreen mode Exit fullscreen mode

This means that when you build your production configuration with ng build --configuration production, the src/environments/environment.ts file is replaced with the target-specific version of the file, src/environments/environment.prod.ts.

You can add additional configurations (e.g. pro different stages) as required.

Using environment-specific variables in your app

Then in your code import environment and use the values defined in the files above, as in the following example:

import { environment } from '../../../environments/environment'
import { localStorageKeys } from '../model/localstorage.cache-keys';

@Injectable()
export class SystemService {
  cachedQueries = {
    PUBLIC_TAGS_LIST: `${environment.API_URL}/public/bookmarks`
  }

 //...
}
Enter fullscreen mode Exit fullscreen mode

If you want to use environment variables in your angular html template, then just define a local variable for the imported environment and use it in the template, like in the following example:

import { environment } from 'environments/environment';

@Component({
  selector: 'app-social-share-dialog',
  templateUrl: './social-share-dialog.component.html',
  styleUrls: ['./social-share-dialog.component.scss'],
  providers: [DatePipe]
})
export class SocialShareDialogComponent implements OnInit {

  sharableId$: Observable<any>;
  readonly environment = environment;
  //...
}
Enter fullscreen mode Exit fullscreen mode

The html part, where HOST value is used:

    <div>
      <h3>Shareable</h3>
      {{ environment.HOST + '/bookmarks/shared/' + (sharableId$ | async).shareableId}}
    </div>
Enter fullscreen mode Exit fullscreen mode


Reference -

https://angular.io/guide/build#using-environment-specific-variables-in-your-app


Shared with ❤️ from Codever. Use 👉 copy to mine functionality to add it to your personal snippets collection.

Codever is open source on Github⭐🙏

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.