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

169

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 angular-clia v6), y ahora estoy tratando de servir la aplicación a través de

ng serve --env=local

Pero esto me da un error:

Opción desconocida: '--env'

Uso 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?

Martin Adámek
fuente
1
es v6, se actualiza angular-clijunto con toda la aplicación, así que pensé que era obvio:]
Martin Adámek
55
Muy servicial, Martin. Gracias por compartir tu punto de vista. De hecho, no es para nada obvio.
Maxxx

Respuestas:

303

Necesita usar la nueva configurationopción (esto funciona para ng buildy ng servetambién)

ng serve --configuration=local

o

ng serve -c local

Si mira su angular.jsonarchivo, verá que tiene un control más fino 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"
      }
    ]
  }
}

Puedes obtener más información aquí 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 .

Agregar un nuevo entorno

Editar : para que quede claro, los reemplazos de archivos deben especificarse en la buildsección. Entonces, si desea usar ng servecon un environmentarchivo específico (por ejemplo, dev2 ), primero debe modificar la buildsección 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 su servesección para agregar una nueva configuración también, señalando la configuración dev2 build 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

David
fuente
¿Sabes si es posible agregar también base-href en las configuraciones? o simplemente en ng build --c puesta en escena --base-href = / aaa /
Eduardo Tolino
@EduardoTolino: Sí, puedes, hay una baseHrefopción
David
¿Dónde podría especificar el puerto de depuración remota para el entorno de desarrollo? Para depurar con VSCode. Por Angular 6supuesto. Para que el ng servecomando incluya el puerto del depurador remoto al iniciar el Chromenavegador.
Stephane
enlace de información actualizado: github.com/angular/angular-cli/wiki/…
Mateo Tibaquira
1
ng serve -c local toma tiempo para compilar la aplicación en comparación con "ng serve"
Vignesh
46

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

Tan solo para no dejar confusiones:

  1. --env no es compatible con angular 6
  2. --envse cambió a --configuration||-c(y ahora es más poderoso)
  3. para administrar varios entornos, además de agregar un nuevo archivo de entorno, ahora es necesario hacer algunos cambios en angular.json archivo:
    • agregar nueva configuración en la compilación { ... "build": "configurations": ... propiedad de
    • la nueva configuración de compilación puede contener solofileReplacements parte (pero hay más opciones disponibles)
    • agregar nueva configuración en el servicio { ... "serve": "configurations": ... propiedad de
    • la nueva configuración de servicio contendrá debrowserTarget="your-project-name:build:staging"
garfunkel61
fuente
8

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

Para construir el uso: ng build --prod --configuration=dev

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

amku91
fuente
ng serve --configuration = el comando dev / prod toma tiempo en comparación con ng serve ¿por qué?
Vignesh
ng serve --configuration = prod lleva más tiempo que ng serve --configuration = prod debido a la minimización del archivo y al código de producción.
amku91
ok si uso el comando "ng serve --configuration = dev" significa que también está tomando más tiempo
Vignesh
No, no debería tomar más tiempo. El entorno prod tiene pasos adicionales para minimizar, uglify y optimizar el código para la producción. Los otros entornos deben tomar el tiempo normal, a menos que active explícitamente estos pasos adicionales.
Reginaldo Camargo Ribeiro
6

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

Para uso angular 6 ng serve --configuration=dev

Nota: Consulte el mismo artículo para angular 6 también. Pero donde sea que encuentres en --envlugar de usar --configuration. Eso funciona bien para angular 6.

Prasanth Venkatesan
fuente
2

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

mientras que la construcción también se aplica. Puedes usar ng build -c devpara desarrollo de desarrollo

Shridhar Acharya
fuente
2

Angular ya no es compatible con --env, sino que debe usar

ng serve -c dev

para entorno de desarrollo y,

ng serve -c prod 

para producción

NOTA: -co--configuration

Shilpa Soni
fuente
Esto fue preguntado y respondido hace un año, también su respuesta es incorrecta, es -c(con un solo guión) o --configuration(con guiones dobles).
Martin Adámek
0

Use este comando para Angular 6 para construir

ng build --prod --configuration=dev
Sateesh
fuente