Search code examples
c#angularjshighchartsweb-applications

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

I am trying to create a C# Web Application and moved my html code to the .aspx file. I have imported highcharts in and added Angular JS scripts. Everything seems to be working except the highchart. It seems to work fine on the .html file when I test it but is it not working on the .aspx file.

Block error:

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>

Above is the order of scripts I have added in. Everything looks to be working except my highchart.

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

I am getting a warning: 'Validation (HTML5): Element 'highchart' is not supported'

Angular JS (app.js) snippet:

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


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

I seem to have migrated everything over to the new application but for some reason my chart is not showing the way it is on the .html file

One thing to note Angular JS is working because i have the following code on my web form and this is working and showing me the chart config. Its just not displaying the chart:

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

debugged highcharts-ng-js and its erroring:

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

saying highchart is not a function

Example code for debugging: https://github.com/brpyne/AngularHighcharts I have html file similar to this github and I am trying to move it over to A C# Web Form Application! I have moved my html code into an aspx file. The same happens issue happens on my side - it doesnt recognise the highchart tag!

Solution

  • The code itself is working correctly, everything is caused by incorrect imports. I have noticed that you are trying to import files that don't exist in the Scripts folder (for example Angular). But that is not the only problem, there is something wrong with the Highcharts v.2.2.5 its a really old release (the current version is 8.2.0) so I would suggest to try the newer version.

    I was able to successfully run your project after updating the imports and the Highcharts version.

    <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>

    Live demo:
    https://jsfiddle.net/BlackLabel/ew0p568u/