servidor - publicar proyecto angular 5

Cómo agregar/configurar el archivo Angular 6 angular.json entorno

Question

¿Cómo especifico el entorno a utilizar en Angular 6? El archivo .angular-cli.json parece haber cambiado a angular.json desde versiones anteriores y con él la estructura del json interior.

¿Cómo / dónde en este archivo especifico los entornos a usar?

Answer 1

Abrir archivo angular.json. podemos ver las configuraciones por defecto, se mostrará para el fragmento de código de adición de producción para sus respectivos entornos. agregue el archivo environment.dev.ts en environment para dev, agregue environment.qa.ts para qa. Nombra como prefieras. utilizar

 ng serve --configuration=environment_name

environment_name - (dev, qa, prod) se puede seguir el mismo proceso para ng build

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

Answer 2

Hay una propiedad en angular.json para especificar qué archivo usar en dev y prod y, como de costumbre, importa environment.ts en su proyecto para obtener lo que necesita.

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

Answer 3

Intenté la respuesta para agregar una nueva "prueba" de configuración en mi aplicación Angular 6, luego ejecuté

ng serve --configuration=test

Y se produjo un error que decía que ''Configuración'' prueba ''no se pudo encontrar en el proyecto''. Mire hacia abajo en el archivo angular.json y hay otra sección en "build" que se llama "serve". La nueva configuración debe agregarse a la sección de configuración en "Servir" también para que ng serve funcione con ella:

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "my-app:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "my-app:build:production"
        },
        "test": {
          "browserTarget": "my-app:build:test"
        }
      }
    },