Uso adecuado de environment.ts en mi aplicación angular4 con angular-cli

environment angular 6

Question

Uso Intellij Ultimate para codificar mi aplicación angular 4.

angular-cli.json un nuevo proyecto de Angular 4, contiene environment.ts y environment.prod.ts y los entornos están configurados correctamente en angular-cli.json .

¿Cómo lo importo en mi código? Desde que en realidad, cuando lo construyo, indico qué entorno usar. ¿Como funciona? ¿Necesito compilar algo con Intellij?

Intenté buscar en Google y encontré muchos ejemplos cuando las personas importaron un archivo environment.ts específico. Pero eso no es bueno, ¿verdad? Ya que utilizará el mismo archivo environment.ts incluso si compilo para un entorno diferente.

¿Qué debo hacer?

Answer 1

Aquí hay un muy buen artículo sobre archivos de entorno con cli angular: http://tattoocoder.com/angular-cli-using-the-environment-option/

En resumen, sí importó environment.ts pero se importará el archivo correcto dependiendo de qué entorno sea. Angi Cli se encargará de eso como se explica en el artículo.

Answer 2

Los entornos no me funcionaron con @angular/cli 1.2.4 , pero sí cargaron Ok con 1.3.2 , así que asegúrate de usar la última versión de la serie.

Answer 3

Tuve esta misma pregunta y encontré el mismo artículo que @Ahmed publicó. Sin embargo, eso no solucionó mi problema: acabo de recibir:

ERROR in XXX/src/app/app.component.ts (19,29): Cannot find module ''./environment''.

Estoy trabajando con una compilación creada a través de ng new , por lo que si está trabajando con el último cliente angular, es probable que tenga el mismo problema que tuve. Como @Ahmed afirma en su comentario sobre su respuesta, es importante que obtenga la ruta relativa correcta. La versión (actual) de ng cli pone su componente principal de la aplicación aquí:

projectFolder/app/src/app.component.ts

Y coloca el archivo de entorno aquí:

projectFolder/app/environments/environment.ts

Por lo tanto, la línea correcta para incluir el entorno desde su app.com es esta:

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

Pequeña "característica": environment.ts es en realidad el archivo de configuración del entorno para el entorno de desarrollo. Sin embargo, en el tiempo de ejecución (ya sea debido al comando ng build o al comando ng serve ), este archivo será reemplazado por cualquiera que sea el estado del entorno real. Entonces, aunque esté incluyendo explícitamente el archivo de entorno de desarrollo, en el tiempo de ejecución obtendrá las variables de entorno para cualquier entorno. Me parece extraño, pero funciona, y parece que así es como está diseñado para funcionar.

Answer 4

Tuve muchos problemas para que esto funcionara. Intenté seguir tantos tutoriales, simplemente no recogí nada fuera del entorno de desarrollo. Finalmente pude hacerlo funcionar con lo siguiente:

archivo .angular-cli.json

 ....
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.dev.ts",
"test": "environments/environment.test.ts",
"prod": "environments/environment.prod.ts"
}
....

Archivos de entorno, bajo ./src y la siguiente estructura de carpetas

./environments
|--environment.ts
|--environment.test.ts
|--environment.prod.ts
|--environment.dev.ts

archivo environment.ts:

 export const environment = {
production: false,
apiBase: ''http://dev-server:4200/app/'',
env: ''dev''
};

archivo environment.test.ts

 export const environment = {
production: false,
apiBase: ''http://test-server:2080/app/'',
env: ''test''
};

archivo environment.prod.ts

 export const environment = {
production: true,
apiBase: ''http://prod-server:2080/app/'',
env: ''prod''
};

** No cree otro archivo environment.ts bajo src.

app.module.ts o cualquier otro componente en el que desee utilizar las propiedades del entorno. Recuerde importar el entorno desde la carpeta ../environments. Cometí un error al seguir un tutorial y crear environment.ts en la carpeta src que no me funcionó.

import { environment } from ''../environments/environment'';
export class AppModule {
constructor() {
console.log(''Base Api :'' + environment.apiBase +
'' production? '' + environment.production +
'' env: '' + environment.env);
}
}

Espero que esto ayude.

Por cierto, lo hice con Angular 5.