![]() |
VOOZH | about |
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.
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.
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.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.