已声明AngularJS模块myApp却实例化失败，求问题排查

我帮你梳理了下代码里的问题，结合你遇到的报错，大概率是以下几个常见原因导致的，给你逐个拆解并给出修复方案：

1. 脚本位置不对，Angular初始化时找不到模块 #

你的代码里，Angular模块定义的脚本是放在ng-app所在的<div>内部的——这会导致Angular在尝试初始化myApp模块的时候，你的脚本还没被浏览器解析执行，自然就找不到这个模块了。

修复方法：
把你的Angular脚本移到ng-app元素的外面，最好放在<body>标签的末尾（或者<head>里，确保在ng-app元素加载前就执行）。比如调整后的结构：

<div ng-app="myApp">
  <points></points>
  <script type="text/ng-template" id="pointstemplate">
    rgrgerg
  </script>
</div>

<!-- 把Angular脚本放在这里 -->
<script>
angular
  .module('myApp', [])
  .component('points', {
    templateUrl: 'pointstemplate',
    controllerAs: 'viewModel',
    controller: function(){
      // 这里要写完整的控制器逻辑，别留语法不完整的代码
    }
  });
</script>

2. 代码存在语法错误，导致模块无法正常定义 #

你提供的代码片段里，控制器函数写的是function(){ ...，如果实际代码里这里是未闭合的括号、缺少分号这类语法问题，会直接导致JavaScript解析失败，Angular也就没法识别到你定义的myApp模块了。

修复方法：
确保控制器代码语法完整，比如补全括号和必要的逻辑：

controller: function(){
  // 举个例子，添加简单的组件逻辑
  this.content = '这是组件的内容';
}

3. 忘记引入AngularJS核心库 #

如果你的运行环境里没有正确引入AngularJS的核心库，Angular根本没法工作，自然会报模块找不到的错误。

修复方法：
在页面的<head>里添加AngularJS的引入脚本：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

验证修复后的完整代码 #

把这些调整整合后，完整的可运行代码应该是这样的：

<!DOCTYPE html>
<html>
<head>
  <!-- 先引入AngularJS库 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
  <div ng-app="myApp">
    <points></points>
    <script type="text/ng-template" id="pointstemplate">
      {{ viewModel.content }}
    </script>
  </div>

  <!-- 然后定义模块和组件 -->
  <script>
    angular
      .module('myApp', [])
      .component('points', {
        templateUrl: 'pointstemplate',
        controllerAs: 'viewModel',
        controller: function(){
          this.content = '组件加载成功啦！';
        }
      });
  </script>
</body>
</html>

按照上面的步骤调整后，myApp模块就能正常实例化，你的组件也能正确渲染了。

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