如何让Angular2返回JS而非HTML？解决SystemJS Unexpected token <错误

没错，这绝对是问题的根源！

为什么会出现Unexpected token <？ #

当浏览器请求app/app.module.js这类JS文件时，你的Express服务器返回的是HTML内容（大概率是index.html）。浏览器拿到HTML后会尝试把它当作JavaScript解析，而HTML的第一个字符通常是<，这完全不符合JS语法，所以就抛出了这个错误。

你的Express配置哪里出问题了？ #

看你的配置代码：

app.use('/styles.css', express.static(path.join(__dirname, '../angular/src/styles.css')));
app.use('/systemjs.config.js', express.static(path.join(__dirname, '../angular/src/systemjs.config.js')));
// 其他单个文件的静态映射...
app.use(express.static(path.join(__dirname, '../angular')));
app.use('/api/', auditlog);
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../angular/src/index.html'));
});

你只手动配置了少数几个文件的静态映射，但app/app.module.js并没有被包含在内。当请求这个文件时，前面的静态中间件都匹配不到，最终会命中最后的app.get('*', ...)路由，返回index.html——这就是为什么你看到返回的是HTML而非JS。

另外，你把express.static(path.join(__dirname, '../angular'))设为静态目录，但你的Angular源码其实在../angular/src下，这个目录配置也不对，导致src下的子文件（比如app/目录里的文件）无法被正确访问。

修复方案 #

调整你的Express配置，让它正确处理所有Angular静态资源：

1. 正确设置静态资源目录：把../angular/src设为静态目录，这样所有src下的文件（包括app/里的模块文件）都能被直接访问。
2. 调整路由顺序：静态资源中间件要放在API路由和通配路由之前，确保静态文件请求优先被处理。

修改后的配置示例：

// 先配置静态资源目录，指向Angular的src文件夹
app.use(express.static(path.join(__dirname, '../angular/src')));

// API路由放在静态资源之后
app.use('/api/', auditlog);

// 最后处理所有其他请求，返回index.html（用于Angular的路由）
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../angular/src/index.html'));
});

这样你就不需要逐个手动添加单个文件的静态映射了，所有src下的文件都会被正确服务。

验证修复 #

重启Express服务器后，打开浏览器开发者工具的网络面板，重新请求页面：

• 查看app/app.module.js的请求，确认返回的是JS文件，且响应头的Content-Type为application/javascript。
• 此时Unexpected token <错误应该会消失，Angular应用能正常加载。

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