未捕获的错误：[$injector:modulerr] 错误：[$injector:nomod] 模块“chart.js”不可用

Question

我正在尝试为 Angular Charts 重新创建一些在线示例，但我遇到了来自控制台的错误。 错误指出：

未捕获的错误：[$injector:modulerr] 无法实例化模块 chartDemo 由于：错误：[$injector:modulerr] 无法实例化模块 chart.js 由于：错误：[$injector:nomod] 模块 'chart.js' 是无法使用！ 您拼错了模块名称或忘记加载它。 如果注册模块，请确保将依赖项指定为第二个参数。

我已经在 AngularCharts.js 之前加载了 Charts.js，如对类似问题的一些答案所述。 我可以得到一些关于为什么这个错误仍然存​​在的帮助吗？

 <div ng-app="chartDemo" ng-controller="MainController as mainCtrl"> <canvas id="doughnut" class="chart chart-doughnut" chart-data="mainCtrl.data" chart-labels="mainCtrl.labels" chart-options="mainCtrl.options"> </canvas> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.2/angular-chart.min.js"></script> <script> angular.module('chartDemo', ['chart.js']) .config(['ChartJsProvider', function(ChartJsProvider) { // Configure all charts ChartJsProvider.setOptions({ //animation: false, //responsive: false }); }]) .controller('MainController', MainController); function MainController($scope, $timeout) { var vm = this; vm.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"]; vm.data = [300, 500, 100]; vm.options = { legend: { display: true, position: 'bottom' }, cutoutPercentage: 60, tooltipEvents: [], tooltipCaretSize: 0, showTooltips: true, onAnimationComplete: function() { self.showTooltip(self.segments, true); } } } MainController.$inject = ['$scope', '$timeout']; </script>

Answer 1

在</body>标签之前加载脚本是这个顺序：Angular -> Chart.js -> angular-charts

您已经在</body>标签之后加载了脚本

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.2/angular-chart.min.js"></script>

然后加载你的脚本。