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.
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!
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"
}
}
},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.
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"
},
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
here the answer In angular, you can create your own workspace like development, production in angular.json file. follow 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
}
"development": {
"browserTarget": "YOUR_APP_NAME:build:development"
}
"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"
}
]
}
"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