navigationend - router events subscribe angular 4

Cómo configurar el entorno a través de `ng serve` en Angular 6

Question

Estoy tratando de actualizar mi aplicación Angular 5.2 a Angular 6. Seguí con éxito las instrucciones en la guía de actualización Angular (incluida la actualización de angular-cli a v6), y ahora estoy tratando de servir la aplicación a través de

ng serve --env=local

Pero esto me da error:

Opción desconocida: ''--env''

Utilizo múltiples entornos ( dev/local/prod ), y esta es la forma en que funcionaba en Angular 5.2. ¿Cómo puedo configurar el entorno ahora en Angular 6?

Answer 1

Angular ya no es compatible con --env en su lugar, tiene que usar

ng serve --c dev

para el entorno de desarrollo y,

ng serve --c prod

para la producción. Espero que esto ayude.

Answer 2

Debe usar la nueva opción de configuration (esto también funciona para ng build y ng serve )

ng serve --configuration=local

o

ng serve -c local

Si observa su archivo angular.json , verá que tiene un control más angular.json sobre la configuración de cada configuración (aot, optimizador, archivos de entorno, ...)

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

Puede obtener más información here para administrar configuraciones específicas del entorno.

Como se señala en la otra respuesta a continuación, si necesita agregar un nuevo ''entorno'', debe agregar una nueva configuración a la tarea de compilación y, según sus necesidades, también a las tareas de servicio y prueba .

Añadiendo un nuevo entorno.

Edición : para que quede claro, los reemplazos de archivos se deben especificar en la sección de build . Entonces, si desea usar ng serve con un archivo de environment específico (por ejemplo, dev2 ), primero debe modificar la sección de build para agregar una nueva configuración de dev2

"build": {
"configurations": {
"dev2": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev2.ts"
}
/* You can add all other options here, such as aot, optimization, ... */
],
"serviceWorker": true
},

Luego, modifique la sección de serve para agregar también una nueva configuración, apuntando a la configuración de build dev2 que acaba de declarar

"serve":
"configurations": {
"dev2": {
"browserTarget": "projectName:build:dev2"
}

Luego puede usar ng serve -c dev2 , que usará el archivo de configuración dev2

Answer 3

Para Angular 2 - 5 consulte el artículo Entorno múltiple en angular

Para Angular 6 use ng serve --configuration=dev

Nota: Consulte el mismo artículo para angular 6 también. Pero donde sea que encuentre --env en su lugar use --configuration . Eso funciona bien para angular 6.

Answer 4

Puede usar el comando ng serve -c dev para el entorno de desarrollo ng serve -c prod para el entorno de producción

Mientras que la construcción también se aplica lo mismo. Puedes usar ng build -c dev para dev build

Answer 5

Puedes probar: ng serve --configuration=dev/prod

Para compilar use: ng build --prod --configuration=dev

Espero que estés usando un tipo de entorno diferente.

Answer 6

Utilice este comando para Angular 6 para construir

ng build --prod --configuration=dev

Answer 7

This respuesta parece buena.
Sin embargo, me llevó a un error, ya que resultó con
Configuration ''xyz'' could not be found in project ...
error en la construcción.
Se requiere no solo para las configuraciones de compilación actualizadas, sino también para servirlas .

Así que para no dejar confusiones:

1. --env no es compatible con angular 6
2. --env se cambió en --configuration || -c (y ahora es más poderoso)
3. para administrar varios envs, además de agregar un nuevo archivo de entorno, ahora se requiere hacer algunos cambios en el archivo angular.json :
   • agregue una nueva configuración en la compilación { ... "build": "configurations": ... propiedad
   • la nueva configuración de compilación puede contener solo la parte de fileReplacements , (pero hay más opciones disponibles)
   • agregar nueva configuración en el servicio { ... "serve": "configurations": ... propiedad
   • la nueva configuración de servicio debe contener browserTarget="your-project-name:build:staging"