title: Angular 2 Fusion Chart integration
body: <p>I am just starting with Angular2.I am trying to integrate <a href="http://www.fusioncharts.com/" rel="nofollow noreferrer">Fusion charts</a> with Angular2. I have installed all the necessary modules (<a href="https://www.npmjs.com/package/@types/fusioncharts" rel="nofollow noreferrer">@types/fusioncharts</a> and <a href="https://www.npmjs.com/package/fusioncharts" rel="nofollow noreferrer">fusioncharts</a>). Below is fusionchart component code.</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Http, Response } from '@angular/http';
  import * as FusionCharts from "FusionCharts";
  import '../../node_modules/fusioncharts/fusioncharts.charts.js';
  
  @Component({
      moduleId: module.id.toString(),
      templateUrl: 'fusioncharts2.component.html'
  })
  
  export class FusionChartsComponent2 {
      revenueChart: any;
  
      constructor() {
  
      }
  
      ngAfterViewInit() {
          this.chartConfig()
      }
  
      public chartConfig() {
          this.revenueChart = new FusionCharts({
              type: 'column3d',
              renderAt: 'chart-container',
              width: '500',
              height: '300',
              dataFormat: 'json',
              dataSource: {
                  "chart": {
                      "caption": "Monthly revenue for last year",
                      "subCaption": "Harry's SuperMart",
                      "xAxisName": "Month",
                      "yAxisName": "Revenues (In USD)",
                      "paletteColors": "#0075c2",
                      "valueFontColor": "#ffffff",
                      "baseFont": "Helvetica Neue,Arial",
                      "captionFontSize": "14",
                      "subcaptionFontSize": "14",
                      "subcaptionFontBold": "0",
                      "placeValuesInside": "1",
                      "rotateValues": "1",
                      "showShadow": "0",
                      "divlineColor": "#999999",
                      "divLineIsDashed": "1",
                      "divlineThickness": "1",
                      "divLineDashLen": "1",
                      "divLineGapLen": "1",
                      "canvasBgColor": "#ffffff"
                  },
  
                  "data": [
                      {
                          "label": "Jan",
                          "value": "420000"
                      },
                      {
                          "label": "Feb",
                          "value": "810000"
                      },
                      {
                          "label": "Mar",
                          "value": "720000"
                      },
                      {
                          "label": "Apr",
                          "value": "550000"
                      },
                      {
                          "label": "May",
                          "value": "910000"
                      },
                      {
                          "label": "Jun",
                          "value": "510000"
                      },
                      {
                          "label": "Jul",
                          "value": "680000"
                      },
                      {
                          "label": "Aug",
                          "value": "620000"
                      },
                      {
                          "label": "Sep",
                          "value": "610000"
                      },
                      {
                          "label": "Oct",
                          "value": "490000"
                      },
                      {
                          "label": "Nov",
                          "value": "900000"
                      },
                      {
                          "label": "Dec",
                          "value": "730000"
                      }
                  ]
              }
          });
          this.revenueChart.render();
      }
  
  }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>    import { NgModule } from '@angular/core';
      import { BrowserModule } from '@angular/platform-browser';
      import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
      import { FormsModule } from '@angular/forms';
      import { HttpModule } from '@angular/http';
      import { InputTextModule, DataTableModule, ButtonModule, DialogModule } from 'primeng/primeng';
  
      // Import angular2-fusioncharts
      import { FusionChartsModule } from 'angular2-fusioncharts';
  
      // Import FusionCharts library
      import * as FusionCharts from 'fusioncharts';
      // Import FusionCharts Charts module
      import Charts = require('fusioncharts/fusioncharts.charts');
  
  
      // used to create fake backend
      import { fakeBackendProvider } from './_helpers/index';
      import { MockBackend, MockConnection } from '@angular/http/testing';
      import { BaseRequestOptions } from '@angular/http';
  
      // Imports for loading &amp; configuring the in-memory web api
      import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
  
      import { AppComponent } from './app.component';
      import { routing } from './app.routing';
  
      import { AlertComponent } from './_directives/index';
      import { AuthGuard } from './_guards/index';
      import { AlertService, AuthenticationService, UserService, 
  HeroSearchService, HeroService, InMemoryDataService } from 
  './_services/index';
      import { CarService } from './cars/carservice';
      import { HomeComponent } from './home/index';
      import { DashboardComponent, HeroDetailComponent, HeroSearchComponent, 
      HeroesComponent } from './dashboard/index';
      import { AppChildComponent, ParentComponent } from 
      './parentchild/index';
      import { ContentComponent } from './content/index';
      import { DataTableComponent } from './datatable/index';
      import { FusionChartsComponent } from './fusioncharts/index';
      import { FusionChartsComponent2 } from './fusioncharts2/index';
      import { JqDataTableComponent } from './jqdatatable/index';
      import { JsTreeComponent } from './jstree/index';
      import { LoginComponent } from './login/index';
      import { RegisterComponent } from './register/index';
  
      import { HashLocationStrategy, LocationStrategy } from 
      '@angular/common';
  
      @NgModule({
          imports: [
              BrowserModule,
              BrowserAnimationsModule,
              FormsModule,
              HttpModule,
              InMemoryWebApiModule.forRoot(InMemoryDataService, { 
  passThruUnknownUrl: true }),
              routing,
              InputTextModule,
              DataTableModule,
              ButtonModule,
              DialogModule,
              FusionChartsModule.forRoot(FusionCharts, Charts)
          ],
          declarations: [
              AppComponent,
              AlertComponent,
              HomeComponent,
              DashboardComponent,
              FusionChartsComponent,
              FusionChartsComponent2,
              HeroDetailComponent, HeroSearchComponent, HeroesComponent,
              AppChildComponent, ParentComponent,
              ContentComponent,
              DataTableComponent,
              JqDataTableComponent,
              JsTreeComponent,
              LoginComponent,
              RegisterComponent
          ],
          providers: [
              AuthGuard,
              AlertService,
              AuthenticationService,
              UserService,
              HeroSearchService,
              HeroService,
              CarService,
              // providers used to create fake backend
              fakeBackendProvider,
              MockBackend,
              BaseRequestOptions,
              { provide: LocationStrategy, useClass: HashLocationStrategy }
          ],
          bootstrap: [AppComponent]
      })
  
      export class AppModule { }
  </code></pre>
  
  <p>I am getting below error when execute my code.</p>
  
  <pre><code>    vendor.js:28488 [HMR] Waiting for update signal from WDS...
      vendor.js:4073 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
      app.js:27495 GET http://localhost:9966/fusioncharts.charts.js (404)
      vendor.js:28300 [WDS] Hot Module Replacement enabled.
  </code></pre>
  
  <p>If I include fusionchart cdn in index.html via script or if fusionchart.js present in app folder, that error is fixed. Though fusionchart.js code is in app bundle, it always look for fusionchart.js in the root app folder. Even I tried importing by pointing to node_modules some thing like this "<strong><em>import '../../node_modules/fusioncharts/fusioncharts.charts.js';</em></strong>" still no effect. Is it proper way to include js via script tag in html? Any other way to fix this error?</p>