How to set environment via `ng serve` in Angular 6

ONLINECAST

3 min read

·

06-10-2024

11

0

Share

Setting Environment Variables in Angular 6 with ng serve

Developing and deploying an Angular application often requires different configurations for various environments, such as development, testing, and production. This article will guide you through the process of setting environment variables specifically for development using the ng serve command in Angular 6.

The Problem: Handling Environment-Specific Values

Imagine you have an Angular application that needs to connect to different API endpoints based on the environment. You wouldn't want to hardcode these URLs directly into your code, as this would require manual changes every time you switch environments. Instead, you need a way to dynamically define these values during development and deployment.

Understanding Environment Files

Angular provides a mechanism to manage environment-specific configurations through environment files. These files allow you to define variables that are specific to each environment and are loaded into your application during runtime.

Here's how you can use them:

1. Create Environment Files: Inside your Angular project's src/environments folder, create two files:

   • environment.ts: This file will contain the default configuration for your development environment.
   • environment.prod.ts: This file will contain the configuration for your production environment.

2. Define Environment Variables: In each file, create an object named environment and define your environment variables. For example:

   environment.ts:

   export const environment = {
     production: false,
     apiUrl: 'http://localhost:3000/api'
   };
   

   environment.prod.ts:

   export const environment = {
     production: true,
     apiUrl: 'https://your-production-api.com/api'
   };
   

3. Load Environment Files: In your main.ts file, import the appropriate environment file based on the desired environment. You can achieve this using the environment.ts file, which will load the correct environment file based on the NODE_ENV variable:

   import { enableProdMode } from '@angular/core';
   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   
   import { AppModule } from './app/app.module';
   import { environment } from './environments/environment';
   
   if (environment.production) {
     enableProdMode();
   }
   
   platformBrowserDynamic().bootstrapModule(AppModule)
     .catch(err => console.error(err));
   

4. Accessing Environment Variables: Within your Angular components and services, you can access the defined environment variables using the environment object. For example:

   import { Component } from '@angular/core';
   import { environment } from '../environments/environment';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     apiUrl = environment.apiUrl;
   }
   

Using ng serve to Set Environment Variables

To define the environment during development using ng serve, you can utilize the --configuration flag:

ng serve --configuration=production

This command will load the environment.prod.ts file, setting the environment to production.

Alternative: NODE_ENV Environment Variable

You can also use the standard NODE_ENV environment variable to control which environment file is loaded. To do this, you'll need to modify your main.ts file to dynamically load the environment based on the value of NODE_ENV.

// main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

let environment = require('./environments/environment'); // default environment

if (process.env.NODE_ENV === 'production') {
  environment = require('./environments/environment.prod');
}

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Now, by setting the NODE_ENV variable, you can control which environment is used:

# Development Environment
NODE_ENV=development ng serve 

# Production Environment
NODE_ENV=production ng serve 

Further Optimizations

For larger projects, you may want to consider utilizing tools like Angular CLI's build profiles or the dotenv package to manage environment variables more effectively. These tools can help you organize and maintain environment settings, particularly when working with multiple environments or sensitive data.

Summary

By leveraging environment files and the ng serve command, you can easily define environment variables and configure your Angular application for different development and production scenarios. This approach ensures a seamless development experience and helps manage environment-specific configurations effectively.