Angular 6 Prod Function calls are not supported in decorators but '..Module' was called

Question

I have this error when trying to use angular2-json-schema-form & build in prod

ERROR in Error during template compile of 'DemoModule' Function calls are not supported in decorators but 'JsonSchemaFormModule' was called. I found out that the the error comes from:

@NgModule({
  declarations: [ AceEditorDirective, DemoComponent, DemoRootComponent ],
  imports: [
    BrowserModule, BrowserAnimationsModule, FlexLayoutModule, FormsModule,
    HttpClientModule, MatButtonModule, MatCardModule, MatCheckboxModule,
    MatIconModule, MatMenuModule, MatSelectModule, MatToolbarModule,
    RouterModule.forRoot(routes),

    NoFrameworkModule, MaterialDesignFrameworkModule,
    Bootstrap3FrameworkModule, Bootstrap4FrameworkModule,

    JsonSchemaFormModule.forRoot(   // the source of the Error
      NoFrameworkModule,
      MaterialDesignFrameworkModule,
      Bootstrap3FrameworkModule,
      Bootstrap4FrameworkModule
    )
  ],
  bootstrap: [ DemoRootComponent ]
}) 

In the source code of the library they use something like this:

export class JsonSchemaFormModule {
  static forRoot(...frameworks): ModuleWithProviders {
    const loadFrameworks = frameworks.length ?
      frameworks.map(framework => framework.forRoot().providers[0]) :
      [{ provide: Framework, useClass: NoFramework, multi: true }];
    return {
      ngModule: JsonSchemaFormModule,
      providers: [
        JsonSchemaFormService, FrameworkLibraryService, WidgetLibraryService,
        ...loadFrameworks
      ]
    };
  }
}

When I remove the variable loadFramworks I don't have the error but I can't seem to in inject the frameworks in the providers attribute

Answer 1

It's a problem with AOT as the other answer says. The functions that are called in a decorator like @NgModule must be amenable to static analysis by the compiler. The exact requisites for that are tricky as they depend on a number of factors and versions of the libraries and tools in use.

When the offending function is in a library you own, there's room for action. In my case, for example, I resolved to removing all local variables from the function, reducing it to a single return statement of a complex expression with no function calls except RouterModule.forRoot which is known to work. See for example the commit "make withConfig AOT compatible" in the Angular Flex Layout project. Playing with the angular compiler options in tsconfig.lib.json is also documented to work by some commenters on Angular's GitHub issues.

In your case, though, it looks like you're not in control of the offending module and function. You should definitely report it to the module's developers.

Answer 2

I had the same problem when build with aot = true. First you have to load module Bootstrap4FrameworkModule.

The solution method I found:

import { JsonSchemaFormModule, Bootstrap4FrameworkModule, JsonSchemaFormService, FrameworkLibraryService, WidgetLibraryService } from 'angular2-json-schema-form';

@NgModule({
declarations: [
  testComponent
],
import:[
  testRoutingModule,
  Bootstrap4FrameworkModule.forRoot(), {
            ngModule: JsonSchemaFormModule,
            providers: [
                JsonSchemaFormService, FrameworkLibraryService,
                WidgetLibraryService,
            ]
        }

}),
export class testModule{}