使用ui-router状态时出现Uncaught Error: [$injector:modulerr]错误求助

嘿，刚接触AngularJS和ui-router对吧？这个[$injector:modulerr]错误其实是Angular在告诉你模块加载失败了，我帮你梳理几个最常见的排查方向，你可以一步步来：

• 先确认ui-router脚本有没有正确引入
  这是最容易踩坑的原因！你得确保在HTML里，先引入AngularJS核心脚本，再引入ui-router的脚本，最后才是你的应用脚本。比如：

  <script src="angular.min.js"></script>
  <script src="angular-ui-router.min.js"></script>
  <script src="你的应用脚本文件.js"></script>
  

  要检查文件路径对不对，或者如果用CDN的话，链接是不是有效的。要是漏了这一步，Angular找不到ui.router模块，肯定会报这个错。

• 检查状态定义的语法有没有问题
  你代码里$stateProvider后面的省略部分很可能藏着语法错误，比如漏了括号、逗号，或者状态配置对象没写对。举个正确的状态定义例子：

  $stateProvider
    .state('me', {
      url: '/me',
      // 可以用template直接写内容，或者用templateUrl指定html文件
      template: '<h2>这是我的页面</h2>'
    })
    // 如果有其他状态，要确保每个state之间的链式调用没问题
    .state('other', {
      url: '/other',
      template: '<h2>其他页面</h2>'
    });
  

  哪怕是一个小括号没闭合，都会导致模块初始化失败。

• 排查有没有其他未加载的依赖
  如果你的状态里用到了自定义的控制器、服务或者其他模块，得确保那些模块已经正确引入，并且添加到tryingApp的依赖数组里。比如如果有个userModule，那模块定义应该是angular.module('tryingApp',['ui.router', 'userModule'])。

• 查看控制台的深层错误信息
  浏览器控制台里的这个错误其实可以展开，里面会有更具体的提示，比如到底是哪个依赖找不到，或者哪行代码出了问题，顺着这个线索找会更高效。

给你一个完整的可运行示例参考，你可以对比自己的代码：

app.js代码：

(function(){
  'use strict';

  angular.module('tryingApp',['ui.router'])
    .config(RoutesConfig);

  RoutesConfig.$inject = ['$stateProvider', '$urlRouterProvider'];

  function RoutesConfig($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('/me');

    $stateProvider
      .state('me', {
        url: '/me',
        template: '<h1>欢迎来到我的页面！</h1>'
      })
      .state('other', {
        url: '/other',
        template: '<h1>这是另一个页面</h1>'
      });
  }
})();

对应的HTML：

<!DOCTYPE html>
<html ng-app="tryingApp">
<head>
  <title>Angular UI-Router 测试</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.30/angular-ui-router.min.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <!-- 用来渲染状态内容的容器 -->
  <ui-view></ui-view>
  <!-- 状态跳转链接 -->
  <a ui-sref="me">回到我的页面</a> | <a ui-sref="other">去其他页面</a>
</body>
</html>

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