Creé un nuevo proyecto - cliente - en Angular 11. Luego actualicé la versión ng a 12 Angular. Luego instalé Universal: ng add @nguniversal/express-engine
Luego estoy tratando de ejecutar mi Universal Angular, pero arroja un error:
npm ejecutar dev: ssr
cliente@0.0.0 dev:ssr ng ejecutar cliente:servir-ssr
Este es un servidor simple para probar o depurar aplicaciones angulares localmente. No ha sido revisado por problemas de seguridad.
¡NO LO UTILICE PARA PRODUCCIÓN!
La configuración 'desarrollo' no está configurada en el espacio de trabajo. npm ¡ERROR! código 1 npm ¡ERROR! ruta E:\PRÁCTICA\MYPETPROJECTS\tanechka\client npm ERR! comando falló npm ERR! comando C:\WINDOWS\system32\cmd.exe /d /s /c ng ejecutar cliente:serve-ssr
npm ¡ERROR! Puede encontrar un registro completo de esta ejecución en: npm ERR! C:\Usuarios\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" }paquete.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" } }Traté de agregar 'desarrollo' a 'configuraciones' de servicio:
"serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "client:build" }, "configurations": { "production": { "browserTarget": "client:build:production" }, "development": { "browserTarget": "client:build:production" } } },Pero no funcionó.
Nada ayuda. Así que elimino el proyecto con Angular 12 y creo uno nuevo con Angular 11 y agrego Universal, ejecuto dev:ssr y ¡funciona!
Creé un problema sobre este tema en GitHub: https://github.com/angular/universal/issues/2158
La decisión de trabajo es: ¿Podría intentar eliminar esta línea en serve-ssr: "defaultConfiguration": "desarrollo" y "configuración.ruta de desarrollo". Luego agregue opciones debajo del generador como este: "opciones": { "browserTarget": "cliente :construir", "servidorDestino": "cliente:servidor" },
Angular.json debe tener tal vista (con 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" } } },Cambie angular12-universal en el nombre de su proyecto
"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" } } },Tuve exactamente el mismo problema, mi primera visita a Universal.
Agregué una configuración de "desarrollo" en los siguientes nodos en angular.json: -
projects->{project-name}->architect->build->configurations projects->{project-name}->architect->server->configurationsComo normalmente ejecuto configuraciones de "producción" y "preparación", simplemente copié la configuración de preparación e hice un par de ajustes para detener los reemplazos de archivos y brindarme una plataforma fácil para depurar mientras me acostumbraba a la representación del lado del servidor.
CORREGIDO Angular 12 Universal ejecutando el serve:ssr pero mostrando Configuration 'development' is not set in the workspace
Mi proyecto angular se actualizó de 11 a 12.
Necesito agregar angular universal por alguna razón y obtuve el mismo problema.
Intentando agregar development en architect.configurations . configuraciones donde los contenidos se copiaron de producción, pero no funciona.
Finalmente, eliminé :development en serve-ssr.configurations.development y funciona bien.
En fragmento angular.json
"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" },No tiene una configuración de development en angular.json . Puede usar varias configuraciones en ese archivo para separar compilaciones para desarrollo, preparación y producción.
Cree una copia de architect.build.configurations.production llamada development o como desee (utilicé dev para este ejemplo, para mostrarle cómo funciona). Por ejemplo:
{ "projects": { ... "architect": { ... "configurations": { ... "dev": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.dev.ts" } ], ... } }, } } } }, En la sección serve-ssr ahora puede consultar las configuraciones que desea. Tenga en cuenta el cambio que hice donde reemplacé development con dev , para desmitificar lo que está sucediendo.
"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" }, Ejecutar npm run dev:ssr ahora debería funcionar.
Para leer más sobre la capacidad de agregar múltiples configuraciones a su proyecto, vaya aquí: https://angular.io/guide/build
aquí la respuesta En angular, puede crear su propio espacio de trabajo como desarrollo, producción en el archivo angular.json . Sigue esto:-
"desarrollo": {
"browserTarget": "YOUR_APP_NAME:build:desarrollo",
"serverTarget": "YOUR_APP_NAME:servidor:desarrollo"
}
nodo: si ya se agregó 3. vaya a arquitecto> servidor > configuraciones agregue esto
"desarrollo": {
"optimización": cierto,
"sourceMap": falso,
"ExtractLicenses": verdadero
}
"desarrollo": {
"browserTarget": "YOUR_APP_NAME:build:desarrollo"
}
"desarrollo":{
"optimización": cierto,
"salidaHashing": "todos",
"sourceMap": falso,
"extraerCss": verdadero,
"Chunks con nombre": falso,
"ExtractLicenses": verdadero,
"vendorChunk": falso,
"buildOptimizer": verdadero,
"presupuestos": [
{
"tipo": "inicial",
"advertencia máxima": "2mb",
"maximumError": "5mb"
},
{
"tipo": "cualquierEstiloComponente",
"advertencia máxima": "6kb",
"maximumError": "10kb"
}
]
}
"desarrollo": {
"browserTarget": "YOUR_APP_NAME:build:desarrollo",
"serverTarget": "YOUR_APP_NAME:servidor:desarrollo"
}
esta configuración funciona para mí, entonces puedes ejecutar # npm run serve:ssr