VOOZH about

URL: https://www.digitalocean.com/community/tutorials/angular-environment-variables

⇱ How To Use Environment Variables in Angular | DigitalOcean


How To Use Environment Variables in Angular

Updated on June 15, 2021
👁 How To Use Environment Variables in Angular

Introduction

If you’re building an app that uses an API, you’ll want to use your API key for testing environments during development and your API key for live environments during production. In Angular, you can create environment variables with the environment.ts file.

Note: This post applies to Angular 2+ apps.

In this tutorial, you will learn how to use environment variables in Angular.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the author

Alligator.io is a developer-focused resource that offers tutorials and insights on a wide range of modern front-end technologies, including Angular 2+, Vue.js, React, TypeScript, Ionic, and JavaScript.

Category:
Tags:

Still looking for an answer?

Was this helpful?

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Step 1: Install Angular App: Here, we will simply create new angular application using the bellow ng command.

Step 2: Create Environment File: Now you can see on your angular app there is a “environments” folder with default set following files. here we will add new environment file for “dev” as like bellow:

Step 3: Configure Environment Files: After creating environment file we need to configure in angular.json file. we will add dev environment, so let’s do it as following

Step 4: Use Environment Variable: now, we will just use our environment variable in our component and run app with local, dev and production configuration.

Step 5: Run App with Environment: Now, we will run our app using three environment with default, dev and production. you can run as bellow and see preview of output.

👁 Creative Commons
This work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.
  • Deploy on DigitalOcean

    Click below to sign up for DigitalOcean's virtual machines, Databases, and AIML products.

Become a contributor for community

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

DigitalOcean Documentation

Full documentation for every DigitalOcean product.

Resources for startups and AI-native businesses

The Wave has everything you need to know about building a business, from raising funding to marketing your product.

Get our newsletter

Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.

New accounts only. By submitting your email you agree to our Privacy Policy

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Start building today

From GPU-powered inference and Kubernetes to managed databases and storage, get everything you need to build, scale, and deploy intelligent applications.

© 2026 DigitalOcean, LLC.Sitemap.
Dark mode is coming soon.