Angular 17项目添加SSR后运行dev:ssr提示development配置未设置

错误原因 #

你的项目angular.json中，build和server模块的配置项里定义的开发环境配置名为dev，但serve-ssr默认绑定的配置名是development，两者不匹配导致系统找不到对应配置。

解决方案 #

以下三种方法任选其一即可：

方法1：修改serve-ssr配置，匹配现有dev环境 #

打开angular.json，定位到projects > farmQ > architect > serve-ssr节点，将development配置的browserTarget和serverTarget中的development替换为dev：

"serve-ssr": {
  "builder": "@angular-devkit/build-angular:ssr-dev-server",
  "configurations": {
    "development": {
      "browserTarget": "farmQ:build:dev",
      "serverTarget": "farmQ:server:dev"
    },
    "production": {
      "browserTarget": "farmQ:build:production",
      "serverTarget": "farmQ:server:production"
    }
  },
  "defaultConfiguration": "development"
}

方法2：新增development配置到build和server模块 #

如果希望保留development作为配置名，可在build > configurations和server > configurations中新增该配置，直接复制现有dev的配置内容：

// 在build的configurations节点下添加
"development": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.dev.ts"
    }
  ],
  "optimization": {
    "scripts": true,
    "styles": {
      "minify": true,
      "inlineCritical": false
    },
    "fonts": true
  },
  "outputHashing": "all",
  "sourceMap": false,
  "namedChunks": false,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true,
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "13mb",
      "maximumError": "13mb"
    },
    {
      "type": "anyComponentStyle",
      "maximumWarning": "13mb",
      "maximumError": "13mb"
    }
  ]
}

同时在server > configurations节点下添加结构完全一致的development配置。

方法3：修改package.json脚本，指定使用dev配置 #

直接修改package.json中的dev:ssr命令，明确指定使用dev配置启动：

"dev:ssr": "ng run farmQ:serve-ssr:dev"

验证 #

修改完成后，重新执行npm run dev:ssr即可正常启动SSR开发服务器。

内容的提问来源于stack exchange，提问作者Ashish Kushwaha