Angular 模块不是函数 - Highcharts-ng 出现在 .aspx 网络表单上

Question

我正在尝试创建一个 C# Web 应用程序并将我的 html 代码移至 .aspx 文件。我导入了 highcharts 并添加了 Angular JS 脚本。除了 highcharts 之外，一切似乎都在工作。当我测试它时，它似乎在 .html 文件上工作正常，但它在 .aspx 文件上不起作用吗？

块错误：

Uncaught TypeError: angular.module(...).component is not a function at highcharts-ng.js:28 at highcharts-ng.js:227

<head>
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <title></title>
    <script src="Scripts/jquery-3.0.0.min.js"></script>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="js/popper.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/angular.min.js"></script>
    <script src="http://code.highcharts.com/stock/highstock.js"></script>
    <script src="js/highcharts-ng.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"/>
    <link rel="stylesheet" href="css/style.css"/>
      <script src="js/app.js"></script>
</head>

以上是我添加的脚本的顺序。除了我的 highchart 之外，一切看起来都正常。

                <div class="tab-pane active" id="chart" >
              <div class="row">
                 <highchart id="chart1" config="chartConfig" class="span9"></highchart>
               
                  
              </div>
           </div>

我收到一条警告：“验证 (HTML5)：不支持元素 'highchart'”

Angular JS (app.js) 片段：

    var myapp = angular.module('myapp', ["highcharts-ng"]);


myapp.controller('myctrl', function ($scope, $http ) {}

我似乎已将所有内容迁移到新应用程序，但出于某种原因，我的图表没有显示它在 .html 文件中的方式

需要注意的一件事Angular JS 正在运行，因为我的 Web 表单上有以下代码，它正在运行并向我显示了图表配置。它只是不显示图表：

    <div class="row-fluid" >
                <pre data-ng-show="!prettyJSON">
{{ chartConfig }}
  </pre>
             </div>

已调试 highcharts-ng-js 及其错误：

angular.module('highcharts-ng', [])
      .component('highchart', {     ///ERROR HERE
        bindings: {
          config: '=',
          changeDetection: '<',
          disableChangeDetection: '<'
        },
        controller: H

说 highchart 不是函数

调试示例代码：https://github.com/brpyne/AngularHighcharts 我有 html 类似于此 github 的文件，我正在尝试将其移至 C# Web 表单应用程序！我已将我的 html 代码移动到一个 aspx 文件中。我这边也发生了同样的问题 - 它无法识别 highchart 标签！

Answer 1

代码本身运行正常，一切都是由不正确的导入引起的。我注意到您正在尝试导入 Scripts 文件夹中不存在的文件（例如 Angular）。但这不是唯一的问题，Highcharts v.2.2.5 它是一个非常旧的版本（当前版本是 8.2.0）有问题所以我建议尝试较新的版本。

更新导入和 Highcharts 版本后，我能够成功运行你的项目。

<head>
   <title>Angular Highcharts</title>
   <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
   <script src="Scripts/highcharts/highcharts.src.js"></script>
   <script src="Scripts/angular-highcharts.js"></script>
</head>

现场演示：
https://jsfiddle.net/BlackLabel/ew0p568u/

Angular 模块不是函数 - Highcharts-ng 出现在 .aspx 网络表单上

Angular Module Is not a function - Highcharts-ng appearing on .aspx web form

c#

web-applications

highcharts

angularjs