{"id":22903510,"url":"https://github.com/sawyerbutton/environement-in-angular","last_synced_at":"2025-04-01T07:23:42.303Z","repository":{"id":120749148,"uuid":"149887364","full_name":"sawyerbutton/environement-in-angular","owner":"sawyerbutton","description":"environment variable in angular / 环境变量在angular中的应用","archived":false,"fork":false,"pushed_at":"2018-09-22T15:48:38.000Z","size":1,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-07T04:41:04.657Z","etag":null,"topics":["angular","environment-variables"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sawyerbutton.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-22T15:02:02.000Z","updated_at":"2018-09-22T15:52:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"299d6539-cfa0-4b69-aa72-c4f92a2de6aa","html_url":"https://github.com/sawyerbutton/environement-in-angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2Fenvironement-in-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2Fenvironement-in-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2Fenvironement-in-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2Fenvironement-in-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sawyerbutton","download_url":"https://codeload.github.com/sawyerbutton/environement-in-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246599011,"owners_count":20803123,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","environment-variables"],"created_at":"2024-12-14T02:37:32.391Z","updated_at":"2025-04-01T07:23:42.291Z","avatar_url":"https://github.com/sawyerbutton.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# environement-in-angular\n\n## 环境变量在Angular中的应用\n\n\u003e If you are building a normal web app which need a backend server such as express/apache, using restful API is common.\n\n\u003e But you will want to use your test personal api  during development and then your real api in production. It’s easy to do in Angular using the `environment.ts` file.\n\n\u003e Angular CLI projects already use a production environment variable to enable production mode when in the production environment, which is showing in main.ts\n\n```js\n// ...\n// this will enable prod environment\nif (environment.production) {\n  enableProdMode();\n}\n// ...\n```\n\n\u003e And you’ll also notice that by default in the `/src/environment` folder you have an environment file for development and one for production.\n\n\u003e let's say we want to use different api address depending if we are in devlopment or production mode.\n\n### environment.ts\n\n```js\n// localhost:3000 is common port for node server\nexport const environment = {\n  production: false,\n  ipAddress: localhost:3000\n};\n```\n\n### environment.prod.ts\n\n```js\n// ipaddress maybe the real address for your web-app\nexport const environment = {\n  production: true,\n  ipAddress: 100.100.100\n};\n```\n\n## how to use environment variable in your component\n\n\u003e All you have to do to use environment in your comoponent is quiet straight and folliwing:\n\n```js\nimport { Component } from '@angular/core';\nimport { environment } from '../environments/environment';\n\n@Component({ ... })\nexport class AppComponent {\n  animal: string = environment.animal;\n}\n```\n\n\u003e Even though it looks like the environment variable extract from environment file in environments folder.\n\n\u003e But actually Angular takes care of `swapping the environment file` for the correct one.\n\n\u003e Now in development mode the ipAddress variable resolves to `localhost:3000` and in production, if you run `ng build --prod`(also can be `ng build` directly) for example, ipAddress resolves 100.100.100.\n\n## Detecting Development Mode With isDevMode() function\n\n\u003e Just in case, Angular also provides developers  with an utility function called `isDevMode` that makes it easy to check if the app in running in dev mode:\n\n```js\nimport { Component, OnInit, isDevMode } from '@angular/core';\n\n@Component({ ... })\nexport class AppComponent implements OnInit {\n  ngOnInit() {\n    if (isDevMode()) {\n      console.log('Development mode');\n    } else {\n      console.log('Production mode');\n    }\n  }\n}\n```\n\n## Adding a new environment\n\n\u003e It’s easy to add new environments in Angular CLI projects by adding new entries to the `configurations` field in the `angular.json` file(with customized properties). Let’s add a new environment for example:\n\n```json\n//...\n\"configurations\": {\n            \"production\": {\n              \"fileReplacements\": [\n                {\n                  \"replace\": \"src/environments/environment.ts\",\n                  \"with\": \"src/environments/environment.prod.ts\"\n                }\n              ],\n              \"optimization\": true,\n              \"outputHashing\": \"all\",\n              \"sourceMap\": false,\n              \"extractCss\": true,\n              \"namedChunks\": false,\n              \"aot\": true,\n              \"extractLicenses\": true,\n              \"vendorChunk\": false,\n              \"buildOptimizer\": true\n            },\n            \"testEnvironment\": {\n                \"fileReplacements\": [\n                    {\n                        \"replace\": \"src/environments/environment.ts\",\n                        \"with\": \"src/environments/environment.test.ts\"\n                    }\n                ],\n                \"optimization\": true,\n                \"outputHashing\": \"all\",\n                \"sourceMap\": false,\n                \"extractCss\": true,\n                \"namedChunks\": false,\n                \"aot\": true,\n                \"extractLicenses\": true,\n                \"vendorChunk\": false,\n                \"buildOptimizer\": true\n            }\n          }\n//...\n```\n\n\u003e And now we can add a test environment file in environment folder and suddenly use another ipAddress if we build the project with `ng build --env=testEnvironment`:\n\n### environment.testEnvironment.ts\n\n```js\nexport const environment = {\n  production: true,\n  ipAddress: 111.111.111\n};\n```\n\n\u003e But usually, you do not need to create a new environment file in you project exclude those specific situations.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsawyerbutton%2Fenvironement-in-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsawyerbutton%2Fenvironement-in-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsawyerbutton%2Fenvironement-in-angular/lists"}