Com este artigo você será capaz de se tornar um “environmentalist”. Conseguindo levar a organização e configuração do seu projeto a outro nível.

Para continuar com este artigo sobre ambientes Angular, Angular environments, deduzimos que você tenha pelo menos conhecimentos básicos sobre Angular. Caso queira começar a aprender ou se lembrar de alguns conceitos, de uma olhada no tutorial oficial do Angular.

Oque faremos durante este artigo:

  1. Exploraremos os ambientes, ‘environments’, padrões do Angular CLI;
  2. Modificaremos as informações desses ambientes.
  3. Explicaremos como criar e configurar um novo ambiente.

O que é um ambiente em angular? Angular environments

Ambiente em uma aplicação Angular ou “Angular Application Environment” são informações de configuração JSON que dizem ao seu sistema quais arquivos usar quando você usa “ng build ”e ou “ng serve”, “PROD” ou “DEV”.

Digamos que você tenha uma API REST no seu back end que provê serviços a sua aplicação. Provavelmente você tem URL’s para o ambiente de desenvolvimento “DEV” e URL’s para usar em ambiente de produção “PROD”, ou até URL’s que você queira usar em um ambiente de “TESTE”. Usando os ambientes, “environments”, do angular, você poderá setar essas configurações e especificar cada qual usar dependendo do ambiente.

Este artigo foi escrito utilizando a versão do Angular 9 e pode ser usado em suas próximas versões. Estas configurações melhoram a facilidade de uso da sua aplicação e torna mais fácil a documentação. Caso queira, de uma olhada na documentação oficial sobre os ambiente de uma aplicação angular

Começando

Tenha certeza que você tem a versão 6+ do Angular CLI, mais especificamente a versão 9, que será a versão usada nesse artigo.
Vamos começar criando nosso projeto chamado ng-tutorial:

ng new ng-tutorial

Agora vamos acessar a pasta do projeto e servir a aplicação para checar se tudo está ok.

cd ng-tutorial
ng serve

Agora vá até o seu browser e entre em http://localhost:4200

Apresentando as configurações

Por padrão o Angular CLI cria a pasta de ambiente src/environments  contendo dois arquivos: environment.ts e environment.prod.ts

Esses arquivos são referenciados no arquivo angular.json. Dê uma olhada no arquivo e veja as ‘configurations’ apartir da linha 31:

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "budgets": [
    {
     "type": "initial", 
     "maximumWarning": "2mb",
     "maximumError": "5mb"
    },
    {
     "type": "anyComponentStyle",
     "maximumWarning": "6kb",
     "maximumError": "10kb"
    }
   ]
}
}

Atenção no fileReplacements. Ele quem diz para o ng build ou ng serve, “Caso eu use o ambiente de produção ‘PROD’, troque o conteúdo do environment.ts para o arquivo environment.prod.ts”

Simples exemplo de ambiente

Vamos testar um exemplo muito simples que mostra como trocar entre nossa configuração padrão de desenvolvimento e a configuração de produção. Com isso vamos mostrar alguns dados de configuração vindo de seu apropriado arquivo de ambiente, ‘environment’.

Modifique os arquivos src\app\app.component.html e src\app\app.component.ts para ficarem assim:

app.component.html

<h1>
  Environment
</h1>
<pre>{{env | json}}</pre>

app.component.ts

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 {
  env = environment;
}

Dentro do app.component.ts verifique as linhas 2 e 10:

//linha 2
import { environment } from '../environments/environment'; //linha 10 
env = environment;

Na linha 2 podemos ver que estamos importando o arquivo environment da pasta de ambientes, ‘environments’. Então setamos a variável env e com isso nosso template pode acessá-lo. Lembre-se nosso template HTML só pode acessar membros públicos do nosso componente, portanto o template não é capaz de enxergar o environment diretamente.

Então colocamos em nosso HTML um objeto de JSON cru ,“raw JSON’, como a seguir:

<pre>{{env | json}}</pre>

Pronto, agora é só servir novamente a aplicação usando o ng serve e abrir o link http://localhost:4200 no seu browser. Você deverá ver esta tela:

Perceba que o resultado vai de encontro com oque vemos em nosso arquivo de ambiente src\environments\environment.ts .

Agora vamos tentar usar o ambiente de produção (PROD). Para fazer isso devemos rodar ng serve usando a configuração de produção:

ng serve --configuration=production

Agora entre novamente no link http://localhost:4200 e ele irá mostrar o que está dentro do ambiente src\environments\environment.prod.ts .

Pelo fato de termos servido a aplicação como production, o Angular faz a troca dos conteúdos do arquivo environment.ts com o conteúdo do arquivo environment.prod.ts .

Modificando as informações de configuração

Olhe novamente no arquivo src\environment\environment.ts perceba que ele está exportando somente um objeto:

export const environment = {
  production: false
};

Vamos dar update nesse objeto environment e adicionar um nome. Lembre-se esse environment.ts é o do ambiente de desenvolvimento (DEV).

export const environment = {
  production: false,
  nome: 'default'
};

Agora servimos novamente a aplicação porém em modo de desenvolvimento padrão.

ng serve

Agora no seu browser em http://localhost:4200 podemos ver que foi atualizado o objeto e temos uma variável chamada nome.

Com isso agora podemos adicionar URL’s de serviços, flags, ou qualquer dado que nossa aplicação Angular precisar.

LEMBRE-SE: Todos dados que estão nos arquivos de ambiente “environment” são visíveis para os clientes

NUNCA coloque informações importantes como senhas, tokens ou chaves secretas nos seus arquivos de ambiente.

Adicionando ambientes

Você também pode criar seu próprio ambiente. Vamos criar um novo ambiente e testá-lo.

Crie um novo arquivo dentro de src\environments\ chamado environment.test.ts e coloque o seguinte conteúdo:

export const environment = {
  production: false,
  name: 'test'
};

Precisamos informar ao angular.json sobre nosso novo arquivo de ambiente. Perceba que no elemento de build existe um objeto de configuração, configurations. Com isso adicione um novo objeto para o nosso ambiente de teste, dizendo para substituir para o arquivo coreto, deixando assim:

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "budgets": [
    {
     "type": "initial", 
     "maximumWarning": "2mb",
     "maximumError": "5mb"
    },
    {
     "type": "anyComponentStyle",
     "maximumWarning": "6kb",
     "maximumError": "10kb"
    }
   ]
  },
   "teste": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.test.ts"
      }
    ]
  }
}

Agora este elemento só irá afetar o ng build. Para utilizarmos com o ng serve devemos fazer mais uma mudança.
Precisamos adicionar no elemento serve uma referência a nossa configuração de ambiente de teste.

Ficaria deste modo:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "ng-tutorial:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "ng-tutorial:build:production"
    },
    "teste": {
      "browserTarget": "ng-tutorial:build:teste"
    }
  }
},

Agora podemos servir nossa aplicação usando nosso ambiente de teste:

ng serve --configuration=teste

Ao abrir o seu browser e digitar http://localhost:4200, você deverá ver algo como mostrado na imagem abaixo.

Conclusão

Agora sabemos como podemos adicionar novos ambientes em nosso projeto ou até modificar os que já existem.

Use os ambientes de uma aplicação angular sempre que você precisar de um jeito conveniente de gerenciar informações de configuração de suas aplicações.