Angular12安装Universal后运行dev:ssr提示development配置未设置如何解决

根因说明 #

Angular 12 开始正式引入production/development双配置体系，从Angular 11升级上来的项目、以及@nguniversal/express-engine自动生成的配置会缺失对应的development配置项。你之前仅修改了普通serve节点的配置，但npm run dev:ssr调用的是serve-ssr专属的目标配置，因此修改不生效。

修复步骤 #

• 步骤1：补全浏览器端构建build节点的development配置
  打开angular.json，定位到projects > client > architect > build > configurations，新增如下配置，原有production配置保持不变：

  "development": {
    "buildOptimizer": false,
    "optimization": false,
    "vendorChunk": true,
    "extractLicenses": false,
    "sourceMap": true,
    "namedChunks": true
  }
  

  同时在build节点下添加默认配置声明：

  "defaultConfiguration": "production"
  

• 步骤2：补全普通serve节点的development配置
  定位到projects > client > architect > serve > configurations，修改为如下配置：

  "configurations": {
    "production": {
      "browserTarget": "client:build:production"
    },
    "development": {
      "browserTarget": "client:build:development"
    }
  },
  "defaultConfiguration": "development"
  

• 步骤3：补全SSR开发服务serve-ssr节点的development配置
  定位到projects > client > architect > serve-ssr > configurations，新增如下配置：

  "development": {
    "browserTarget": "client:build:development",
    "serverTarget": "client:server:development"
  }
  

  同时在serve-ssr节点下添加默认配置声明：

  "defaultConfiguration": "development"
  

• 步骤4：补全服务端构建server节点的development配置
  定位到projects > client > architect > server > configurations，新增如下配置，原有production配置保持不变：

  "development": {
    "optimization": false,
    "sourceMap": true,
    "namedChunks": true,
    "extractLicenses": false,
    "vendorChunk": true
  }
  

  同时在server节点下添加默认配置声明：

  "defaultConfiguration": "production"
  

• 步骤5：校验package.json脚本
  确认package.json中scripts节点的dev:ssr配置如下：

  "dev:ssr": "ng run client:serve-ssr:development"
  

• 步骤6：验证生效
  删除项目下的node_modules文件夹、package-lock.json/yarn.lock文件后重新执行依赖安装，再运行npm run dev:ssr即可正常启动SSR开发服务。

内容的提问来源于stack exchange，提问作者Tatyana Molchanova