DEV Community

Felipe Marques
Felipe Marques

Posted on

4 1

Angular: Environment

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.

Arquivos environment.ts e environment.prod.ts

environment.ts:



export const environment = {
  production: false
};


Enter fullscreen mode Exit fullscreen mode

environment.prod.ts



export const environment = {
  production: true
};


Enter fullscreen mode Exit fullscreen mode

Veja um exemplo de como usar o environment.



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

environment = environment;


Enter fullscreen mode Exit fullscreen mode


<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>


Enter fullscreen mode Exit fullscreen mode

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay