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

Posted

技术标签:

【中文标题】工作区中未设置 Angular 12 通用配置“开发”【英文标题】:Angular 12 Universal Configuration 'development' is not set in the workspace 【发布时间】:2021-08-25 13:58:04 【问题描述】:

我在 Angular 11 上创建了新项目 - 客户端。 然后将 ng 版本更新为 12 Angular。 然后安装通用: ng 添加@nguniversal/express-engine

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

npm run dev:s-s-r

client@0.0.0 dev:s-s-r ng 运行客户端:serve-s-s-r


这是一个简单的服务器,用于在本地测试或调试 Angular 应用程序。 尚未对其安全问题进行审查。

请勿将其用于生产!


工作区中未设置配置“开发”。 npm 错误!代码 1 npm 错误!路径 E:\PRACTICE\MYPETPROJECTS\tanechka\client npm 错误!命令失败 npm 错误!命令 C:\WINDOWS\system32\cmd.exe /d /s /c ng run client:serve-s-s-r

npm 错误!可以在以下位置找到此运行的完整日志: npm 错误! 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-s-s-r": 
          "builder": "@nguniversal/builders:s-s-r-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:s-s-r": "ng run client:serve-s-s-r",
    "serve:s-s-r": "node dist/client/server/main.js",
    "build:s-s-r": "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"
  

我尝试将“开发”添加到服务的“配置”中:

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

但是没有用。

【问题讨论】:

【参考方案1】:

已修复 Angular 12 Universal 运行 serve:s-s-r 但显示 Configuration 'development' is not set in the workspace

我的 Angular 项目从 11 更新到 12。

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

尝试将 development 添加到 architect.configurations 中,其中的内容是从生产中复制的,但不起作用。

最后,我在serve-s-s-r.configurations.development中删除了:development,效果很好。

angular.jsonsn-p

"serve-s-s-r": 
          "builder": "@nguniversal/builders:s-s-r-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:s-s-r,那就太好了,这样很容易理解。 好的。在第一行添加一个关于此问题的粗体文本。 谢谢大佬,成功了! 这应该被接受的答案【参考方案2】:

我第一次去环球影业时遇到了同样的问题。

我在 angular.json 的以下节点中添加了“开发”配置:-

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

由于我通常使用“生产”和“暂存”配置运行,我只是复制了暂存配置并进行了一些调整以停止文件替换,并在我习惯于服务器端渲染时为我提供一个简单的调试平台。

【讨论】:

【参考方案3】:

我在 GitHub 上创建了关于这个主题的问题:https://github.com/angular/universal/issues/2158

工作决定是: 您能否尝试删除 serve-s-s-r 上的这一行:“defaultConfiguration”:“development”和“configuration.development 路径。然后在构建器下面添加选项,如下所示: "选项": "browserTarget": "client:build", "serverTarget": "client:server" ,

Angular.json 必须有这样的视图(使用 Universal)

 "serve-s-s-r": 
          "builder": "@nguniversal/builders:s-s-r-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-s-s-r": 
          "builder": "@nguniversal/builders:s-s-r-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"
            
          
        ,
    注意,在版本 12 中,还有一种新的 s-s-r 实验方式,要选择加入,您可以使用 ng add @nguniversal/common。

【讨论】:

【参考方案4】:

答案在这里 在 Angular 中,您可以在 angular.json 文件中创建自己的工作区,例如开发、生产。 按照这个:-

    转到应用根文件夹中的 angular.json 文件 在项目下 >"YOUR_APP_NAME" >architect >serve-s-s-r >configurations 添加这个
“发展”: "browserTarget": "YOUR_APP_NAME:build:development", “serverTarget”:“YOUR_APP_NAME:服务器:开发”

节点: 如果已经添加 3.去架构师>服务器 >配置添加这个

“发展”: “优化”:是的, “源地图”:假, “extractLicenses”:真
    去架构师>服务>配置添加这个
“发展”: "browserTarget": "YOUR_APP_NAME:build:development"
    如果您构建应用程序,请转到架构师>构建>配置添加此
“发展”: “优化”:是的, "outputHashing": "全部", “源地图”:假, “extractCss”:是的, “namedChunks”:假, “extractLicenses”:是的, “vendorChunk”:假, “buildOptimizer”:是的, “预算”:[ “类型”:“初始”, “最大警告”:“2mb”, “最大错误”:“5mb” , "type": "anyComponentStyle", “最大警告”:“6kb”, “最大错误”:“10kb” ]
    去架构师>prerender >配置添加这个
“发展”: "browserTarget": "YOUR_APP_NAME:build:development", “serverTarget”:“YOUR_APP_NAME:服务器:开发”

这个配置对我有用 然后你可以运行# npm run serve:s-s-r

【讨论】:

【参考方案5】:

没有任何帮助。所以我用 Angular 12 删除了这个项目,用 Angular 11 创建了一个新项目,然后添加了 Universal,运行 dev:s-s-r 就可以了!

【讨论】:

【参考方案6】:

angular.json 中没有development 配置。您可以在该文件中使用多个配置来分隔用于开发、暂存和生产的构建。

创建一个名为developmentarchitect.build.configurations.production 的副本,或者您希望的任何名称(我在此示例中使用了dev,以向您展示它是如何工作的)。例如:


  "projects": 
...
      "architect": 
...
          "configurations": 
...
            "dev": 
              "fileReplacements": [
                
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                
              ],
...
            
          ,
        
      
    
  ,

serve-s-s-r 部分,您现在可以参考您想要的配置。请注意我所做的更改,我将 development 替换为 dev,以揭开发生了什么的神秘面纱。

        "serve-s-s-r": 
          "builder": "@nguniversal/builders:s-s-r-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:s-s-r 现在应该可以工作了。

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

【讨论】:

以上是关于工作区中未设置 Angular 12 通用配置“开发”的主要内容,如果未能解决你的问题,请参考以下文章

在 Angular 6 中未找到配置或 get/set 已被弃用

Angular 10 中未显示验证消息

手动传递的 Angular 路由变量在组件中未定义

如何在Angular 8中未调用的组件之间传递数据[重复]

TypeError:无法使用拦截器读取 Angular 中未定义的属性“数据”

使用 angular-cli 在通用渲染中使用 cookie