angular - Angualr2/4 -Unable to generate highchart -

i new using angular 2/4 , highchart npm called (angular2-highcharts ) can found here (https://github.com/gevgeny/angular2-highcharts)) angular 4.

i able install angular-highchart npm. when tried various suggestion incorporate highchart generate charts using angular2-highcharts failed. limited psuedo examples not helpful tired according forum suggestion here angular2-highchart https://github.com/gevgeny/angular2-highcharts/issues/176, not of help.

and getting bunch of errors when tried mentioned in forum links.

how can create various(pie, line, candle) charts using highchart angular 4?

here code below:

uw-chart.ts

import { component, oninit }              '@angular/core'; import { router }                         '@angular/router'; import { uwservice }        '../../service/uw.service'; // import { underwritermodel } "app/underwriter/model/underwriter.model"; import { loanmodel } "app/underwriter/model/loan.model"; import { chartmodule } 'angular2-highcharts'; import { chartmodel } "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 }                    '@angular/core'; import { commonmodule }                '@angular/common'; import { formsmodule}                  '@angular/forms'; import { materialmodule }              '@angular/material'; import { mdradiomodule }               '@angular2-material/radio'; import { flexlayoutmodule }            '@angular/flex-layout'; import 'hammerjs';  import { sharedmodule }                '../shared/shared.module'; import { chartmodule }            'angular2-highcharts';   import { highchartsstatic } 'angular2-highcharts/dist/highchartsservice';  import { uwroutingmodule }             './uw-routing.module';   import { uwservice }                   './service/uw.service'; // import { inputmaskservice }            './service/input-mask.service';  import { uwdashboardcomponent }        './ui/uw-dashboard/uw-dashboard.component';  import { uwfootercomponent }           './ui/uw-footer/uw-footer.component';  import { uwheadercomponent } './ui/uw-header/uw-header.component';   import { uwbsaamlcomponent } "app/underwriter/ui/uw-bsa-aml/uw-bsa-aml.component";  import { uwchartscomponent } "app/underwriter/ui/uw-charts/uw-charts.component";   import * highcharts 'highcharts'  import * highchartsmore '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 { } 

building line chart angular 4 cli project , angular2-highcharts

install angular2-highcharts using

npm install angular2-highcharts --save 

import following in app.module

import { chartmodule} 'angular2-highcharts'; import { highchartsstatic } 'angular2-highcharts/dist/highchartsservice'; import * highcharts 'highcharts/highstock'; 

export highchartsfactory() in app.module.ts

export function highchartsfactory() {   return highcharts; } 

add chart module in imports array.

imports: [     ...     chartmodule,     ...   ], 

in providers array add following:

providers: [{     provide: highchartsstatic,     usefactory: highchartsfactory   }], 

now set use angular2-highcharts. add following in component.html

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

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

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

wiki