AngularJS项目出现404资源加载错误，请求协助排查

开发者阿泽

2026-5-20

排查AngularJS路由模板404错误的常见原因

我帮你梳理几个最可能触发这个404错误的点，都是AngularJS路由配置里容易踩的坑：

相对路径的基准搞混了：AngularJS路由里的templateUrl是相对于项目入口index.html所在的根路径，而不是你的路由配置文件所在的目录！比如如果你的路由代码放在app/user/文件夹下，但index.html在项目根目录，那你写的./views/home.html会去根目录找views文件夹，而不是app/user/views，这直接就会找不到文件。
解决办法：改成绝对路径（比如/app/user/views/home.html），或者根据index.html的位置调整相对路径，确保指向正确的文件位置。
文件路径/名称拼写错误：仔细核对文件名和文件夹名，有没有大小写不一致（比如服务器是Linux/Mac的话，Home.html和home.html是两个不同的文件），或者把views写成了view这类低级拼写错误。可以直接在浏览器地址栏输入你认为正确的模板URL（比如http://localhost:8080/app/user/views/home.html），看看能不能直接打开，能打开的话就是路由里的路径写错了。
服务器静态文件访问限制：如果你用的是本地开发服务器（比如http-server、webpack-dev-server），要确保服务器允许访问views文件夹里的静态文件。有些服务器默认只暴露根目录下的特定文件夹，如果你的views在子目录，可能需要调整服务器配置，或者把文件放到服务器允许访问的路径下。
模块依赖未正确配置：确认myNinjaApp.user这个子模块已经被正确注入到主应用模块myNinjaApp里了！如果主模块没有依赖这个子模块，那你的路由配置根本不会生效，跳转时自然找不到对应的模板。比如主模块应该是这样的：
```
angular.module('myNinjaApp', ['myNinjaApp.user']);
```

给你一个调整路径后的示例代码（假设路由文件在app/user/，index.html在项目根目录）：

(function(){ 
  'use strict'; 
  angular
    .module('myNinjaApp.user')
    .config(config)

  config.$inject = ['$routeProvider']

  function config($routeProvider) {
    $routeProvider
      .when('/user/home',{
        templateUrl:'app/user/views/home.html' // 调整为相对于index.html的正确路径
      })
      .when('/user/directory',{
        templateUrl:'app/user/views/directory.html'
      })
      .otherwise({
        redirectTo:'/user/home'
      })
  }
})();

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