如何在子路径中部署Angular Universal应用？

1. 完善angular.json中的配置 #

你当前仅给浏览器端构建配置了baseHref，但SSR场景下需要同时给服务器端构建目标添加对应配置，确保服务器渲染时能正确生成资源路径。修改angular.json：

找到projects.subfold.architect.server.configurations，新增insub配置：

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist/subfold/server",
    "main": "server.ts",
    "tsConfig": "tsconfig.server.json"
  },
  "configurations": {
    "production": {
      "outputHashing": "media",
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ]
    },
    "insub": {
      "baseHref": "/sub/",
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ]
    }
  }
}

同时确保浏览器端构建的insub配置完整：

"build": {
  "builder": "@angular-devkit/build-angular:application",
  "options": {
    "outputPath": "dist/subfold/browser",
    "index": "src/index.html",
    "browser": "src/main.ts",
    "polyfills": ["zone.js"],
    "tsConfig": "tsconfig.app.json",
    "assets": ["src/favicon.ico", "src/assets"],
    "styles": ["src/styles.css"],
    "scripts": []
  },
  "configurations": {
    "production": {
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "500kb",
          "maximumError": "1mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "2kb",
          "maximumError": "4kb"
        }
      ],
      "outputHashing": "all"
    },
    "insub": {
      "baseHref": "/sub/",
      "outputHashing": "all"
    }
  },
  "defaultConfiguration": "production"
}

2. 同时构建浏览器端和服务器端 #

之前的命令仅构建了浏览器端，需要补充服务器端的构建并指定insub配置：

ng build --configuration insub
ng run subfold:server:insub

3. 启动服务器时指定baseHref #

启动SSR服务器时，需要明确告知其baseHref，有两种实现方式：

方式一：启动命令传参 #

修改启动命令，添加--base-href /sub/参数：

PORT=4003 node dist/subfold/server/server.mjs --base-href /sub/

方式二：修改server.ts固定配置 #

若部署路径固定，可直接在server.ts中配置APP_BASE_HREF：

import { APP_BASE_HREF } from '@angular/common';

// ...

server.get('*', (req, res) => {
  res.render(indexHtml, {
    req,
    providers: [
      { provide: APP_BASE_HREF, useValue: '/sub/' }
    ],
  });
});

4. 验证资源路径 #

构建完成后，检查dist/subfold/browser/index.html中的资源引用，确认路径为/sub/main.js这类带前缀的格式，而非/main.js。确认无误后重启服务器，访问http://localhost:4003/sub/即可正常加载JS资源。

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