角度图表chart.js注入器错误答案

【问题标题】：angular chart chart.js injector error角度图表chart.js注入器错误
【发布时间】：2016-06-14 21:12:18
【问题描述】：

我正在尝试使用我的应用程序实现角度图表。我凉亭安装了 angular-chart.js 并将 chart.js 列为依赖项。但是，当我加载我的页面时，我收到以下错误：

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module chart.js due to:
Error: [$injector:nomod] Module 'chart.js' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

我的问题是：如何让这个错误消失？我已经验证图表是在 angular-chart 之前加载的，但我无法让这个错误消失。

Here is my index.html:

    <!--suppress ALL -->
<html lang="en" ng-app="app" ng-cloak>
<head>
    <meta charset="utf-8">
    <base href="/">
    <!--[if IE]><link rel="shortcut icon" href="assets/img/favicon.ico"><![endif]-->
    <link rel="apple-touch-icon-precomposed" href="assets/img/favicon.ico">
    <link rel="icon" href="assets/img/favicon.ico">
    <!-- Meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
    <meta name="description"
          content="Convenient, affordable online CPA and EA self-study CPE. Complete CPE courses in your spare time, on the go.">
    <meta name="author" content="Learning Suite Inc">
    <meta name="google-site-verification" content="3QtiwaamWrLo-A9BAx0kTgVHagRJfe0xE60hMULF12M"/>
    <meta name="fragment" content="!">

    <title update-title>Prolaera</title>

    <!-- CSS Global Compulsory -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/pricing/pricing_v6.css" media="screen" title="no title" charset="utf-8">

    <!-- Web Fonts -->
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans"/>

    <!-- CSS Header and Footer -->
    <link rel="stylesheet" href="assets/css/headers/header-v2.css">
    <link rel="stylesheet" href="assets/css/footers/footer-v1.css">
    <!-- <link rel="stylesheet" href="assets/css/headers/one.css" media="screen" title="no title" charset="utf-8"> -->

    <!-- CSS Implementing Plugins -->
    <link rel="stylesheet" href="assets/plugins/animate.css">
    <link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
    <link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/plugins/sky-forms-pro/skyforms/css/sky-forms.css">

    <!-- CSS Customization -->
    <link rel="stylesheet" href="assets/css/custom.css">
    <link rel="stylesheet" href="css/sweetalert2.css">
    <style>
        [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
            display: none !important;
        }
    </style>

    <!-- Bootstrap core CSS -->
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <!-- Bootstrap theme -->
    <link href="lib/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/>
    <!-- Angular CSP-->
    <link href="lib/angular/css/angular-csp.css" rel="stylesheet"/>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="/lib/html5shiv/html5shiv.min.js"></script>
    <script src="/lib/respond/respond.min.js"></script>
    <![endif]-->

    <!-- must be before require.js -->
    <script type="text/javascript" src="https://cdn.auth0.com/js/lock-9.1.min.js"></script>
    <script type="text/javascript" src="lib/axios/dist/axios.standalone.js"></script>
    <script type="text/javascript" src="lib/CryptoJS/rollups/hmac-sha256.js"></script>
    <script type="text/javascript" src="lib/CryptoJS/rollups/sha256.js"></script>
    <script type="text/javascript" src="lib/CryptoJS/components/hmac.js"></script>
    <script type="text/javascript" src="lib/CryptoJS/components/enc-base64.js"></script>
    <script type="text/javascript" src="lib/moment/moment.js"></script>
    <script type="text/javascript" src="lib/url-template/url-template.js"></script>
    <script type="text/javascript" src="lib/apiGatewayCore/sigV4Client.js"></script>
    <script type="text/javascript" src="lib/apiGatewayCore/apiGatewayClient.js"></script>
    <script type="text/javascript" src="lib/apiGatewayCore/simpleHttpClient.js"></script>
    <script type="text/javascript" src="lib/apiGatewayCore/utils.js"></script>
    <script type="text/javascript" src="js/apigClient.js"></script>
    <!--jquery/bootstrap needed here for calendar and collapse navbar toggle-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.css"/>
    <!-- jquery, moment, and angular have to get included before fullcalendar -->
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="bower_components/moment/min/moment.min.js"></script>
    <script type="text/javascript" src="bower_components/fullcalendar/dist/fullcalendar.min.js"></script>
    <script type="text/javascript" src="bower_components/fullcalendar/dist/gcal.js"></script>
    <!-- require -->
    <script src="lib/require/require.js"></script>

    <script type="text/javascript" src="lib/auth0-variables.js"></script>

    <!-- angularjs -->
    <link href="lib/angular/css/angular-csp.css" rel="stylesheet"/>
    <script src="lib/angular/js/angular.js"></script>
    <script type="text/javascript" src="bower_components/angular-ui-calendar/src/calendar.js"></script>
    <script type="text/javascript" src="bower_components/angular-ui-bootstrap-typeahead/ui-bootstrap-typeahead.min.js"></script>

    <link rel="stylesheet" href="bower_components/angular-bootstrap-toggle-switch/style/bootstrap3/angular-toggle-switch-bootstrap-3.css">
    <script type="text/javascript" src="bower_components/angular-bootstrap-toggle-switch/angular-toggle-switch.min.js"></script>
    <link rel="stylesheet" href="bower_components/angular-spinkit/build/angular-spinkit.min.css">
    <script src="bower_components/angular-spinkit/build/angular-spinkit.min.js"></script>
    <script src="bower_components/angular-stripe-checkout/angular-stripe-checkout.js"></script>
<!
    <script src="bower_components/Chart.js/Chart.js"></script>
    <script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>
    <link rel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css">

    <script src="lib/angular/js/angular-animate.js"></script>
    <script src="lib/angular/js/angular-ui-router.js"></script>
    <script src="lib/angular/js/angular-ui-bootstrap-tpls.js"></script>
    <script src="bower_components/angular-filter/dist/angular-filter.min.js"></script>
    <script src="https://cdn.auth0.com/w2/auth0-widget-5.js"></script>

    <script type="text/javascript" src="https://cdn.auth0.com/w2/auth0-angular-4.js"></script>
    <script src="//cdn.rawgit.com/auth0/angular-storage/master/dist/angular-storage.js"></script>
    <script src="//cdn.rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script>
    <script src="lib/sweetalert/SweetAlert.js"></script>
    <script src="lib/sweetalert/sweetalert2.min.js"></script>
    <script src="lib/smarttable/smart-table.min.js"></script>
    <script src="lib/angularsanitize/angular-sanitize.min.js"></script>
    <script src="lib/ng-file-upload/ng-file-upload.min.js"></script>
    <script src="https://cdn.auth0.com/w2/auth0-angular-4.js"></script>
    <script src="//code.angularjs.org/1.2.16/angular-cookies.min.js"></script>

    <!-- Uncomment for deployment and comment for dev -->
    <script src="js/analytics.js"></script>
    <script src="js/inspectlet.js"></script>

    <!-- Unify styling -->
    <link rel="stylesheet" href="assets/css/headers/header-v1.css">

    <!-- CSS Page Style -->
    <link rel="stylesheet" href="assets/css/pages/shortcode_timeline2.css">
    <link rel="stylesheet" href="assets/css/pages/page_pricing.css">
    <script src="js/app.js"></script>
    <script src="js/navbar-directive.js"></script>
    <script src="js/footer-directive.js"></script>

这是我的 app.js 的开头：

(function() {
    var app = angular.module('app', ['ngCookies', 'auth0', 'angular-jwt', 'angular-storage', 'ngFileUpload', 'ngSanitize', '19degrees.ngSweetAlert2', 'ui.router', 'ngAnimate', 'ui.bootstrap', 'angular-spinkit', 'angular.filter', 'stripe.checkout', 'ui.calendar', 'ui.bootstrap.typeahead', 'toggle-switch']);
    define('app', [], function() {
      return app;
    });

【问题讨论】：

您在项目中使用 Highcharts 吗？因为你已经给它贴上了标签，我找不到你在使用它的地方。
我修复了标志，我曾尝试在某一时刻使用高位图表。但是我得到了同样的错误，我已经安装了它，将它链接到我拥有 Chart.js 文件的同一位置，并将其作为依赖项注入。
在声明模块时是否注入了插件？另外，您已经加载了两次 jquery，但我看不到 angular 的加载位置。
错误已解决！ 感谢 angular-charts 的创建者，我找到了解决此错误的方法。我没有使用 Bower 组件来制作角度图表，而是使用以下 CDN：
``` cdn.rawgit.com/jtblin/angular-chart.js/master/dist/…" type="text/css" /> ```

标签： angularjs charts angular-chart

【解决方案1】：

您必须导入 chart.min.js - 如果您想使用 Chart.js 的完整版本，您必须导入 Chart.bundle.js，它可以从 chart.js 网页下载。

【讨论】：

【解决方案2】：

我有同样的问题，尝试指向一个 CDN 并且它工作正常，

然后尝试使用 node_modules 而不是 bower_components 并且效果也很好！

所以我认为凉亭版本有问题......

希望这会有所帮助！让我知道！

【讨论】：

嘿，史蒂文，node_modules 确实有效，我认为 Bower 版本有问题是对的。谢谢！