AngularJS组件无法实例化，报错‘module’不是函数求助

错误诊断 #

你遇到的这个[$injector:modulerr]错误我之前帮人排查过好几次，核心问题出在模块依赖的写法上——AngularJS的模块注入系统只认模块名称的字符串，但你在主模块app的依赖列表里传了一个模块对象。从错误信息里的{"_invokeQueue": [],"_configBlocks":[],"_runBlocks":[],"name":"approveComponent"}就能看出来：Angular把你导出的approve模块对象当成了要实例化的模块，而它不是一个函数，所以才抛出了Argument 'module' is not a function, got Object的异常。

解决方案 #

1. 修正主模块的依赖声明

先找到你定义主模块app的代码，检查是不是像下面这样错误地传入了模块对象：

// ❌ 错误写法：直接把导入的模块对象放进依赖数组
import approve from './approveComponent';
angular.module('app', [approve]);

改成下面的正确写法：

// ✅ 正确写法：导入模块确保被加载，依赖里用模块名称字符串
import './approveComponent'; // 或者保留 import approve from './approveComponent'; 只要模块被Webpack加载即可
angular.module('app', ['approveComponent']);

2. 为什么这样能解决问题？

• AngularJS的模块系统是基于名称查找模块的，你只需要在依赖数组里写模块的名称字符串'approveComponent'，Angular会自动去查找已经注册的同名模块。
• 你写的import语句只是确保approveComponent模块被Webpack打包并加载到全局，让Angular能找到它，完全不需要把模块对象本身传给依赖列表。

额外检查点 #

• 确认你的approveComponent模块注册代码是正确的：angular.module('approveComponent', [])里的第二个参数是空数组，代表这是定义一个新模块，而不是获取已存在的模块（如果省略第二个参数才是获取）。
• 检查Webpack的入口文件是否正确包含了主模块和approveComponent的导入，确保没有遗漏导致模块未被加载。

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