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

ERROR in Error during template pile of 'DemoModule' Function calls are not supported in decorators but 'JsonSchemaFormModule' was called. I found out that the the error es 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

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

ERROR in Error during template pile of 'DemoModule' Function calls are not supported in decorators but 'JsonSchemaFormModule' was called. I found out that the the error es 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

• javascript
• angular
• typescript
• angular6-json-schema-form
• ajsf

4 Answers 4

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 piler. 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 plex expression with no function calls except RouterModule.forRoot which is known to work. See for example the mit "make withConfig AOT patible" in the Angular Flex Layout project. Playing with the angular piler options in tsconfig.lib.json is also documented to work by some menters 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.

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

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

 export const routerModule = RouterModule.forChild(routes);

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);
};