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.
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"
},
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With