{"id":1968,"date":"2024-02-07T05:00:00","date_gmt":"2024-02-07T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1968"},"modified":"2024-02-06T11:38:31","modified_gmt":"2024-02-06T19:38:31","slug":"all-about-environment-variables-with-angular","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/all-about-environment-variables-with-angular\/","title":{"rendered":"All about environment variables with Angular"},"content":{"rendered":"\n

Angular apps created with the Angular CLI used to have automatic environment creation built-in for new projects. While this automation was removed in recent years to simplify the learning curve of Angular, it is still possible to add support for different environments using the command:<\/p>\n\n\n\n

ng generate environments<\/code><\/p>\n\n\n\n

Before we generate such environments, it’s important to take a look at angular.json<\/code> in the root folder of any Angular project, more specifically, the section called configurations<\/strong> in the build<\/strong> section:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

This tells us that our project has two different configurations: production<\/strong> and development<\/strong>, and the default config for the ng build<\/code> command is production<\/strong>.<\/p>\n\n\n\n

Note that the serve<\/strong> section of angular.json<\/code> has a similar config that extends the build targets and overrides the default configuration by making it development<\/strong>, which, as a result, is what we use when we run ng serve<\/code>:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

If we want to override the default configurations when running ng serve<\/code> or ng build<\/code>, we can do this by adding a configuration flag to the command and making it point to the proper configuration name, for instance:<\/p>\n\n\n\n

ng serve --configuration=production<\/code><\/p>\n\n\n\n

ng build --configuration=development<\/code><\/p>\n\n\n\n

<\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

How do we plug environment variables into this?<\/h3>\n\n\n\n

When we run ng generate environments<\/code>, the Angular CLI does two things:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

It creates two new files in src\/environments<\/code>: environments.ts<\/code> (the environment for production<\/strong>, which is also the default) and environment.development.ts<\/code> for development<\/strong>.<\/p>\n\n\n\n

angular.json<\/code> gets updated with the following highlighted syntax:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

As you can see, this instructs the builder to replace the production environment file with the development file when we use the --configuration=development<\/code> flag.<\/p>\n\n\n\n

Such environment files can contain any environment variables we want. For instance, say I want to define a SERVER_URL<\/code> that is different for production and development. I can do that:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Now, to use such environment variable in my code, all I need to do is import it as follows:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Important:<\/strong> The import has to be from \/environments\/environment<\/code>. Angular will pick the correct configuration based on the flag given to the build<\/code> or serve<\/code> command.<\/p>\n\n\n\n

How do you create environments for QA, pre-prod, and more?<\/h3>\n\n\n\n

Now that we know that angular.json is the file where all this magic happens, if we want to create a qa<\/strong> environment, we can head to the configurations <\/strong>section of build<\/strong>, add a new configuration block with the name q (or anything you want, of course), and make the file replacement to a new file that I call environment.qa.ts<\/code><\/strong>:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Then, I can create that environment file under src\/environments<\/code> and add any variables I need in it:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

And that’s it! We covered how to create environment variables for production<\/strong> and development and how to create other custom environments we might need.<\/p>\n","protected":false},"excerpt":{"rendered":"

Angular apps created with the Angular CLI used to have automatic environment creation built-in for new projects. While this automation was removed in recent years to simplify the learning curve of Angular, it is still possible to add support for different environments using the command: ng generate environments Before we generate such environments, it’s important […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,21],"tags":[],"class_list":["post-1968","post","type-post","status-publish","format-standard","hentry","category-angular","category-architecture"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1968"}],"version-history":[{"count":4,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1968\/revisions"}],"predecessor-version":[{"id":1982,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1968\/revisions\/1982"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}