Angular路由配置求助：子路径无法加载组件及路由映射方案

问题场景 #

你的Angular应用通过Express以静态HTML形式部署，期望访问localhost:3000/my-app/first-component、localhost:3000/my-app/second-component时能对应显示指定组件，但目前访问子路由时控制台报Uncaught SyntaxError: Unexpected token '<'，无法正常加载组件。

报错原因 #

这个错误是因为访问子路由时，浏览器请求的JS/CSS等静态资源路径错误，服务器找不到对应资源，返回了index.html的内容（而非脚本文件），导致脚本解析时遇到HTML标签，触发语法错误。

解决方案 #

需要同时调整Angular路由配置和Express服务器配置，确保两者路径匹配，且服务器能正确托管静态资源并处理SPA路由 fallback。

1. 调整Angular路由与基路径

• 设置基路径：在Angular项目的src/index.html中添加基路径，确保应用的资源请求都基于/my-app/：

<base href="/my-app/">

或者构建时通过命令行指定：

ng build --base-href /my-app/

• 修改路由配置：去掉路由路径中的app前缀，让路由路径直接对应/my-app下的子路径：

export const routes: Routes = [
  { path: '', redirectTo: 'first-component', pathMatch: 'full' }, // 访问/my-app时默认跳转到first-component
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
];

2. 修正Express服务器配置

需要正确托管Angular构建后的静态文件，并设置SPA fallback路由，确保所有/my-app开头的请求都返回index.html，让Angular路由接管页面跳转：

修改server.js如下：

const express = require("express");
const path = require('path');

const app = express();
const port = 3000;

// 托管Angular构建后的静态文件，替换成你实际的项目构建目录（通常是dist/项目名）
app.use('/my-app', express.static(path.join(__dirname, 'dist/your-app-name')));

// SPA Fallback：所有/my-app开头的请求都返回index.html
app.all('/my-app/*', function(req, res) {
    res.sendFile(path.join(__dirname, 'dist/your-app-name/index.html'));
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

验证步骤 #

1. 重新构建Angular应用：执行ng build --base-href /my-app/
2. 启动Express服务器：执行node server.js
3. 访问localhost:3000/my-app会自动跳转到first-component，访问localhost:3000/my-app/second-component即可正常显示对应组件。

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