Angular应用运行时出现[$injector:modulerr]错误的排查求助

阿华AIGC实验室

2026-4-2

问题总结

你遇到的[$injector:modulerr]是AngularJS最常见的初始化错误之一，本质是Angular无法正确加载或初始化指定的contactApp模块，通常由脚本加载异常、代码语法错误、模块/控制器初始化失败这类原因导致。结合你提供的代码，我来逐一分析问题点和修复方案：

一、核心错误原因排查与修复

1. 脚本加载顺序错误

你当前的脚本加载顺序是AngularJS → jQuery → 自定义JS，但AngularJS若要依赖jQuery（比如你的代码中使用了$），需要先加载jQuery，再加载AngularJS——否则Angular会使用内置的jqLite，后续依赖jQuery的代码可能报错，直接中断模块初始化。

修复：调整加载顺序

<!-- 先加载jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 再加载AngularJS -->
<script src="/SiteAssets/angularjs/angular.min.js"></script>
<!-- 最后加载自定义控制器脚本 -->
<script src="/SiteAssets/TourRequest/Final/contact.js"></script>

2. HTML指令拼写错误

你把ng-cloak写成了ng-cloack（少了一个c），这个拼写错误会导致Angular无法识别指令，解析DOM时抛出异常，进而中断模块初始化流程。

修复：修正指令拼写

<ng-form class="ang-form" name="contactForm" ng-controller="formCtrl" ng-cloak>

3. SharePoint环境变量未做存在性检查

你的contact.js中直接使用了MSOWebPartPageFormName变量，但这个变量仅在SharePoint编辑模式下才存在，普通浏览模式下会抛出ReferenceError，直接中断控制器初始化。

修复：先判断变量存在性再使用

(function (){
  var contactApp = angular.module('contactApp', []);
  contactApp.controller('formCtrl', ['$scope', '$http', function($scope, $http){
    // 先判断SharePoint编辑模式变量是否存在
    var inDesignMode = false;
    if (typeof MSOWebPartPageFormName !== 'undefined' && document.forms[MSOWebPartPageFormName]) {
      inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value === "1";
    }
    if (inDesignMode) {
      $(':input').removeAttr('required')
    }
    // 剩余代码保持不变
    $scope.user = {} 
    $scope.reset = function(){ 
      $scope.user = {} 
    }
    // ... 提交逻辑代码
  }]);
})();

4. 脚本路径有效性验证

务必确认以下脚本路径指向的文件真实存在且可访问：

/SiteAssets/angularjs/angular.min.js：直接在浏览器地址栏打开该URL，确认AngularJS文件能正常加载
/SiteAssets/TourRequest/Final/contact.js：检查路径是否拼写正确，文件内部无语法错误

二、次要问题（不直接导致模块错误，但会引发后续功能失效）

除了核心问题，还有几个细节错误需要修正，避免后续功能异常：

ng-required指令写法错误
原代码中ng-required="user.name"是错误的，ng-required需要绑定布尔值，正确写法：
```
<input name="fullName" ng-model="user.name" ng-required="true">
```
表达式变量名错误
文本域下方的剩余字符计算，要与ng-model对应，使用user.description而非Description：
```
<span>{{250 - (user.description?.length || 0) || 250}} left</span>
```
（添加?.和|| 0是为了避免用户未输入时显示NaN）
input标签重复name属性
邮箱输入框写了两个name属性，删除重复项：
```
<input name="userEmail" ng-model="user.email" required>
```