page - navigationend angular 4

Angular 6: Múltiples configuraciones(dos ambientes)

Question

Intentando que angular-cli reconozca múltiples configuraciones en angular.json

C:/_dev/myapp>ng serve --configuration development
Configuration ''development'' could not be found in project ''myapp''.
Error: Configuration ''development'' could not be found in project ''myapp''.

El fragmento es:

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

src/environments/environment.development.ts existe

ng serve --configuration production 

funciona bien

Answer 1

Hay una entrada de configurations en la build y en la sección de servicio del archivo angular.json . La parte de servicio también necesita conocer su configuración personalizada. Suponiendo que su nombre de configuración es depuración , agréguelo a la sección de servicio de la siguiente manera

"projects": {
  "myApp": {
     [...]
     "architect": {
       "build": {
         [...]
         "configurations": {
           "production": { [...] },
           "debug": { [...] }
         }
       },
       "serve": {
         [...]
         "configurations": {
           "production": {
             "browserTarget": "myApp:build:production"
           },
           "debug": {
             "browserTarget": "myApp:build:debug"
           }
         }
       }
     }
   }
 }

No olvide ajustar myApp al nombre de su proyecto igual al elemento secundario directo de la sección del project en su angular.json . También ambas debug deben coincidir con su configuración en la sección de build .

Entonces sirve con

ng serve --configuration=debug

Answer 2

Para Angular 2 - 5, consulte el artículo para obtener una solución paso a paso para utilizar 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.