使用TypeScript开发AngularJS应用遇[$injector:nomod]模块错误

我来帮你排查这个[$injector:nomod]错误，这个问题在AngularJS结合TypeScript手动初始化应用时很常见，主要有几个核心原因和对应的修复方案：

问题根源分析 #

• 自动与手动初始化冲突：你的index.html里添加了ng-app="app"属性，这会让AngularJS在DOM加载完成后立刻尝试自动初始化app模块，但此时你的TypeScript代码还没完成模块注册，自然找不到模块。而你同时又在代码里用了angular.bootstrap()手动初始化应用，这两种初始化方式不能同时使用。
• 模块定义的语法瑕疵：angular.module('app',)里的多余逗号虽然不会直接报错，但不符合语法规范，而且后续添加模块依赖时容易出问题，应该明确传入空数组表示该模块无依赖。
• 初始化方法未执行：你定义了App.bootstrap()方法，但没有主动调用它，导致app模块根本没被注册到AngularJS中。

分步修复方案 #

1. 移除自动初始化标记 #

编辑你的index.html，删除<html>标签里的ng-app="app"属性，因为我们要使用手动初始化方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My AngularJS App with ts</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <sachin></sachin>
    <script src="vendors.js"></script>
    <script src="bundle.js"></script>
</body>
</html>

2. 修正模块定义并触发初始化 #

编辑app.ts，修正模块定义的语法，并在文件末尾调用App.bootstrap()方法，确保模块被注册并启动应用：

import * as angular from 'angular';
import IModule = ng.IModule;

export class App{
    public static bootstrap():void{
        // 修正多余逗号，明确传入空依赖数组
        const app : IModule = angular.module('app', []).component('sachin',{
            template:'<div>sdafdsfa</div>',
            controller:[function(){ }],
            controllerAs:'vm'
        });
        // 手动启动应用，注意去掉配置项末尾的多余逗号
        angular.bootstrap(document, ["app"], { "strictDi": true });
    }
}

// 调用初始化方法，触发模块注册和应用启动
App.bootstrap();

3. 验证打包配置 #

确保你的打包工具（比如Webpack、Rollup等）正确将TypeScript代码编译为JavaScript，并打包到bundle.js中，同时确认vendors.js已经包含了完整的AngularJS库代码。

额外注意事项 #

• 你启用了strictDi: true，这个配置要求所有控制器必须使用数组注入语法（你已经正确这么做了），这个配置能帮你避免依赖注入的潜在问题，建议保持。
• 如果你的打包工具将代码封装在模块作用域内，导致App类无法在全局访问，那么一定要在app.ts末尾直接调用App.bootstrap()，不要在index.html里手动调用。

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