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

Question

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"
  }
}

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 came across this problem today. Just make sure architect.serve, architect.server, architect.serve, architect.serve-ssr and architect.prerender all have configuration for development, staging and production steps. — Onno van der Zee, May 24 '23 at 14:44

hsuanyi-chou · Answer 1 · 2021-09-17T14:46:41.320

29

FIXED Angular 12 Universal running serve:ssr but showing Configuration 'development' is not set in the workspace

My angular project was updated from 11 to 12.

I need to add angular universal for some reason and got same issue.

Trying to add development in architect.configurations where contents copied from production, but not working.

Finally, I removed :development in serve-ssr.configurations.development and it works well.

In angular.json snippet

"serve-ssr": {
          "builder": "@nguniversal/builders:ssr-dev-server",
          "configurations": {
            "development": {
              "browserTarget": "<YOUR_PROJECT_NAME>:build", <--- remove `:development` here
              "serverTarget": "<YOUR_PROJECT_NAME>:server"  <--- remove `:development` here
            },
            "production": {
              "browserTarget": "<YOUR_PROJECT_NAME>:production",
              "serverTarget": "<YOUR_PROJECT_NAME>:server:production"
            }
          },
          "defaultConfiguration": "development"
        },

edited Sep 17 '21 at 14:46

answered Aug 14 '21 at 15:12

hsuanyi-chou

291
3
4

Thanks it was a great help. It would be great if question also mentioned `serve:ssr` in title so its easy to catch. – Santosh Sep 16 '21 at 03:55
OK. adding a bold text at first line about this issue. – hsuanyi-chou Sep 17 '21 at 05:30
Thanks man , It Works ! – Amit Kulkarni Sep 30 '21 at 16:21
there is a big issue now like this:ReferenceError: window is not defined – withoutOne Jun 22 '22 at 08:38
@withoutOne Try to follow this post https://stackoverflow.com/questions/56922178/angular-7-universal-referenceerror-window-is-not-defined/61533047#61533047 – Akshay Pawar Jul 04 '22 at 10:32

score 4 · Answer 2 · answered Jul 05 '21 at 02:01

I had exactly the same issue, my first go at Universal.

I added a "development" configuration in the follow nodes in the angular.json: -

projects->{project-name}->architect->build->configurations
projects->{project-name}->architect->server->configurations

As I normally run with "production" and "staging" configurations I just copied the staging configuration and made a couple of tweaks to stop file replacements and give me an easy platform to debug on while I got used to server side rendering.

score 4 · Answer 3 · answered Oct 12 '21 at 00:31

here the answer In angular, you can create your own workspace like development, production in angular.json file. follow this:-

go to angular.json file in the app root folder
under the projects >"YOUR_APP_NAME" >architect >serve-ssr >configurations add this

"development": {
      "browserTarget": "YOUR_APP_NAME:build:development",
      "serverTarget": "YOUR_APP_NAME:server:development"
            }

node: if alredy added 3. go to architect >server >configurations add this

"development": {
      "optimization": true,
      "sourceMap": false,
      "extractLicenses": true
      }

go to architect >serve >configurations add this

"development": {
       "browserTarget": "YOUR_APP_NAME:build:development"
        }

if you build app go to architect >build >configurations add this

"development":{
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }

go to architect >prerender >configurations add this

"development": {
              "browserTarget": "YOUR_APP_NAME:build:development",
              "serverTarget": "YOUR_APP_NAME:server:development"
            }

this configuration work for me then you can run # npm run serve:ssr

Tatyana Molchanova · Answer 4 · 2021-06-19T16:28:44.370

I created issue on this topic on GitHub: https://github.com/angular/universal/issues/2158

The working decision is: 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" },

Angular.json must have such view (with Universal)

 "serve-ssr": {
          "builder": "@nguniversal/builders:ssr-dev-server",
          "options": {
            "browserTarget": "angular12-universal:build",
            "serverTarget": "angular12-universal:server"
          },
          "configurations": {
            "production": {
              "browserTarget": "angular12-universal:build:production",
              "serverTarget": "angular12-universal:server:production"
            }
          }
        },

Change angular12-universal on name of your project

 "serve-ssr": {
          "builder": "@nguniversal/builders:ssr-dev-server",
          "options": {
            "browserTarget": "your-project-name-here:build",
            "serverTarget": "your-project-name-here:server"
          },
          "configurations": {
            "production": {
              "browserTarget": "your-project-name-here:build:production",
              "serverTarget": "your-project-name-here:server:production"
            }
          }
        },

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

score 1 · Answer 5 · answered Jun 09 '21 at 08:04

1

Nothing helps. So I delete the project with Angular 12 and create a new one with Angular 11 and add Universal, run dev:ssr and it works!

answered Jun 09 '21 at 08:04

Tatyana Molchanova

1,305
5
12
23

score 1 · Answer 6 · answered Oct 05 '21 at 16:36

You do not have a development configuration in angular.json. You can use multiple configurations in that file to separate builds for development, staging and production.

Create a copy of architect.build.configurations.production named development or however you wish (I used dev for this example, to show you how it works). For example:

{
  "projects": {
...
      "architect": {
...
          "configurations": {
...
            "dev": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ],
...
            }
          },
        }
      }
    }
  },

In the serve-ssr section you can now refer to the configurations you want. Please note the change I made where I replaced development with dev, to demystify what's going on.

        "serve-ssr": {
          "builder": "@nguniversal/builders:ssr-dev-server",
          "configurations": {
            "dev": {
              "browserTarget": "labeler:build:dev",
              "serverTarget": "labeler:server:dev"
            },
            "production": {
              "browserTarget": "labeler:build:production",
              "serverTarget": "labeler:server:production"
            }
          },
          "defaultConfiguration": "dev"
        },

Running npm run dev:ssr should now work.

To read more about the ability to add multiple configurations to your project, go here: https://angular.io/guide/build

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

6 Answers6