Angular部署Node服务器：动态设置base href及脚本加载异常问题

问题核心 #

直接用ng build --base-href只能固定一个路径，而APP_BASE_HREF无法控制静态资源的加载路径（依然从根域名加载），需要同时处理路由匹配和资源路径动态适配。

方案一：Node.js端动态修改index.html的base标签 #

1. 构建Angular项目 #

不指定固定的--base-href，直接执行：

ng build

构建产物的index.html里的base标签默认是<base href="/">，后续由Node端动态替换。

2. 修改Node.js路由配置 #

通过读取index.html并根据请求路径替换base标签的href属性，确保资源从当前子路径加载：

const fs = require('fs');
const express = require('express');
const app = express();

// 处理sandbox路径请求
app.get("/sandbox/xyz/portal/*", (req, res) => {
  // 提取当前请求的基础路径
  const baseHref = `${req.path.split('/portal/')[0]}/portal/`;
  // 读取并修改index.html
  fs.readFile(__dirname + '/portal/index.html', 'utf8', (err, htmlContent) => {
    if (err) return res.status(500).send('加载页面失败');
    // 替换base标签的href值
    const modifiedHtml = htmlContent.replace('<base href="/">', `<base href="${baseHref}">`);
    res.send(modifiedHtml);
  });
});

// 处理live路径请求
app.get("/live/xyz/portal/*", (req, res) => {
  const baseHref = `${req.path.split('/portal/')[0]}/portal/`;
  fs.readFile(__dirname + '/portal/index.html', 'utf8', (err, htmlContent) => {
    if (err) return res.status(500).send('加载页面失败');
    const modifiedHtml = htmlContent.replace('<base href="/">', `<base href="${baseHref}">`);
    res.send(modifiedHtml);
  });
});

// 静态资源托管（确保子路径下的资源能被正确访问）
app.use("/sandbox/xyz/portal", express.static(__dirname + '/portal'));
app.use("/live/xyz/portal", express.static(__dirname + '/portal'));

app.listen(3000, () => console.log('服务器启动'));

方案二：Angular端动态设置base标签 #

无需修改Node.js配置，直接在Angular启动时从当前URL提取基础路径并设置base标签：

1. 构建Angular项目 #

同样不指定--base-href，执行：

ng build

2. 修改main.ts文件 #

在启动Angular应用前，动态创建并插入base标签：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

// 从当前URL提取基础路径
const pathParts = window.location.pathname.split('/portal/');
const baseHref = `${pathParts[0]}/portal/`;

// 创建并插入base标签到页面头部
const baseTag = document.createElement('base');
baseTag.href = baseHref;
document.head.appendChild(baseTag);

// 启动应用
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

3. Node.js路由配置简化 #

只需配置两个路由指向同一构建产物即可：

const express = require('express');
const app = express();

app.use("/sandbox/xyz/portal", express.static(__dirname + '/portal'));
app.use("/live/xyz/portal", express.static(__dirname + '/portal'));

// 处理路由刷新（Angular单页应用需要）
app.get("/sandbox/xyz/portal/*", (req, res) => {
  res.sendFile(__dirname + '/portal/index.html');
});

app.get("/live/xyz/portal/*", (req, res) => {
  res.sendFile(__dirname + '/portal/index.html');
});

app.listen(3000, () => console.log('服务器启动'));

为什么APP_BASE_HREF不生效？ #

APP_BASE_HREF仅作用于Angular的路由导航逻辑，不会影响静态资源（JS、CSS、图片等）的加载路径。资源加载路径由index.html中的<base>标签决定，因此必须确保该标签的href值与当前部署路径一致。

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