This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 15k traffic Daily!!!

How to configure and use environment specific values in Angular




Configuring utility environments

First outline totally different surroundings recordsdata for the environments you might need beneath the mission’s src/environments/ folder. Under there may be an extract from surroundings.ts (used for growth) and surroundings.prod.ts used for manufacturing:

//surroundings.ts
export const surroundings = {
  manufacturing: false,
  HOST: 'http://localhost:4200',
  API_URL: 'http://localhost:3000/api',
};

//surroundings.prod.ts
export const surroundings = {
  manufacturing: true,
  HOST: 'https://www.codever.land',
  API_URL:  'https://www.codever.land/api',
};
Enter fullscreen mode

Exit fullscreen mode

The construct command (and ng serve) makes use of surroundings.ts because the construct goal when no surroundings is specified.

The primary CLI configuration file, angular.json, accommodates a fileReplacements part within the configuration for every construct goal, which helps you to exchange any file within the TypeScript program with a target-specific model of that file. That is helpful for together with target-specific code or variables in a construct that targets a particular surroundings, akin to manufacturing or staging.

By default, no recordsdata are changed. You may add file replacements for particular construct targets. For instance

"configurations": {
  "manufacturing": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    
Enter fullscreen mode

Exit fullscreen mode

Which means while you construct your manufacturing configuration with ng construct --configuration manufacturing, the src/environments/surroundings.ts file is changed with the target-specific model of the file, src/environments/surroundings.prod.ts.

You may add further configurations (e.g. professional totally different levels) as required.



Utilizing environment-specific variables in your app

Then in your code import surroundings and use the values outlined within the recordsdata above, as within the following instance:

import { surroundings } from '../../../environments/surroundings'
import { localStorageKeys } from '../mannequin/localstorage.cache-keys';

@Injectable()
export class SystemService {
  cachedQueries = {
    PUBLIC_TAGS_LIST: `${surroundings.API_URL}/public/bookmarks`
  }

 //...
}
Enter fullscreen mode

Exit fullscreen mode

If you wish to use surroundings variables in your angular html template, then simply outline an area variable for the imported surroundings and use it within the template, like within the following instance:

import { surroundings } from 'environments/surroundings';

@Part({
  selector: 'app-social-share-dialog',
  templateUrl: './social-share-dialog.part.html',
  styleUrls: ['./social-share-dialog.component.scss'],
  suppliers: [DatePipe]
})
export class SocialShareDialogComponent implements OnInit {

  sharableId$: Observable<any>;
  readonly surroundings = surroundings;
  //...
}
Enter fullscreen mode

Exit fullscreen mode

The html half, the place HOST worth is used:

    <div>
      <h3>Shareable</h3>
      { async).shareableId}
    </div>
Enter fullscreen mode

Exit fullscreen mode


Reference –

https://angular.io/guide/build#using-environment-specific-variables-in-your-app


Shared with ❤️ from Codever. Use 👉 copy to mine performance so as to add it to your private snippets assortment.

Codever is open supply on Github⭐🙏

The Article was Inspired from tech community site.
Contact us if this is inspired from your article and we will give you credit for it for serving the community.

This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 10k Tech related traffic daily !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?