Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

[email protected] 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.

like image 439
Tatyana Molchanova Avatar asked Jun 08 '21 14:06

Tatyana Molchanova


3 Answers

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"
        },
like image 55
hsuanyi-chou Avatar answered Oct 19 '22 00:10

hsuanyi-chou


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.

like image 44
Cueball 6118 Avatar answered Oct 19 '22 00:10

Cueball 6118


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

  1. go to angular.json file in the app root folder
  2. 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
      }
  1. go to architect >serve >configurations add this
"development": {
       "browserTarget": "YOUR_APP_NAME:build:development"
        }
  1. 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"
                }
              ]
            }
  1. 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

like image 39
arpit singh rajput Avatar answered Oct 19 '22 01:10

arpit singh rajput