Angular 12通用配置:工作区中未设置“development”

14

我创建了一个 Angular 11 的新项目 - 客户端 - 然后将 ng 版本更新到 Angular 12,接着安装了 Universal:

ng add @nguniversal/express-engine

然后我尝试运行我的 Universal Angular,但是它会抛出错误:

npm run dev:ssr

client@0.0.0 dev:ssr ng run client:serve-ssr


这是一个简单的服务器,用于在本地测试或调试 Angular 应用程序。它还没有经过安全问题的审查,请不要用于生产环境!


工作区中未设置配置 "development"。 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! 该运行的完整日志可以在以下位置找到: 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"
  }
}

我试图将"development"添加到"serve"的"configurations"中:

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "client:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "client:build:production"
            },
            "development": {
              "browserTarget": "client:build:production"
            }
          }
        },

但它没有起作用。


我今天遇到了这个问题。请确保 architect.serve、architect.server、architect.serve、architect.serve-ssr 和 architect.prerender 都有开发、暂存和生产步骤的配置。 - Onno van der Zee
6个回答

29

修复Angular 12 Universal运行serve:ssr却显示Configuration 'development' is not set in the workspace的问题

我的Angular项目从11升级到了12。

出于某种原因我需要添加Angular Universal,但遇到了同样的问题。

尝试在architect.configurations中添加development,其中内容是从生产环境复制过来的,但并没有起效。

最后,我将serve-ssr.configurations.development中的:development删除,这样就解决了问题。

以下是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"
        },

谢谢,这非常有帮助。如果问题标题中也提到 serve:ssr,那就更好了,这样很容易就能找到。 - Santosh
OK. 在第一行加粗文字关于这个问题。 - hsuanyi-chou
谢谢,太棒了,它可以工作! - Amit Kulkarni
现在有一个很大的问题,如下:ReferenceError: window未被定义。 - withoutOne
@withoutOne 请尝试遵循此帖子 https://dev59.com/c7Tna4cB1Zd3GeqPCfLf#61533047 - Akshay Pawar

5
在Angular中,您可以在angular.json文件中创建自己的工作区,例如开发、生产环境。按照以下步骤:
  1. 进入应用根目录下的angular.json文件
  2. 在projects->"YOUR_APP_NAME"->architect->serve-ssr->configurations中添加以下内容:
"development": {
      "browserTarget": "YOUR_APP_NAME:build:development",
      "serverTarget": "YOUR_APP_NAME:server:development"
            }

注意:如果已添加 3. 进入architect->server->configurations 添加以下配置

"development": {
      "optimization": true,
      "sourceMap": false,
      "extractLicenses": true
      }
  1. 进入architect->serve->configurations 添加以下配置
"development": {
       "browserTarget": "YOUR_APP_NAME:build:development"
        }
  1. 如果您要构建应用程序,请进入architect->build->configurations添加以下配置
"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. 进入architect->prerender->configurations 添加以下配置
"development": {
              "browserTarget": "YOUR_APP_NAME:build:development",
              "serverTarget": "YOUR_APP_NAME:server:development"
            }

这些配置适用于我的环境,您可以运行# npm run serve:ssr


4

我遇到了完全一样的问题,我的第一次尝试是在 Universal 模块中。

我在 angular.json 中的以下节点中添加了一个名为 "development" 的配置: -

projects->{project-name}->architect->build->configurations
projects->{project-name}->architect->server->configurations

由于我通常使用“生产”和“暂存”配置,因此我只需复制暂存配置并进行少量调整,以停止文件替换并为我提供一个简单的平台来调试服务器端渲染。


2
我在GitHub上创建了一个关于这个主题的问题:https://github.com/angular/universal/issues/2158 工作决策是: 您可以尝试删除serve-ssr中的“defaultConfiguration”和“configuration.development path”行。然后在构建器下添加以下选项: “options”:{“browserTarget”:“client:build”,“serverTarget”:“client:server”},
Angular.json必须具有此视图(带有通用)。

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

将angular12-universal更改为您项目的名称

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

  1. 需要注意的是,在12版本中,还有一种新的SSR实验方法。如果要选择加入,请使用ng add @nguniversal/common。

1
你在 angular.json 中没有一个 development 配置。你可以在该文件中使用多个配置来分离开发、预发布和生产构建。
创建一个 architect.build.configurations.production 的副本,将其命名为 development 或任何你想要的名称(我在这个示例中使用了 dev 来展示它是如何工作的)。例如:
{
  "projects": {
...
      "architect": {
...
          "configurations": {
...
            "dev": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ],
...
            }
          },
        }
      }
    }
  },


serve-ssr 部分,您现在可以引用您想要的配置。请注意我所做的更改,我将 development 替换为 dev,以澄清正在发生的事情。
        "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"
        },

运行npm run dev:ssr现在应该可以正常工作。

要了解有关向项目添加多个配置的能力的更多信息,请访问此处:https://angular.io/guide/build


1

没什么帮助。所以我删除了使用 Angular 12 的项目,并创建了一个使用 Angular 11 的新项目,然后添加了 Universal,运行 dev:ssr,它就可以工作了!


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接