Angular8集成i18n执行npm build:ssr时提示‘Project target does not exist’

我一眼就看出问题所在了——你的Angular项目配置里缺少了Angular Universal对应的server构建目标，这就是执行npm run build:ssr时报错的核心原因。

具体分析 #

看你的package.json里的脚本：

"build:server:prod:en": "ng run boilerplate:server:production-en",
"build:server:prod:fr": "ng run boilerplate:server:production-fr"

你在尝试调用boilerplate:server:production-en这个构建目标，但翻遍你的angular.json，projects.boilerplate.architect下根本没有server这个节点，Angular CLI找不到对应的构建配置，自然就抛出"Project target does not exist"错误了。

解决步骤 #

1. 确保Angular Universal依赖已安装（自动生成配置）

如果还没安装Universal，直接执行以下命令，它会自动给你的项目添加server构建目标和相关文件：

ng add @nguniversal/express-engine --clientProject boilerplate

这个命令会帮你生成main.server.ts、tsconfig.server.json，同时在angular.json里添加完整的server architect配置。

2. 手动补充server配置（如果已安装Universal但配置缺失）

如果已经装过Universal，你可以手动在angular.json的projects.boilerplate.architect节点下添加server配置，同时要为en/fr两个语言环境添加对应的production配置：

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist/server",
    "main": "src/main.server.ts",
    "tsConfig": "tsconfig.server.json"
  },
  "configurations": {
    "production-en": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "outputHashing": "media",
      "i18nFile": "src/locale/messages.en.xlf",
      "i18nFormat": "xlf",
      "i18nLocale": "en",
      "i18nMissingTranslation": "error"
    },
    "production-fr": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "outputHashing": "media",
      "i18nFile": "src/locale/messages.fr.xlf",
      "i18nFormat": "xlf",
      "i18nLocale": "fr",
      "i18nMissingTranslation": "error"
    }
  }
}

注意要确认main.server.ts和tsconfig.server.json这两个文件存在于你的项目中。

3. 修复package.json里的脚本语法问题

你的build:client-and-server-bundles命令里用了&&，这是HTML实体，在shell命令里会被当成无效字符，要改成普通的&&：

"build:client-and-server-bundles": "npm run build:prod:en && npm run build:prod:fr && npm run build:server:prod:en && npm run build:server:prod:fr",

做完以上三步，再执行npm run build:ssr，应该就能顺利完成SSR构建了。

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