AngularJS集成TypeScript报错：MyController控制器未注册求助

嘿，我来帮你搞定这个[$controller:ctrlreg]错误！这个问题通常是控制器的作用域、编译输出或者HTML引用环节出了问题，我给你梳理几个常见原因和解决办法：

1. 检查TypeScript编译后的代码作用域 #

如果你的TypeScript编译配置（比如tsconfig.json）里module设置成了commonjs、ES6这类模块系统，编译后的MyController类会被包裹在模块作用域里，Angular在全局找不到它。

解决办法：

• 要么把tsconfig.json的module改成none或者ES5（确保编译后代码在全局作用域）；
• 要么显式把控制器类挂到全局对象上，比如：

  window.MyController = MyController;
  

2. 给控制器添加依赖注入注解 #

虽然这不是直接导致“未注册”的原因，但能避免后续代码压缩问题，同时让Angular更清晰地识别控制器。给你的MyController加上静态$inject属性：

class MyController {
  // 声明依赖，确保Angular能正确解析构造函数参数
  static $inject = ['$scope'];
  constructor(private $scope: any) {
    this.$scope.message = { title: "Hello World!!" };
  }
}

3. 确认HTML的引用和指令设置 #

这是最容易忽略的点：

• 确保HTML里先引入AngularJS脚本，再引入编译后的JS文件，顺序错了会导致Angular还没加载就注册控制器；
• 检查ng-app指令是否设置为你的模块名shop，ng-controller是否拼写正确为MyController；

正确的HTML示例：

<html ng-app="shop">
  <body ng-controller="MyController">
    <h1>{{message.title}}</h1>
    
    <!-- 脚本引入顺序很重要 -->
    <script src="angular.min.js"></script>
    <script src="你的编译后文件名.js"></script>
  </body>
</html>

4. 确认模块注册的正确性 #

确保你没有重复定义shop模块，比如如果其他地方也写了angular.module('shop', [])（带依赖数组），会覆盖之前的模块定义，导致控制器注册丢失。如果是在其他地方引用模块，应该用angular.module('shop')（不带依赖数组）来获取已有的模块。

按照上面的步骤排查，应该就能解决控制器未注册的问题啦！

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