SPO React Script Editor Webpart首次加载报AngularJS FormCtrl未定义错误

这个首屏偶发报错的核心原因是现代页SPFx脚本编辑器和经典页内容编辑器的脚本加载逻辑存在本质差异：

• 经典SharePoint 2013环境下，内容编辑器引用的HTML中声明的script标签是同步阻塞解析的，浏览器严格按照标签书写顺序依次加载、执行脚本，所有脚本执行完成后才会触发AngularJS通过ng-app指令的自动启动流程，不存在时序问题。
• 迁移到SPO现代页后，React Script Editor在React组件挂载阶段动态向页面注入HTML和脚本标签，动态创建的script标签默认走异步加载模式，不会严格按照书写顺序阻塞执行。首次冷加载无本地缓存时，存放在SharePoint文档库的JS文件受网络调度、资源响应速度影响，很容易出现FormCtrl控制器所在脚本还没执行完，AngularJS就已经触发自动启动的情况，直接抛出"控制器不是函数、未定义"的错误。

手动刷新后所有JS资源都命中本地HTTP缓存，加载耗时从几百毫秒降到几毫秒，脚本执行顺序刚好和书写顺序一致，Angular启动时所有控制器、服务都已经注册完成，因此功能完全正常。

方案1：废弃自动启动，手动控制Angular初始化时机（最稳定） #

1. 首先把应用根元素上的ng-app="myApp"属性删掉，禁止AngularJS在脚本未加载完成时自动启动。
2. 在所有脚本引用的最后，加上如下手动启动代码，确保所有控制器、服务、常量都注册完成后再启动Angular应用：

function initMyApp() {
  const appRoot = document.getElementById('your-app-container-id'); // 替换为页面上Angular应用挂载的DOM元素ID
  // 校验核心依赖、控制器是否已完成注册
  if (
    window.angular 
    && angular.module('myApp')
    && angular.module('myApp')._invokeQueue.some(registerItem => 
      registerItem[0] === '$controllerProvider' 
      && registerItem[2][0] === 'FormCtrl'
    )
  ) {
    angular.bootstrap(appRoot, ['myApp']);
    return;
  }
  // 未加载完成则延迟重试
  setTimeout(initMyApp, 80);
}

// 触发初始化
if (document.readyState === 'complete') {
  initMyApp();
} else {
  window.addEventListener('load', initMyApp);
}

方案2：强制脚本按顺序加载 #

如果不想修改原有Angular启动逻辑，就给所有引用的script标签显式加上async="false"属性，强制浏览器按照标签书写顺序执行脚本，避免异步加载导致的顺序错乱。示例写法：

<!-- 第三方依赖按顺序引用 -->
<script src="/sites/目标网站地址/SiteAssets/scripts/jquery.min.js" async="false"></script>
<script src="/sites/目标网站地址/SiteAssets/scripts/angular.min.js" async="false"></script>
<script src="/sites/目标网站地址/SiteAssets/scripts/angular-route.min.js" async="false"></script>
<!-- 自定义业务脚本按顺序引用 -->
<script src="/sites/目标网站地址/SiteAssets/scripts/app.js" async="false"></script>
<script src="/sites/目标网站地址/SiteAssets/scripts/config.js" async="false"></script>
<script src="/sites/目标网站地址/SiteAssets/scripts/data-service.js" async="false"></script>
<script src="/sites/目标网站地址/SiteAssets/scripts/form-controller.js" async="false"></script>

注意：所有自定义脚本、资源文件统一存放到网站集Site Assets库，不要存放在Pages库，避免Pages库的版本发布、审批机制导致首次加载时偶发拉取到空的未发布资源。

打开浏览器开发者工具，在网络面板勾选「禁用缓存」模拟首次冷加载场景，观察业务JS文件的执行顺序，确认form-controller.js执行时间早于Angular启动时间即可复现、确认根因。

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