Como Criar Environments No Angular

Você já precisou testar sua aplicação em ambientes diferentes, com bases diferentes mas com o mesmo front, no Angular? Você poderia alterar a URL base para que sua aplicação conecte-se em outras bases, mas isso seria viável? Com isso, você poderia esquecer de voltar a variável e acabaria commitando ou cansaria de trocar a todo momento. Pensando nisso, porque não criar environments diferentes no Angular, um para cada tipo de base ou ambiente?

Criando um novo ambiente

Primeiramente, é necessário alterar seu arquivo angular.json, que fica dentro da raiz do seu projeto, adicionando algumas configurações do novo environment que você está configurando.
Dentro do seu JSON, procure por configurations e em cima de production:

Adicione um novo objeto, que é do nosso ambiente de DEV:

"dev": {
  "fileReplacements": [
	{
	  "replace": "src/environments/environment.prod.ts",
	  "with": "src/environments/environment.ts"
	}
  ],
  "optimization": false,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": false,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": false,
  "serviceWorker": true
},

Todas estas opções definidas como true ou false, são configurações de build do Angular, onde permite que seus arquivos sejam minificados, otimizados, etc. Neste link, há uma explicação mais detalhada sobre as opções de configurações de ambientes.

Feito isso, modifique a seção onde está o serve, adicionando uma nova configuração, apontando esse dev criado como um novo build:

"serve":
  "configurations": {
	"dev": {
	  "browserTarget": "projectName:build:dev"
	}
	// ... restante do código

Agora que está tudo certo, você está apto a rodar o comando para inicializar o server com o ambiente desejado! Para isto, basta rodar o comando: ng s -c dev ou ng s –configuration=dev