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

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

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

npm run dev:ssr

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


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

请勿将其用于生产!


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

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

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

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

但是没有用。

【问题讨论】:

    标签: node.js angular express universal


    【解决方案1】:

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

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

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

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

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

    angular.jsonsn-p

    "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,那就太好了,这样很容易理解。
    • 好的。在第一行添加一个关于此问题的粗体文本。
    • 谢谢大佬,成功了!
    • 这应该被接受的答案
    【解决方案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-ssr 上的这一行:“defaultConfiguration”:“development”和“configuration.development 路径。然后在构建器下面添加选项,如下所示: "选项": { "browserTarget": "client:build", "serverTarget": "client:server" },

      Angular.json 必须有这样的视图(使用 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"
                  }
                }
              },

      更改项目名称的 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。

      【讨论】:

        【解决方案4】:

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

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

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

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

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

        【讨论】:

          【解决方案5】:

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

          【讨论】:

            【解决方案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-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

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 2011-12-07
              • 2020-08-30
              • 2018-09-23
              • 1970-01-01
              • 2023-02-17
              • 2020-01-03
              • 1970-01-01
              相关资源
              最近更新 更多