如何仅在subApp模块存在时加载它，避免AngularJS的mainApp崩溃？

我来给你几个实用的方案，解决主模块依赖子模块但子模块可能不存在时主应用崩溃的问题：

方案一：动态检测并添加依赖 #

核心思路是先判断subApp模块是否存在，再决定是否将其加入主模块的依赖列表。AngularJS中，调用angular.module('模块名')时如果模块未定义会抛出错误，我们可以用try-catch来捕获这个情况：

// 初始化依赖数组
var appDependencies = [];

try {
  // 尝试获取subApp模块，若存在则加入依赖
  angular.module('subApp');
  appDependencies.push('subApp');
} catch (error) {
  // 模块不存在时，跳过依赖添加
  console.log('subApp模块未找到，不加入主应用依赖');
}

// 创建主应用模块，传入动态生成的依赖数组
var mainApp = angular.module('mainApp', appDependencies);

这样一来，当subApp存在时会被正常引入，不存在时主应用也能顺利启动。

方案二：提前定义兜底空模块 #

如果不想修改主模块的依赖写法，可以提前定义一个空的subApp模块作为兜底。这样即使真实的subApp未加载，AngularJS也能找到这个空模块，不会报错：

// 先检查subApp是否存在，不存在则创建空模块
try {
  angular.module('subApp');
} catch (error) {
  // 创建空的subApp模块
  angular.module('subApp', []);
}

// 正常创建主应用，依赖subApp即可
var mainApp = angular.module('mainApp', ['subApp']);

这个方案的优势是主模块的写法不需要改动，只需要在主应用初始化前加入这段兜底代码。

补充：异步加载子模块的情况 #

如果subApp是通过异步脚本加载的（比如用动态创建<script>标签的方式），建议不要用ng-app指令自动启动应用，而是手动调用angular.bootstrap来启动，确保子模块加载完成后再初始化主应用：

function initializeMainApp() {
  var dependencies = [];
  try {
    angular.module('subApp');
    dependencies.push('subApp');
  } catch (e) {}

  // 定义主应用模块
  var mainApp = angular.module('mainApp', dependencies);
  
  // 手动启动AngularJS应用
  angular.bootstrap(document.body, ['mainApp']);
}

// 监听所有脚本加载完成的事件，或者在subApp加载完成后调用初始化函数
document.addEventListener('DOMContentLoaded', initializeMainApp);

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