Angular 12 Universal Configuration 'development' is not set in the workspace

I created new project - client - on Angular 11. Then updated ng version to 12 Angular. Then installed Universal: ng add @nguniversal/express-engine

Then I’m trying to run my Universal Angular, but it throws error:

npm run dev:ssr

client@0.0.0 dev:ssr ng run client:serve-ssr

This is a simple server for use in testing or debugging Angular applications locally. It hasn’t been reviewed for security issues.

DON’T USE IT FOR PRODUCTION!

Configuration ‘development’ is not set in the workspace. npm ERR! code 1 npm ERR! path E:\PRACTICE\MYPETPROJECTS\tanechka\client npm ERR! command failed npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c ng run client:serve-ssr

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\1\AppData\Local\npm-cache_logs\2021-06-08T14_35_07_681Z-debug.log

angular.json

`{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "client": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.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": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          },
          "defaultConfiguration": ""
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "client:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "client:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "client: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/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "client:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "client:serve:production"
            }
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/client/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json",
            "optimization": false,
            "sourceMap": true,
            "extractLicenses": false
          },
          "configurations": {
            "production": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "sourceMap": false,
              "extractLicenses": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve-ssr": {
          "builder": "@nguniversal/builders:ssr-dev-server",
          "configurations": {
            "development": {
              "browserTarget": "client:build:development",
              "serverTarget": "client:server:development"
            },
            "production": {
              "browserTarget": "client:build:production",
              "serverTarget": "client:server:production"
            }
          },
          "defaultConfiguration": "development"
        },
        "prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "routes": [
              "/"
            ]
          },
          "configurations": {
            "production": {
              "browserTarget": "client:build:production",
              "serverTarget": "client:server:production"
            },
            "development": {
              "browserTarget": "client:build:development",
              "serverTarget": "client:server:development"
            }
          },
          "defaultConfiguration": "production"
        }
      }
    }
  },
  "defaultProject": "client"
}

`

package.json:

`{
  "name": "client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev:ssr": "ng run client:serve-ssr",
    "serve:ssr": "node dist/client/server/main.js",
    "build:ssr": "ng build && ng run client:server",
    "prerender": "ng run client:prerender"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.0.3",
    "@angular/common": "~12.0.3",
    "@angular/compiler": "~12.0.3",
    "@angular/core": "~12.0.3",
    "@angular/forms": "~12.0.3",
    "@angular/platform-browser": "~12.0.3",
    "@angular/platform-browser-dynamic": "~12.0.3",
    "@angular/platform-server": "~12.0.3",
    "@angular/router": "~12.0.3",
    "@nguniversal/express-engine": "^12.0.1",
    "express": "^4.15.2",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.3",
    "@angular/cli": "~12.0.3",
    "@angular/compiler-cli": "~12.0.3",
    "@nguniversal/builders": "^12.0.1",
    "@types/express": "^4.17.0",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.7.1",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.3",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.6.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.2.4"
  }
}
`

🐞 Bug report

What modules are related to this issue?

• express-engine

Is this a regression?

No, as I know, the previous version in which this bug was not present was.

Description

🔬 Minimal Reproduction

I tried to add ‘development’ to ‘configurations’ of serve:

`"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "client:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "client:build:production"
            },
            "development": {
              "browserTarget": "client:build:production"
            }
          }
        },`

But it didn’t work.

I tried to delete all node_modules and then install it, but it didn’t work too. Please, help.

[DavidCMeier]

Could you try to delete this line on serve-ssr: "defaultConfiguration": "development" and "configuration.development path. Then add options below builder like this: "options": { "browserTarget": "client:build", "serverTarget": "client:server", },

I think the problem is that if you use a development configuration they try to use the same configuration on server and build, so if you don’t have it have this problem.

[alan-agius4]

We are wrongly assuming that users are using the @angular/cli opt-in migration ng update @angular/cli --migrate-only production-by-default to convert their projects to production by default, which will also create a development configuration.

Note, in version 12, there is also a new experimental way of SSR, To opt-in you can use ng add @nguniversal/common.