title: How to enable noData with highcharts and angular
body: <p>I would like to enable the "noData" functionality, which by default displays a message when there's no data to be shown in the chart. It says in their docs that the feature requires the file <code>no-data-to-display.js</code> to be loaded in the page.</p>
  
  <p>I already have this file in my node_modules/highcharts folder, but I'm not sure how I should load it from there, so I would like to know how to do that as well. For now, I have loaded it by adding this script tag to my <code>index.html</code>:</p>
  
  <pre><code>&lt;script src="http://code.highcharts.com/modules/no-data-to-display.js"&gt;&lt;/script&gt; 
  </code></pre>
  
  <p>It gives me the following error:</p>
  
  <pre><code>Uncaught ReferenceError: Highcharts is not defined
      at no-data-to-display.js:10
      at no-data-to-display.js:10
  </code></pre>
  
  <p>Here is all highcharts related stuff in my <code>app.module.ts</code></p>
  
  <pre><code>import { ChartModule } from 'angular2-highcharts';
  import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
  import * as Highcharts from 'highcharts';
  
  imports: [
      ChartModule,
  ],
  providers: [{
      provide: HighchartsStatic,
      useValue: Highcharts
  }]
  </code></pre>
  
  <p>Thanks.</p>
  
  <p>EDIT:</p>
  
  <p>I've tried to import the no-data file in my <code>app.module.ts</code>:</p>
  
  <pre><code>import HighchartsNoDataToDisplay from 'highcharts/modules/no-data-to-display.src.js';
  </code></pre>
  
  <p>I am not sure what the next step is. Adding HighchartsNoDataToDisplay to the imports array gives me an error. </p>