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 Respostas
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); }
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