Angular: Environment

#angular #typescript

As variáveis de ambiente permitem que nós possamos incluir no nosso código condições, parâmetros e valores diferentes de acordo com nosso ambiente.

Imagine que você utilize uma API Rest de um serviço qualquer, seja ele criado internamente na empresa que você trabalha, seja ele de terceiros e que esse serviço ofereça um endpoint para homologação e outro para produção.

Uma abordagem inicial seria trocar os valores dessa api todas as vezes que quisermos publicar nossa aplicação em produção.

Uma abordagem muito mais elegante é configurar as variáveis de ambiente para que você não tenha que lembrar de trocar o conteúdo de nenhuma variável.

Aqui mostro como fazer isso utilizando o recurso de configuração de ambiente do Angular.

Projetos criados com Angular CLI possuem por padrão um arquivo de configuração chamado environment.ts disponível na pasta environments da sua aplicação.

environment.ts:



export const environment = {
  production: false
};

environment.prod.ts



export const environment = {
  production: true
};

Veja um exemplo de como usar o environment.



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

environment = environment;



<div class="row justify-content-center" *ngIf="!environment.production">    
    <div class="auth-box text-center">
        <div class="row">
            <div class="col-md-12">
                <button type="button" (click)="LimparTudo()" class="btn btn-danger btn-md btn-block waves-effect text-center m-b-20">Limpar Memória</button>
            </div>
        </div>
    </div>
</div>