Angular 12 通用配置“开发”未在工作区中设置

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.

Answer 1

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.

Answer 2

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!

Answer 3

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

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