Configurando Múltiplos Ambientes no Angular

Atenção: Este artigo foi escrito em Junho de 2025, o projeto apresentado abaixo foi construído na versão 19 do Angular.

O artigo apresenta uma ideia geral de como é possível configurar múltiplos ambientes no Angular dinamicamente.

A estratégia utilizada tem como objetivo eliminar o esforço manual de alterar o ambiente e a URL. Com isso, também evitamos erros humanos ao realizar edições no arquivo de environment.

Criando um novo projeto

Considerando que o Angular CLI está instalado globalmente, vamos criar um novo projeto rodando o comando:

ng new my-project

Configurando o Environment

Para criar o arquivo de environment, vamos rodar o seguinte comando dentro da pasta do projeto criado:

ng generate environments

O resultado será essa estrutura:

my-project/src/environments
└── environment.ts

Para configurar múltiplos ambientes, vamos considerar aqui development, staging e production, podemos copiar o arquivo environment.ts e renomear. A estrutura esperada será essa:

my-project/src/environments
└── environment.ts
└── environment.development.ts
└── environment.staging.ts

Onde:

• environment.ts representa o ambiente de produção
• environment.development.ts representa o ambiente de desenvolvimento
• environment.staging.ts representa o ambiente de homologação

Configuração de cada arquivo de environment

environment.ts

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

environment.staging.ts

export const environment = {
  production: false,
  apiUrl: 'http://staging.example.com',
};

environment.development.ts

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

Configurando o package.json

Para conseguir rodar o build de cada ambiente e também rodar o projeto em diferentes ambientes localmente, precisamos adicionar os scripts dentro do package.json.

{
  "name": "my-project",
  "version": "0.0.0",
  "scripts": {
    "start:dev": "ng serve --configuration=development",
    "start:prod": "ng serve --configuration=production",
    "start:staging": "ng serve --configuration=staging",
    "build:dev": "ng build --configuration=development",
    "build:staging": "ng build --configuration=staging",
    "build:prod": "ng build --configuration=production"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}

Configurando o angular.json

No angular.json é preciso, dentro do configurations que está dentro do architect , definir o fileReplacements de cada ambiente.

O fileReplacements permite que, ao realizar o build, o arquivo padrão de environment.ts seja automaticamente substituído pelo arquivo de ambiente informado.

No nosso exemplo, temos os ambientes de development, staging e production. Então, o configurations ficaria assim:

"configurations": {
 "development": {
     "fileReplacements": [
         {
           "replace": "src/environments/environment.ts",
           "with": "src/environments/environment.development.ts"
         }
      ],
  },
  "staging": {
     "fileReplacements": [
         {
           "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.staging.ts"
         }
     ]
   },
},

Atenção: Como o arquivo environment.ts, representa o ambiente de produção e ele é o arquivo padrão, não precisamos substituir ele por nenhum arquivo.

Configurando o serve

Adicionalmente, dentro do arquivo angular.json podemos configurar dentro do configurations do serve o buildTarget, que permite rodar o ambiente de homologação e produção localmente utilizando os comandos definidos no package.json previamente.

O serve após configurar o buildTarget, deve ficar desse jeito:

"serve": {
  "configurations": {
     "production": {
          "buildTarget": "my-project:build:production"
      },
      "staging": {
           "buildTarget": "my-project:build:staging"
       },
      "development": {
           "buildTarget": "my-project:build:development"
       }
   },
      "defaultConfiguration": "development"
},

Configurando o componente para visualizar o ambiente

Para visualizar qual ambiente está sendo utilizado, no arquivo app.component.ts, podemos importar o environment:

import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  apiUrl = environment.apiUrl;
}

No template, podemos adicionar um título e um parágrafo:

<main>
  <section>
    <h1>Angular environment</h1>
    <p>Api URL: {{ apiUrl }}</p>
  </section>
</main>

Rodando o projeto em diferentes ambientes

Para rodar o projeto nos ambientes de desenvolvimento, staging ou produção, rodamos os seguintes comandos:

Ambiente de development:

npm run start:dev

Ambiente de staging:

npm run start:staging

Ambiente de production:

npm run start:production

Conhecimento adicional

É possível integrar os arquivos de ambiente com CI/CD, como o GitHub Actions, por exemplo.

Como conhecimento extra, vale a pena pesquisar e entender como configurar um workflow que, com base nas branches do repositório, define automaticamente o ambiente que deve ser utilizado :)