Entendendo as variáveis de ambiente em projetos Angular

No desenvolvimento de aplicações modernas, a configuração de ambientes distintos como desenvolvimento, teste e produção é essencial. Especificamente em projetos Angular, o uso eficaz de variáveis de ambiente pode simplificar a gestão de configurações entre esses ambientes, melhorando a manutenibilidade e segurança do código.

Arquivos de configurações normalmente não são versionados e também são os únicos arquivos na aplicação que contém informações a serem ajustadas em diferentes tipos de servidor. É importante adotar essa forma de trabalho, assim o seu projeto não terá que ter diferentes arquivos e linhas sendo modificadas em diferentes ambientes.

Vamos criar um novo arquivo de configuração de variáveis de ambiente no Angular, para isso, rode o comando abaixo na raiz do seu projeto.

ng generate environments

Agora você verá uma nova pasta dentro de src\environments, nela contém dois arquivos, sendo eles:

• environment.development.ts - Arquivo para o ambiente de desenvolvimento;
• environment.ts - Arquivo para o ambiente de produção.

Além desses dois, você pode criar quantos outros arquivos achar necessário. Dentro desses arquivos você encontra uma constante chamada environment que está sendo exportada.

Adicione suas configurações através do clássico objeto literal do Javascript, conforme mostra o código abaixo.

export const environment = {
  production: true,
  key : ‘ABCDE123’
}

Consumindo variáveis de ambiente no Angular

Para consumir as variáveis de ambiente dentro do seu projeto, o processo é bem simples, basta importá-lo e pronto, apenas isso. Veja um exemplo abaixo consumindo a chave production do nosso arquivo.

import { environment } from '../environments/environment';

export class HeaderComponent {
  production = environment.production
}

Gerenciamento de Build e Substituições de Arquivos

O arquivo angular.json permite configurar substituição de arquivos específicos para cada ambiente usando a seção fileReplacements. Essa funcionalidade é crucial para garantir que o código correto seja usado no ambiente correto sem a necessidade de intervenção manual no código fonte.

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