Why google is not defined when I use angular-google-charts in my app, what I'm doing wrong?

Viewed 1031

I'd like to use Google Charts in my app and there is angular-google-charts module. When I want to display a chart following the documentation I get the following error:

ERROR ReferenceError: google is not defined

The error above points to this line where google.visualization.arrayToDataTable

What I did so far to get over this issue:

  • googled for it, but AngularJS related issues are mentioned
  • project GitHub page whether there is an error report, but I haven't found anything

Please find the code below:

Main module:

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        GoogleChartsModule.forRoot()
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Module where to the component belongs

@NgModule({
    declarations: [
      // ...
    ],
    imports: [
        GoogleChartsModule
    ],
    exports: [        
    ]
})
export class ContentModule {
}

Component file:

export class VersionDistributionComponent implements OnInit {

    data: any;
    chartType = 'SteppedAreaChart';
    chartData: google.visualization.DataTable;
    columnNames: Array<string>;

    constructor(
        private router: Router
    ) {
        this.chartData = google.visualization.arrayToDataTable([]);
    }

    ngOnInit() {
    }
}

Templatefile:

<p-tabPanel header="Distribution by time">
        <google-chart [type]="chartType"
                      [data]="chartData"
                      [columnNames]="columnNames"></google-chart>
</p-tabPanel>
1 Answers

Try declaring as such ::

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from 
'@angular/core';
declare var google: any;

@Component({
  selector: 'app-geo-chart-googlecharts',
  templateUrl: './geo-chart-googlecharts.component.html',
  styleUrls: ['./geo-chart-googlecharts.component.scss']
})

Might solve the issue

Related