123ArticleOnline Logo
Welcome to 123ArticleOnline.com!
ALL >> Technology,-Gadget-and-Science >> View Article

How To Have Various Environments With Angular Cli Future (angular 7)

Profile Picture
By Author: Sagar rollins
Total Articles: 2
Comment this article
Facebook ShareTwitter ShareGoogle+ ShareTwitter Share

As a result of this, we would need builds of different configurations: Different server URLs, different constants, different logging options, etc.

Angular CLI offers an environment feature that allows running builds targeted at specific environments for specific requirements. For instance, here is how you would run a build for production:

ng build — env=prod // up to Angular 5

Update: With Angular 6 and Above, the command is now:

ng build — configuration=production // new versions

The prod flag in the above code refers to the prod (production in v6 and above) property of the environments section of .angular-cli.json before v6:(now angular.json in v6 and above), which has two options by default: dev and prod

“environments”: {
“dev”: “environments/environment.ts”,
“prod”: “environments/environment.prod.ts”

You can add as many environments as you need here and name them accordingly. For instance, if you need a assesment build option, just add the following entry in .angular-cli.json:

“environments”: {
“dev”: “environments/environment.ts”,
... “prod”: “environments/environment.prod.ts”,
“qa”: “environments/environment.qa.ts”

For v6 and above, angular.json environments are now called configurations. Here is how to add a new qa environment after v6:

“configurations”: {
“production”: { … },
“qa”: {
“file replacements”: [
“replace”: “src/environments/environment.ts”,
“with”: “src/environments/environment.qa.ts”

Then you have to create the actual file environment.qa.ts in the environments directory.

Here is what the default environment.ts file for dev looks like:

// The file contents for the current environment will overwrite these during build.
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
// `ng build — env=prod` then `environment.prod.ts` will be used instead.
// The list of which env maps to which file can be found in `.angular-cli.json`.
export const environment = {
production: false

The above environment object is where you would add any environment specific property. For instance, let’s add a server URL:

export const environment = {
production: false,
serverUrl: “http://dev.server.companyName.com"

Then all you have to do to provide a different URL for QA is to define that same property with the right value in environment.qa.ts:

export const environment = {
production: false,
serverUrl: “http://qa.server.companyName.com"

Now that your environments are defined, how do you use those properties in your code? Easy enough, all you have to do is import the environment objects as follows:

import {environment} from ‘../../environments/environment’;
export class AuthService { API_URL: string = environment.server Url + ‘/theUrlForAPI’ ;

Then when you run a build for QA, Angular CLI is going to use environment.qa.ts to read the environment.server Url property value and you’re all set to deploy that build to the QA environment.

My Name is Prateek Pandey. I am a Developer, as well as consultant, and trainer for Angular where I help web developers learn and ease the stuff.

For more information click here -: https://letsmobility.com/

Total Views: 174Word Count: 415See All articles From Author

Add Comment

Technology, Gadget and Science Articles

1. Are Initial Exchange Offerings The New Frontier Of Token?
Author: Elizebeth Emily

2. The Benefits Of Using A Petrol Pump Management System
Author: Sandhya

3. Money Splitting Is Easier Now: The 5 Ultimate Cost-splitting Apps
Author: goodcoders

4. How To Pick The Best Analytics Tools: Product Analytics Landscape
Author: goodcoders

5. How To Implement Analytics In Your Mobile App?
Author: goodcoders

6. The Future Of Advertising In Delhi Ncr: Infonics Leads With Premier Led Solutions
Author: Infonics

7. Marketing Tips For It Service Businesses
Author: joygomez

8. Streamline Your Business Operations With Cloud Erp Software
Author: nagaraj

9. Discover 7 Essential Features Of Canon's Latest Vlog-ready Camera, The Eos R50
Author: adlerconway

10. How Does E-commerce Website Design Help Your Business Grow?
Author: Liam Mackie

11. Is Your Phone Broken? You Might Need Mobile Phone Repairs
Author: Charlie Wollstonecraft

12. 10 Tips For Negotiating The Best Deals On B2b Platforms For It Products
Author: Tina Tiwari

13. Unlocking Value: Navigating The Dynamics Of Two-sided Marketplaces
Author: Bitcot

14. What Do You Think Of Oracle Fusion Hcm?
Author: Rapidflow Inc

15. What Is The Difference Between Oracle Dba And Erp Support (sap)?
Author: Rapidflow Inc

Login To Account
Login Email:
Forgot Password?
New User?
Sign Up Newsletter
Email Address: