直接打开index.html正常，通过Express运行时AngularJS无法加载

我来帮你搞定这个问题！你遇到的情况很典型——直接打开静态index.html文件时功能正常，但通过Express本地服务器运行就失效，核心原因是Express没有正确托管你的静态资源文件（比如AngularJS的库文件、你的app.js等等）。

问题代码分析 #

先看你当前的server.js代码：

const express = require('express');
const app = express();
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
app.listen(3000, () => {
  console.log('App is running on port 3000');
});

这段代码只处理了根路径的请求，返回index.html文件，但当页面尝试加载AngularJS库、app.js这类静态资源时，Express没有对应的路由规则来定位这些文件，会返回404错误，直接导致AngularJS无法初始化。

修复方案 #

只需要在server.js中添加一行代码，告诉Express托管你的静态资源目录即可：

情况1：所有文件（index.html、app.js、AngularJS库）都在同一根目录

修改后的server.js：

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

// 新增这行：托管当前目录下的所有静态资源
app.use(express.static(__dirname));

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
app.listen(3000, () => {
  console.log('App is running on port 3000');
});

情况2：静态资源放在单独的子目录（比如public文件夹）

如果你的app.js、AngularJS库都放在public目录下，需要调整代码：

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

// 托管public目录下的静态资源
app.use(express.static(__dirname + '/public'));

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
app.listen(3000, () => {
  console.log('App is running on port 3000');
});

同时记得修改index.html里的资源引用路径，比如将<script src="app.js"></script>改成<script src="/public/app.js"></script>。

验证步骤 #

1. 重启你的Express服务器
2. 访问http://localhost:3000，打开浏览器开发者工具的「Network」标签，检查AngularJS和app.js的请求状态是否为200
3. 此时AngularJS应该能正常初始化，你的控制器功能也可以正常运行了

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