未捕获的错误：[$injector:modulerr] 使用 Angular JS 和 highcharts-ng答案

【问题标题】：Uncaught Error: [$injector:modulerr] using Angular JS and highcharts-ng未捕获的错误：[$injector:modulerr] 使用 Angular JS 和 highcharts-ng
【发布时间】：2016-10-06 08:04:25
【问题描述】：

我在 Angular/Node/Express 应用程序中实现 Highcharts 时遇到问题。使用 highcharts-ng 指令https://github.com/pablojim/highcharts-ng

我的控制台中不断出现以下错误：

angular.js:38 未捕获的错误：[$injector:modulerr]http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=stocksApp&p1=Error%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min。 js%3A20%3A390)

我在 index.html 的头部有这个：

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!--link custom CSS file -->
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <script src="/js/app.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>   
</head>

我的模板文件：

<div class="container">

    <highchart id="chart1" config="chartConfig"></highchart>

</div>

我的 Angular JS 配置：

angular.module("stocksApp", ['ngRoute', 'highcharts-ng'])
   .config(function($routeProvider){
    $routeProvider
        .when("/", {
           templateUrl: "stocks.html",
           controller: "mainController",

        });
})

谁能帮我看看这个错误是怎么回事？

【问题讨论】：

您的<script> 标签中似乎没有包含highcharts-ng.js？
真的！你可能需要在 app.js 之前包含你的库
我需要包含 highcharts-ng.js 脚本标签吗？我用 npm 安装： npm install highcharts-ng
我也尝试将
是的，您需要，它将在您的node_modules 目录中，您需要包含为<script src="path_to_your_node_modules/folder_name/highcharts-ng.js"

标签： javascript angularjs node.js highcharts highcharts-ng

【解决方案1】：

我假设您已经从Node 安装了highcharts-ng.js，并且您似乎没有在<script> 块中包含相同的内容。您可以在 node_modules 目录下找到它。

正如 Steve Pitis 指出的那样，您需要在包含 app.js 脚本之前移动您的 <script src="https://code.highcharts.com/highcharts.js"></script>。

希望这会有所帮助！

【讨论】：

谢谢！我的 index.html 位于 /public 文件夹中，并且包含了一个类似的脚本。但是我得到一个 404 说 myapp.com/app/node_modules/highcharts-ng/dist/highcharts-ng.js 不存在....
您是否维护一个public 目录来为您的css、js 文件提供服务？
是的，我愿意！带有 2 个子文件夹 css 和 js 的公共文件夹。我应该在那里复制 highcharts-ng.js 吗？
好的.. 在这种情况下，将您的 highcharts-ng.‌js 放入您的 js 文件夹中的 public 并以您通常的方式将其包含在您的代码中。