AngularJS引入users、groups模块时出现'Require is not defined'错误的解决方案

这个Require is not defined错误本质上是浏览器本身不支持CommonJS的require()语法，大概率是你混用了模块加载方式，或者没给项目配置好对应的模块加载环境。结合你的场景和代码，我给你两种针对性的解决思路：

一、最直接的方案：全局脚本顺序加载（无需模块加载器） #

AngularJS本身是基于全局模块系统设计的，如果你没有刻意使用RequireJS这类工具，完全可以通过调整HTML的脚本加载顺序来解决依赖问题：

1. 严格按依赖顺序引入脚本
   在你的主HTML文件里，必须遵循「核心库→依赖模块→自定义子模块→主应用模块」的顺序加载：

   <!-- 先加载AngularJS核心库 -->
   <script src="angular.js"></script>
   <!-- 再加载ngRoute模块（你的两个子模块都依赖它） -->
   <script src="angular-route.js"></script>
   <!-- 加载groups模块脚本 -->
   <script src="appGroup.js"></script>
   <!-- 加载users模块脚本 -->
   <script src="appUser.js"></script>
   <!-- 最后加载整合两个子模块的主应用脚本 -->
   <script src="mainApp.js"></script>
   

2. 主模块直接注入子模块依赖
   在主应用模块里，不用写require()，直接把两个子模块作为依赖注入即可：

   // mainApp.js
   // 注意替换成你实际的users模块名称
   let mainApp = angular.module('mainApp', ['myNinjaAppforGroup', 'myNinjaAppforUser']);
   

二、如果需要用模块加载器（以RequireJS为例） #

如果你项目确实需要用RequireJS管理模块依赖，那得把所有模块都改成符合AMD规范的写法，同时配置好RequireJS：

1. 引入RequireJS并配置路径
   在HTML里引入RequireJS，并指定主配置文件：

   <script src="require.js" data-main="main.js"></script>
   

   在main.js里配置路径和依赖垫片：

   require.config({
     // 配置各个库和模块的实际路径
     paths: {
       'angular': 'path/to/angular',
       'angular-route': 'path/to/angular-route',
       'appGroup': 'path/to/appGroup',
       'appUser': 'path/to/appUser'
     },
     // 处理非AMD规范模块的依赖关系
     shim: {
       'angular-route': { deps: ['angular'] },
       'appGroup': { deps: ['angular-route'] },
       'appUser': { deps: ['angular-route'] }
     }
   });
   
   // 加载依赖并启动主应用
   require(['angular', 'appGroup', 'appUser'], function(angular) {
     angular.module('mainApp', ['myNinjaAppforGroup', 'myNinjaAppforUser']);
     // 手动启动Angular（用RequireJS时不要用ng-app指令）
     angular.bootstrap(document, ['mainApp']);
   });
   

2. 修改子模块为AMD规范
   把你的appGroup.js改成AMD模块写法：

   define(['angular', 'angular-route'], function(angular) {
     let myNinjaAppforGroup = angular.module('myNinjaAppforGroup',['ngRoute']); 
     myNinjaAppforGroup.config(['$routeProvider',function($routeProvider) { 
       // 这里写你的路由配置代码
     }]);
     return myNinjaAppforGroup;
   });
   

   你的appUser.js也要做同样的修改。

几个避坑提示 #

• 不要混用全局模块和RequireJS引入方式，要么全用全局顺序加载，要么全用AMD规范，不然很容易出现依赖混乱
• 检查模块名称的拼写，AngularJS对模块名称的大小写和拼写是严格匹配的
• 确保angular-route.js文件正确加载，它是AngularJS的单独扩展模块，不是核心库自带的

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