Uso Intellij Ultimate para codificar mi aplicación angular 4.
Creé un nuevo proyecto 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? Ya que en realidad, cuando lo construyo, declaro qué entorno usar. ¿Como funciona? ¿Necesito compilar algo con Intellij?
Intenté buscar en Google y encontré muchos ejemplos en los que las personas realmente importaron un archivo environment.ts específico. pero eso no es bueno, ¿verdad? Dado que utilizará el mismo archivo environment.ts incluso si construyo para un entorno diferente.
¿Qué debo hacer?
Aquí hay un muy buen artículo sobre archivos de entorno con angular cli: http://tattoocoder.com/angular-cli-using-the-environment-option/
En resumen, importas environment.ts pero se importará el archivo correcto según el entorno en el que se encuentre. angular cli se encargará de eso como se explica en el artículo.
Tuve muchos problemas para hacer que esto funcionara. Intenté seguir tantos tutoriales, ng serve simplemente no detectó 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.tsArchivo 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 en 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í el error de seguir un tutorial y crear environment.ts en la carpeta src que no funcionó para mí.
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, hice esto con Angular 5.
Tenía esta misma pregunta y encontré el mismo artículo que publicó @Ahmed. 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 yo. Como dice @Ahmed en su comentario sobre su respuesta, es importante que obtenga la ruta relativa correcta. La versión (actual) de ng cli pone el componente principal de su aplicación aquí:
projectFolder/app/src/app.component.tsY coloca el archivo de entorno aquí:
projectFolder/app/environments/environment.tsPor lo tanto, la línea correcta para incluir el entorno desde dentro de su aplicación.componente 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 tiempo de ejecución (ya sea debido al comando ng build o al comando ng serve ), este archivo será reemplazado por lo que sea que indique el entorno real. Entonces, aunque esté incluyendo explícitamente el archivo del entorno de desarrollo, en tiempo de ejecución obtendrá las variables de entorno para cualquiera que sea su entorno. Me parece extraño, pero funciona, y parece que así es como está diseñado para funcionar.