Error if I try to use angular2-google-chart with --aot option

[ekaitzht]

It looks that angular2-google-chart doesn't support Ahead-Of-Time compilation. Is true?

This is the error that angular-cli launchs when I tried to apply -aot option:

$ ng build --aot --progress --verbose

ERROR in Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in /home/ekaitz/projects/mytoolbox/mytoolbox/Application/frontend/node_modules/angular2-google-chart/node_modules/@angular/core/core.d.ts, resolving symbol ɵf in /home/ekaitz/projects/mytoolbox/mytoolbox/Application/frontend/node_modules/angular2-google-chart/node_modules/@angular/core/core.d.ts, resolving symbol ɵf in /home/ekaitz/projects/mytoolbox/mytoolbox/Application/frontend/node_modules/angular2-google-chart/node_modules/@angular/core/core.d.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/home/ekaitz/projects/mytoolbox/mytoolbox/Application/frontend/src'
 @ ./src/main.ts 4:0-74
 @ multi ./src/main.ts
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks  Chunk Names
    index.html  5.35 kB       0  

[nachomozo]

Same error here! Any solution?

[nachomozo]

In my case, it seems there is a problem with some format or annotations in the google charts directive.

I write my own directive google-chart.directive.ts from scratch, following the Angular 4 specifications, and it works:

import {Directive, ElementRef, Input, OnChanges} from '@angular/core';

declare let google: any;
declare let googleLoaded: any;
declare let googleChartsPackagesToLoad: any;

@Directive({
  selector: '[appGoogleChart]'
})
export class GoogleChartDirective implements OnChanges {

  public _element: any;
  @Input('chartType') public chartType: string;
  @Input('chartOptions') public chartOptions: Object;
  @Input('chartData') public chartData: Object;
  constructor(public element: ElementRef) {
    this._element = this.element.nativeElement;
  }
  ngOnChanges() {
    if (!googleLoaded) {
      googleLoaded = true;
      google.charts.load('current', {'packages':['corechart', 'gauge']['orgchart']});
    }
    setTimeout(() => this.drawGraph(this.chartOptions, this.chartType, this.chartData, this._element), 1000);
  }
  drawGraph (chartOptions, chartType, chartData, ele) {
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      let wrapper;
      wrapper = new google.visualization.ChartWrapper({
        chartType: chartType,
        dataTable: chartData ,
        options: chartOptions || {}
      });
      wrapper.draw(ele);
    }
  }
}

[vimalavinisha]

@nachomozo

 I have formatted code and removed commented line from decorator declaration. Could you take a recent pack v 2.2.5 and check.

[nachomozo]

I have tried the new pack and the error persists.

In AoT mode fails when compile:

ERROR in Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in /Users/xxx/development/xxx/node_modules/angular2-google-chart/node_modules/@angular/core/core.d.ts, resolving symbol ɵf in /Users/xxx/development/xxx/node_modules/angular2-google-chart/node_modules/@angular/core/core.d.ts, resolving symbol ɵf in /Users/xxx/development/xxx/node_modules/angular2-google-chart/node_modules/@angular/core/core.d.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/xxx/development/xxx/src'
 @ ./src/main.ts 4:0-74
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.

With JIT throws an error on the console:

compiler.es5.js:1689 Uncaught Error: Unexpected value 'GoogleChart' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.
    at syntaxError (http://localhost:4200/vendor.bundle.js:45559:34)
    at http://localhost:4200/vendor.bundle.js:59291:40
    at Array.forEach (native)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (http://localhost:4200/vendor.bundle.js:59273:54)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (http://localhost:4200/vendor.bundle.js:70550:70)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:70523:36)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:70452:37)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (http://localhost:4200/vendor.bundle.js:76194:25)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (http://localhost:4200/vendor.bundle.js:76180:21)
    at Object.../../../../../src/main.ts (http://localhost:4200/main.bundle.js:2033:124)

[smasherprog]

I ran into this problem as well, the fix is to add the following line to your "paths" in your tsconfig.json that is used by the cli

"@angular/": [ "../node_modules/@angular/" ]

You can see the fix here https://github.com/angular/angular-cli/issues/4647#issuecomment-305967234

[mukulsoftwap]

I have also same issue