Angular 4 - Error encountered resolving symbol values statically

Question

One of my feature modules has this content:

declare function require(name: string);

@NgModule({
imports: [
// other modules here
ChartModule.forRoot(
  require('highcharts'),
  require('highcharts/highcharts-more'),
  require('highcharts/modules/funnel'),
  require('highcharts/modules/heatmap')
)

It runs fine locally but when I build it with the prod flag it fails. The error I get is:

ERROR in Error encountered resolving symbol values statically. Reference to a non-exported function (position 26 :18 in the original .ts file), resolving symbol ....

ERROR in ./src/main.ts Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in ...

Any idea on how to resolve this?

Answer 1

I can't point you to the exact line, because you didn't include the full @NgModule decorator. This fault is normally in the providers array, when you have something like this:

@NgModule({
// imports, exports and declarations
  providers: [{
    provide: XSRFStrategy, 
    useValue: new CookieXSRFStrategy('RESPONSE_TOKEN', 'RESPONSE_TOKEN') 
  }]
})
export class MyModule {}

You cannot use AOT when you have an inline function call like that. So instead, replace useValue with useFactory and an exported function (as stated in your error message).

Here is the AOT-safe version of my first listing:

export function xsrfFactory() {
  return new CookieXSRFStrategy('XSRF-TOKEN', 'X-XSRF-TOKEN');
}
@NgModule({
// imports, exports and declarations
  providers: [{
    provide: XSRFStrategy,
    useFactory: xsrfFactory
  }]
})
export class MyModule {}