{"id":17366793,"url":"https://github.com/ekrem-kocak/nx-angular-environment","last_synced_at":"2026-04-29T08:32:29.507Z","repository":{"id":256246316,"uuid":"854140098","full_name":"ekrem-kocak/nx-angular-environment","owner":"ekrem-kocak","description":"Nx 19 \u0026 Angular 18 Environment Variable Management","archived":false,"fork":false,"pushed_at":"2024-09-09T16:51:42.000Z","size":193,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-01T21:14:14.264Z","etag":null,"topics":["angular","environment","environment-variables","nx-workspace"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/~/github.com/ekrem-kocak/nx-angular-environment","language":"TypeScript","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/ekrem-kocak.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":"2024-09-08T13:37:46.000Z","updated_at":"2024-09-09T16:51:47.000Z","dependencies_parsed_at":"2024-09-09T20:48:46.882Z","dependency_job_id":"596c7c23-d9c7-4438-a44c-bc0edb25b095","html_url":"https://github.com/ekrem-kocak/nx-angular-environment","commit_stats":null,"previous_names":["ekrem-kocak/nx-angular-environment"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ekrem-kocak%2Fnx-angular-environment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ekrem-kocak%2Fnx-angular-environment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ekrem-kocak%2Fnx-angular-environment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ekrem-kocak%2Fnx-angular-environment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ekrem-kocak","download_url":"https://codeload.github.com/ekrem-kocak/nx-angular-environment/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245898334,"owners_count":20690466,"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","environment-variables","nx-workspace"],"created_at":"2024-10-15T22:04:58.111Z","updated_at":"2026-04-29T08:32:29.434Z","avatar_url":"https://github.com/ekrem-kocak.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nx 19 \u0026 Angular 18 Environment Variable Management\n\nThis project demonstrates how to manage environment variables using Nx 19 and Angular 18. Follow the steps below to set up and configure environment variables for different environments (e.g., development and production).\n\n## Table of Contents\n\n- [Creating an Nx Workspace](#creating-an-nx-workspace)\n- [Creating Environment Files](#creating-environment-files)\n- [Creating an Injection Token](#creating-an-injection-token)\n- [Providing the Injection Token in App Config](#providing-the-injection-token-in-app-config)\n- [Applying File Replacement for Different Environments](#applying-file-replacement-for-different-environments)\n- [Accessing the Environment Variable in the Application](#accessing-the-environment-variable-in-the-application)\n- [Running the Application](#running-the-application)\n\n## Creating an Nx Workspace\n\nTo create an Nx workspace, run the following command and follow the interactive setup wizard. Choose Angular when prompted to set up an Angular project within the workspace.\n\n```bash\nnpx create-nx-workspace my-workspace\n```\n\n## Creating Environment Files\n\nAfter setting up your project, create the `src/environments` folder and add the environment files.\n\n**`environment.ts`**\n\n```typescript\nimport { EnvironmentModel } from './environment.model';\n\nexport const environment: EnvironmentModel = {\n  apiUrl: 'local',\n};\n```\n\n**`environment.prod.ts`**\n\n```typescript\nimport { EnvironmentModel } from './environment.model';\n\nexport const environment: EnvironmentModel = {\n  apiUrl: 'prod',\n};\n```\n\n## Creating an Injection Token\n\nCreate an Injection Token to access the environment variables throughout the application.\n\n```typescript\nimport { InjectionToken } from '@angular/core';\nimport { EnvironmentModel } from './environment.model';\n\nexport const APP_CONFIG = new InjectionToken\u003cEnvironmentModel\u003e(\n  'Application config'\n);\n```\n\n## Providing the Injection Token in App Config\n\nProvide the Injection Token in the `app.config.ts` file.\n\n```typescript\nimport { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { provideRouter } from '@angular/router';\nimport { appRoutes } from './app.routes';\nimport { environment } from 'src/environments/environment';\nimport { APP_CONFIG } from 'src/environments/app-config.token';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    provideRouter(appRoutes),\n    { provide: APP_CONFIG, useValue: environment },\n  ],\n};\n```\n\n## Applying File Replacement for Different Environments\n\nConfigure `fileReplacements` in the `angular.json` or Nx configuration file to replace environment files based on the build configuration.\n\n```json\n{\n  \"name\": \"my-project\",\n  \"targets\": {\n    \"build\": {\n      \"executor\": \"@angular-devkit/build-angular:application\",\n      \"options\": {\n        \"outputPath\": \"dist/my-project\"\n      },\n      \"configurations\": {\n        \"production\": {\n          \"fileReplacements\": [\n            {\n              \"replace\": \"src/environments/environment.ts\",\n              \"with\": \"src/environments/environment.prod.ts\"\n            }\n          ]\n        }\n      }\n    }\n  }\n}\n```\n\n## Accessing the Environment Variable in the Application\n\nAccess the environment variable within your application using the Injection Token.\n\n```typescript\nimport { Component, inject } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { APP_CONFIG } from 'src/environments/app-config.token';\n\n@Component({\n  standalone: true,\n  imports: [RouterModule],\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n})\nexport class AppComponent {\n  private readonly appConfig = inject(APP_CONFIG);\n\n  /** consturctor injection */\n  // constructor(@Inject(APP_CONFIG) appConfig: EnvironmentModel) {}\n  constructor() {\n    console.log(this.appConfig.apiUrl); // Outputs 'local' in development and 'prod' in production\n  }\n}\n```\n\n## Running the Application\n\nUse the following command to run the project in development mode:\n\n```bash\nnx serve\n```\n\nTo run the project in production mode, use:\n\n```bash\nnx serve --c=production\n```\n\n---\n\nThis project demonstrates how to effectively manage environment variables in an Nx workspace with Angular. By following these steps, you can easily configure your application for different environments.\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fekrem-kocak%2Fnx-angular-environment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fekrem-kocak%2Fnx-angular-environment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fekrem-kocak%2Fnx-angular-environment/lists"}