title: Angualr2/4 -Unable to generate highchart
body: <p>I am new to using Angular 2/4 and the Highchart NPM called (angular2-highcharts ) which can be found here (<a href="https://github.com/gevgeny/angular2-highcharts" rel="nofollow noreferrer">https://github.com/gevgeny/angular2-highcharts</a>))  for Angular 4. </p>
  
  <p>I was able to install the angular-highchart npm. But when I tried the various suggestion to incorporate the HighChart to generate Charts using angular2-highcharts it failed.
   The limited psuedo examples were not very helpful but I tired according to the forum suggestion here for the angular2-highchart <a href="https://github.com/gevgeny/angular2-highcharts/issues/176" rel="nofollow noreferrer">https://github.com/gevgeny/angular2-highcharts/issues/176</a>, which was not of much help.</p>
  
  <p>And I am getting bunch of errors when I tried those mentioned in the forum links.</p>
  
  <p>How can I create various(pie, line, candle) charts using HighChart with Angular 4?</p>
  
  <p>here is my code below:</p>
  
  <p><strong>uw-chart.ts</strong></p>
  
  <pre><code>import { Component, OnInit }              from '@angular/core';
  import { Router }                         from '@angular/router';
  import { UWService }        from '../../service/uw.service';
  // import { UnderwriterModel } from "app/underwriter/model/underwriter.model";
  import { LoanModel } from "app/underwriter/model/loan.model";
  import { ChartModule } from 'angular2-highcharts';
  import { ChartModel } from "app/underwriter/model/chart.model";
  
  @Component({
    selector: 'chart',
    templateUrl: './uw-charts.component.html',
    styleUrls: ['./uw-charts.component.css', '../uw.css']
  
  })
  export class UWChartsComponent implements OnInit {
  
    public errorMessage: string;
    public isWaiting: boolean;
    public isActionArray: boolean[] = [false, false];
    public ineligibleArray: string[];
  
    public chartsArray: ChartModel[];
  
    constructor( 
      private router: Router,
      private uwService: UWService
  
    ) { }
  
    ngOnInit() {
      this.errorMessage = "";
      this.isWaiting = false;
      for( let e of this.isActionArray ) { e = false; }    
      this.chartsArray = [];
      this.initData();
    }
  
  
     initData(): void {
  
      // this.uwService.getCharts()
      //   .subscribe(
      //     (successModel: ChartModel[]) =&gt; {
      //       this.chartsArray = successModel;
      //     },
      //     error =&gt; {
      //       this.onError(error);
      //     }
      //   );
  
   this.options = {
              title : { text : 'simple chart' },
              series: [{
                  data: [29.9, 71.5, 106.4, 129.2],
              }]
          };
  
    }
      options: Object;
  
    clearErrors(): void {
      this.errorMessage = "";
    }
  
    onError(error): void 
    {
      this.isWaiting = false;
      console.log("ERROR!: " + error);
      this.errorMessage = "An unexpected error has occured. Please try again.";
    }
  
  }
  </code></pre>
  
  <p><strong>uw-chart.html</strong></p>
  
  <pre><code>&lt;div class="chart"&gt;&lt;/div&gt;
        &lt;chart [options]="options" &gt; &lt;/chart&gt;
  </code></pre>
  
  <p><em>uw-module.ts</em></p>
  
  <pre><code>import { NgModule }                    from '@angular/core';
  import { CommonModule }                from '@angular/common';
  import { FormsModule}                  from '@angular/forms';
  import { MaterialModule }              from '@angular/material';
  import { MdRadioModule }               from '@angular2-material/radio';
  import { FlexLayoutModule }            from '@angular/flex-layout';
  import 'hammerjs';
  
  import { SharedModule }                from '../shared/shared.module';
  import { ChartModule }            from 'angular2-highcharts'; 
   import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
  
  import { UWRoutingModule }             from './uw-routing.module';
  
   import { UWService }                   from './service/uw.service';
  // import { InputMaskService }            from './service/input-mask.service';
   import { UWDashboardComponent }        from './ui/uw-dashboard/uw-dashboard.component';
   import { UWFooterComponent }           from './ui/uw-footer/uw-footer.component';
   import { UWHeaderComponent } from './ui/uw-header/uw-header.component';
  
   import { UWBsaamlComponent } from "app/underwriter/ui/uw-bsa-aml/uw-bsa-aml.component";
   import { UWChartsComponent } from "app/underwriter/ui/uw-charts/uw-charts.component";
  
   import * as Highcharts from 'highcharts'
   import * as HighchartsMore from 'highcharts/highcharts-more.src.js'
   HighchartsMore(Highcharts)
  
  declare var require: any;
  export function highchartsFactory() {
      const hc = require('highcharts/highstock');
      const dd = require('highcharts/modules/exporting');
      dd(hc);
      return hc;
  }
  
  @NgModule({
    imports: [
      CommonModule,
      FormsModule,
      MaterialModule,
      FlexLayoutModule,
      SharedModule,
      UWRoutingModule,
      //ChartModule.forRoot(require('highcharts'))
      ChartModule
    ],
    declarations: [
  
       UWChartsComponent,
       UWFooterComponent,
       UWHeaderComponent
  
    ],
    entryComponents: [
  
    ],  
    providers: [
       UWService,
      // InputMaskService
      { provide: HighchartsStatic, useFactory: highchartsFactory }
    ]
  })
  export class UWModule { }
  </code></pre>