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

Brucie

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.

Tatianna

Caveat: The resulting single return statement in my case needed supporting comments and white space to make it human-readable again. Quick, simple fix, just don't neglect your fellow devs! – Dowsabel

Over a year now, I am wondering if this issue has been handled in the latest Angular versions – Merissa

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{} 

Kikuyu

Answer 3

Here is the solution I found. Replace import with previously defined constant and import it.

 export const routerModule = RouterModule.forChild(routes);

Coward

Answer 4

I had similar issue, i fixed it with this code below.

// @dynamic
@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatSnackBarModule
  ]
})
export class VrWidgetsModalModule {
  static forRoot(durationTime: number, position: VrWidgetsModalPositionEnum): ModuleWithProviders {
    return {
      ngModule: VrWidgetsModalModule,
      providers: [
        {provide: VrWidgetsModalService, useFactory: modalFactory, deps: [MatSnackBar, 'DURATION_TIME', 'POSITION']},
        {provide: 'DURATION_TIME', useValue: durationTime},
        {provide: 'POSITION', useValue: position}
      ]
    };
  }
}

export const modalFactory = (modal: MatSnackBar, durationTime: number, modalPosition: VrWidgetsModalPositionEnum) => {
  return new VrWidgetsModalService(modal, durationTime, modalPosition);
};

Weigh