-3

Preciso agora enviar para homolog o meu projeto, criado em Angular 6. Tenho um arquivo chamado app.constants e dentro uma classe chamada Configuration. Nessa classe "chumbei" a url da API para meus testes, tipo: http://localhost:4200. Bem, agora preciso não mais chumbar. O colega me falou para eu ler sobre Environment. Estou lendo, mais ainda não consegui abstrair o conceito. Esse é o caminho? Alguém tem alguma dica para dar?

2
  • 2
    Então "deschumbe"! Commented 3/08/2018 às 19:52
  • A URL vai ser informada pelo usuário ? No caso, configurada. Commented 3/08/2018 às 19:55

2 Respostas 2

0

Eu achei essa documentação aqui.

Basicamente, você pode declarar variáveis cujos valores se alteram com o ambiente, basta criar uma constante nos arquivos que definem esses ambientes, e referenciar essas constantes no código.

Isso é, no ambiente de desenvolvimento, você teria algo como

export const environment = {
  production: false,
  apiUrl: 'sua URL para desenvolvimento'
}

E então basta importar a constante e usar os valores dela onde precisar

import { environment } from 'caminho/para/environment';
// Indo para onde interessa
usandoVariavelEnvironment() { console.log(enviroment.apiUrl); }
0

O Environment serve para você definir suas variáveis que mudam entre desenvolvimento e produção

Funcionam de forma bem simples, são dois arquivos, environment.ts para desenvolvimento e environment.prod.ts para produção, neles você exporta um objeto que irá conter os dados, esses dois objetos devem ter as mesmas chaves porém com valores diferentes, por exemplo

environment.ts:

export const environment = {
  production: false,
  api: 'localhost:3000'
}

environment.prod.ts:

export const environment = {
  production: true,
  api: 'api.example.com'
}

Para usar basta importar o arquivo e usar as propriedades do objeto exportado:

import { Component } from '@angular/core';
//A url é essa, não coloque '.ts' ou '.prod.ts'
import { environment } from './../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    console.log(environment);
  }
}

Quando você estiver em ambiente de desenvolvimento (ng server) o Angular vai usar o arquivo environment.ts, com o build de produção (ng build --prod) ele usará o environment.prod.ts

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .