Node.js http模块服务HTML时内嵌脚本无法执行问题排查

我来帮你一步步定位问题，从最可能的触发原因开始分析：

1. Angular脚本执行时机错误（核心问题） #

你的Angular代码写在<head>标签内，此时浏览器还未渲染<body>部分，Angular找不到带有ng-app="explorerApp"的DOM元素，导致模块和控制器无法正常初始化，这是脚本失效的主要原因。

修复方案：
把内联脚本移到<body>标签的末尾，或者给脚本添加DOM加载完成的监听，确保DOM渲染后再执行代码：

<body ng-app="explorerApp" ng-controller="MyController">
<!-- 页面原有内容 -->

<script>
// 等待DOM加载完成后执行脚本
document.addEventListener('DOMContentLoaded', function() {
  alert('hello'); 
  var fileExplorerApp = angular.module('explorerApp', []); 
  fileExplorerApp.controller("MyController", function ($scope, $http) { 
    // 控制器原有代码...
  });
});
</script>
</body>

2. AngularJS 1.6+ 已废弃success()/error()方法 #

你使用的是AngularJS 1.6.5，这个版本已经彻底废弃了$http.success()和$http.error()回调方法，改用标准Promise的then()和catch()。继续使用旧方法会导致请求回调无法触发，控制台会抛出错误，进而中断脚本执行。

修改$http请求代码：

$http({method: 'GET', url: 'http://localhost:3000/list_dir?path=' + currentPath})
.then(function(response){ 
  console.log('Angular working 2'); 
  $scope.filesAndFolders = response.data; 
  $scope.currentPath = currentPath; 
})
.catch(function(error) { 
  console.log('Error in $http- '+error); 
});

3. 静态资源路由未处理 #

你的index.html引用了/stylesheets/style.css，但当前http服务器只处理了/路由，浏览器请求该CSS文件时会收到404错误。虽然这不会直接阻止脚本执行，但页面资源加载异常可能干扰浏览器的脚本执行环境。

添加静态资源路由处理：
在你的http服务器逻辑中，新增对/stylesheets/路径的处理：

else if(parsedUrl.pathname.startsWith('/stylesheets/')) {
  const filePath = __dirname + parsedUrl.pathname;
  fs.readFile(filePath, 'utf-8', function(err, fileResponse){ 
    if(err){ 
      res.writeHeader(404, {"Content-Type":"text/css"}); 
      res.write('CSS file not found'); 
    } else { 
      res.writeHeader(200, {"Content-Type": "text/css"}); 
      res.write(fileResponse); 
    } 
    res.end(); 
  });
  break;
}

4. 确认HTML文件读取路径正确 #

你当前使用./index.html相对路径读取文件，可能存在路径解析错误（比如服务器启动目录和文件实际位置不匹配）。建议改用__dirname拼接绝对路径，确保文件能被正确读取：

fs.readFile(__dirname + '/index.html', 'utf-8', function(err, fileResponse){ 
  // 原有逻辑...
});

5. 查看浏览器控制台错误 #

打开浏览器开发者工具（F12），切换到Console标签，查看是否有具体报错信息（比如Angular初始化错误、资源加载失败、$http请求异常），这些错误会直接指向问题根源。

按照以上步骤逐一排查，应该能解决脚本无法执行的问题。

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