ng deploy - allow configuration for serverTarget

[lukfel]

Version info

Angular: 11.0.0

Firebase: 8.1.2

AngularFire: 6.1.4

Node: 14

How to reproduce these conditions

I have two environment configs for my Angular Universal app: dev.environment.ts and prod.environment.ts with different API keys. I configured my entire angular.json for these two build configurations production and development. However, when I run ng deploy --configuration development the browser build uses the correct configuration, but the server build uses the production config.

Steps to set up and reproduce

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-app": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "skipTests": true
        },
        "@schematics/angular:class": {
          "skipTests": true
        },
        "@schematics/angular:directive": {
          "skipTests": true
        },
        "@schematics/angular:guard": {
          "skipTests": true
        },
        "@schematics/angular:interceptor": {
          "skipTests": true
        },
        "@schematics/angular:module": {
          "skipTests": true
        },
        "@schematics/angular:pipe": {
          "skipTests": true
        },
        "@schematics/angular:service": {
          "skipTests": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "allowedCommonJsDependencies": [
              "hammerjs",
              "lodash/cloneDeep",
              "@angular/fire/firestore",
              "@firebase/app",
              "@firebase/auth",
              "@firebase/firestore",
              "@firebase/component",
              "@firebase/util",
              "@firebase/performance",
              "firebase/app",
              "jspdf",
              "pako",
              "@babel/runtime-corejs3",
              "raf"
            ],
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/apple-touch-icon.png",
              "src/assets",
              "src/manifest.webmanifest"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/assets/scss"
              ]
            },
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "index": {
                "input": "src/index.prod.html",
                "output": "index.html"
              },
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "7kb",
                  "maximumError": "10kb"
                }
              ],
              "serviceWorker": true,
              "ngswConfigPath": "ngsw-config.json"
            },
            "development": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "7kb",
                  "maximumError": "10kb"
                }
              ],
              "serviceWorker": true,
              "ngswConfigPath": "ngsw-config.json"
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "my-app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "my-app:build:production"
            },
            "development": {
              "browserTarget": "my-app:build:development"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "my-app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/apple-touch-icon.png",
              "src/assets",
              "src/manifest.webmanifest"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/assets/scss"
              ]
            },
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "src/**/*.ts",
              "src/**/*.html"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "my-app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "my-app:serve:production"
            },
            "development": {
              "devServerTarget": "my-app:serve:development"
            }
          }
        },
        "deploy": {
          "builder": "@angular/fire:deploy",
          "options": {
            "ssr": true,
            "functionsNodeVersion": 12
          },
          "configurations": {
            "production": {
              "buildTarget": "my-app:build:production",
              "serverTarget": "my-app:server:production"
            },
            "development": {
              "buildTarget": "my-app:build:development",
              "serverTarget": "my-app:server:development"
            }
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json",
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/assets/scss"
              ]
            },
            "externalDependencies": [
              "firebase",
              "@firebase/app",
              "@firebase/analytics",
              "@firebase/auth",
              "@firebase/component",
              "@firebase/database",
              "@firebase/firestore",
              "@firebase/functions",
              "@firebase/installations",
              "@firebase/messaging",
              "@firebase/storage",
              "@firebase/performance",
              "@firebase/remote-config",
              "@firebase/util"
            ]
          },
          "configurations": {
            "production": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "sourceMap": false,
              "optimization": true
            },
            "development": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ],
              "sourceMap": false,
              "optimization": true
            }
          }
        },
        "serve-ssr": {
          "builder": "@nguniversal/builders:ssr-dev-server",
          "options": {
            "browserTarget": "my-app:build",
            "serverTarget": "my-app:server"
          },
          "configurations": {
            "production": {
              "browserTarget": "my-app:build:production",
              "serverTarget": "my-app:server:production"
            },
            "development": {
              "browserTarget": "my-app:build:development",
              "serverTarget": "my-app:server:development"
            }
          }
        },
        "prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "browserTarget": "my-app:build:production",
            "serverTarget": "my-app:server:production",
            "routes": [
              "/"
            ]
          },
          "configurations": {
            "production": {},
            "development": {}
          }
        }
      }
    }
  },
  "defaultProject": "my-app"
}

Expected behavior

Use correct environment for both the browser- and the server build.

Actual behavior

The browser build uses the correct config from the dev.environment.ts, but the server build uses the prod.environment.ts.

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[geromegrignon]

As explained here :

If you do not specify a buildTarget, it defaults to a production build (projectName:build:production)

[lukfel]

@geromegrignon Have you looked at my angular.json?

        "deploy": {
          "builder": "@angular/fire:deploy",
          "options": {
            "ssr": true,
            "functionsNodeVersion": 12
          },
          "configurations": {
            "production": {
              "buildTarget": "my-app:build:production",
              "serverTarget": "my-app:server:production"
            },
            "development": {
              "buildTarget": "my-app:build:development",
              "serverTarget": "my-app:server:development"
            }
          }
        },

I use ng deploy --configuration=development. However, this doesn´t apply to the server build.

[geromegrignon]

Indeed, i was so focused to look at the codebase i forgot this part of your explanation.

[stefanedberg]

We're having the exact same use case and would love to get support for this. In our case we have multiple sites with different environment files and need to change them on the server build as well.

[jamesdaniels]

universalBuildTarget (rather than serverTarget) is what AngularFire uses for legacy reasons.

[jamesdaniels]

Going to keep as open, as I may consider changing this in the upcoming major.

[jamesdaniels]

7.1.0-rc.0 now has serverTarget