Conditionally declare directive in Angular 2 ngModule

Question

In Angular 2 I would like to declare a directive inside my ngModule only if a global javascript variable is set to true (debug boolean).

This was working when compiling with tsc:

declare let isDebug: boolean;
let dependencyArray : any[] = [];

if ('undefined' !== typeof isDebug && isDebug) {
  dependencyArray.push(DebugDirective);
}

@NgModule({
  declarations: [AppComponent].concat(dependencyArray),
  imports: []
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

However it seems than the ngc compiler (AOT compilation) does not accept function call in module files. The following error is thrown by ngc.

Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function

I have found the various threads explaining how to use a factory with an exported function for providers (e.g. https://github.com/angular/angular/issues/11262) but I have not found how to do the same for the declaration array.

How can I solve the issue for the module declaration?

Victor Victor · Accepted Answer · 2017-07-06T21:23:17

How about exporting a function (returning an any[]) and the declaration directive pointing to the function reference.

Conditionally declare directive in Angular 2 ngModule

1 Answers