Angualr2/4 -Unable to generate highchart

Question

I am new to using Angular 2/4 and the Highchart NPM called (angular2-highcharts ) which can be found here ( https://github.com/gevgeny/angular2-highcharts )) for Angular 4.

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 https://github.com/gevgeny/angular2-highcharts/issues/176 , which was not of much help.

And I am getting bunch of errors when I tried those mentioned in the forum links.

How can I create various(pie, line, candle) charts using HighChart with Angular 4?

here is my code below:

uw-chart.ts

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[]) => {
    //       this.chartsArray = successModel;
    //     },
    //     error => {
    //       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.";
  }

}

uw-chart.html

<div class="chart"></div>
      <chart [options]="options" > </chart>

uw-module.ts

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

Answer 1

Building a line chart with angular 4 cli project and angular2-highcharts

Install angular2-highcharts using

npm install angular2-highcharts --save

Import the following in app.module

import { ChartModule} from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import * as highcharts from 'highcharts/highstock';

Export highchartsFactory() in app.module.ts

export function highchartsFactory() {
  return highcharts;
}

Add chart module in imports array.

imports: [
    ...
    ChartModule,
    ...
  ],

In the providers array add the following:

providers: [{
    provide: HighchartsStatic,
    useFactory: highchartsFactory
  }],

Now you are all set to use angular2-highcharts. Add the following in the component.html

 <chart [options]="optionsLine"></chart>

In the component.ts add the following in the constructor. You should define options: any; in the file.

this.options = {
      title : { text : 'simple chart' },
      series: [{
        data: [29.9, 71.5, 106.4, 129],
      }]
    };