How to use environment variables to configure your Angular application without a rebuild
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e initial commit Aug 14, 2018
src feat(AppComponent): add instructions Aug 14, 2018
.editorconfig initial commit Aug 14, 2018
.gitignore initial commit Aug 14, 2018
README.md feat(README): update documentation Aug 14, 2018
angular.json feat(angular-cli): add env.js as asset in angular.json Aug 14, 2018
package-lock.json initial commit Aug 14, 2018
package.json initial commit Aug 14, 2018
tsconfig.json initial commit Aug 14, 2018
tslint.json initial commit Aug 14, 2018

README.md

Angular Environment Variables Demo

This project contains a working demo of How to use environment variables to configure your Angular application without a rebuild.

If you have the ability to rebuild your application for use in different environments, the built-in Angular CLI application environments are perfect for storing configuration details.

However, if your application needs to be deployed with a different configuration in different environments without having the ability to rebuild it, this mechanism may be just what you are looking for.

To get a better understanding of the inner workings, make sure to read the article.

Instructions

  1. Run ng build --prod to build the project. The build artifacts (including env.js) will be stored in the dist/ directory.
  2. Serve the contents of the dist directory using a static web server like serve.
  3. Edit env.js in your dist directory to control the environment variables within your Angular application without the need for a rebuild.

As soon as you refresh your browser, the new environment variables are picked up:

Angular Environment Variables Demo

More info

For more information, check out the How to use environment variables to configure your Angular application without a rebuild.