时间戳

首页 > 解决方案 > 未捕获的错误：[$injector:modulerr] 错误：[$injector:nomod] 模块“chart.js”不可用

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

问题描述

我正在尝试为 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>

标签： javascriptangularjschart.js

解决方案

在标记之前加载脚本是这个顺序</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>

然后加载你的脚本。

推荐阅读