angular2-json-schema-form: AOT compilation error: Function calls are not supported in decorators but 'JsonSchemaFormModule' was called.

Issue type

I’m submitting a (check one): [x ] Bug report [ ] Feature request [ ] Regression (something that used to work, but stopped working in a newer version) [ ] Support request [ ] Documentation issue or request

Prerequisites

Before posting, make sure you do the following (check all): [x ] Confirm you are using the latest versions of all necessary packages (or if not, explain why not) [ x] Search GitHub for a similar issue or PR [ x] If submitting a Support request, also search [Stack Overflow][stack-overflow] for similar issues Note: Please cross-post GitHub support requests to [Stack Overflow][stack-overflow], and include a link in your GitHub issue to your Stack Overflow question. We do currently respond to support requests on GitHub, but we eventually expect to stop, and will then refer all support questions exclusively to Stack Overflow.

Current behavior

On AOT compilation i have this error: Error: Error during template compile of 'AppModule' Function calls are not supported in decorators but 'JsonSchemaFormModule' was called.

import { JsonSchemaFormModule, MaterialDesignFrameworkModule } from 'angular2-json-schema-form';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    BrowserModule, MaterialDesignFrameworkModule,
    JsonSchemaFormModule.forRoot(MaterialDesignFrameworkModule)
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})

Expected behavior

AOT build working

IMPORTANT: How can we reproduce your problem?

Try to aot build app with angular2-json-schema-form on angular version 5.2.1.

Environment

OS name & version: Windows 10 Browser name & version: Chrome Angular version: 5.2.1 Angular JSON Schema Form version(s): 0.7.0-alpha.1

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 14
Comments: 32 (2 by maintainers)

Most upvoted comments

This workaround fixes AOT for me. In your application module, replace

JsonSchemaFormModule.forRoot(MaterialDesignFrameworkModule)

with

{
    ngModule: JsonSchemaFormModule,
    providers: [
        JsonSchemaFormService,
        FrameworkLibraryService,
        WidgetLibraryService,
        {provide: Framework, useClass: MaterialDesignFramework, multi: true}
    ]
}

This is for version 0.7.0-alpha.1. You can see what JsonSchemaFormModule.forRoot expands to by looking in json-schema-form.module.ts.

+25

viktor25 on Feb 15, 2018

I’m posting my code here as an example that implements the fix. I have a dedicated module that wraps this module, so that I can share it across other feature modules. Note that I’m using bootstrap instead of Material.

Running Angular CLI: 1.6.6, Angular 5.2


import {ModuleWithProviders, NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {JsonSchemaFormModule, Bootstrap4FrameworkModule, Framework, WidgetLibraryService, FrameworkLibraryService, JsonSchemaFormService} from 'angular2-json-schema-form';
import {BrowserModule} from '@angular/platform-browser';

@NgModule({
    imports: [
        CommonModule,
        BrowserModule,
        Bootstrap4FrameworkModule,

        {
            ngModule: JsonSchemaFormModule,
            providers: [
                JsonSchemaFormService,
                FrameworkLibraryService,
                WidgetLibraryService,
                {provide: Framework, useClass: Bootstrap4FrameworkModule, multi: true}
            ]
        }
    ],
    declarations: [DynamicFormComponent, FormsListComponent],
    exports: [DynamicFormComponent, FormsListComponent]
})

export class DynamicFormsModule {
}

stalsma on Mar 23, 2018

Could you please tell if this aot compilation issue is going to be fixed? thanks.

maksfastovets on Feb 7, 2018

I’m having the same issue, I used the above workaround and now my form won’t display at all. If I switch back to JsonSchemaFormModule.forRoot(Bootstrap4FrameworkModule) it works but then I’m getting the same error on AOT compilation. Any ideas? I’m in a pickle here.

ClaudeStephan on Apr 2, 2018

Actually I have also made a post at pull request section. This is solving the problems. Please merge that pull request ASAP 😀

sasos90 on Mar 17, 2018

Hope we can resolve this quickly. Need to use this for production apps.

kgathi2 on Feb 8, 2018

@fastovezz We are using 0.6.0-alpha.7 and saw similar issues when we tried to use it with Material. Likely because we were running version 5.0.2. In particular I recall seeing input labels not working correctly, like in this issue: #164.

Figured that bootstrap would screw other things and that downgrading Material itself would screw up a lot of other stuff for us as well.

So settled on using no framework, which works pretty well. Only caveat so far, other than the design, is that you cannot remove elements from arrays.

This however seemed fixed for us in version 0.7.0-alpha.1, with Material looking relatively good in all the examples we could find. The problem is however this issue, where we simply cannot build it for production.

Don’t really see running a JiT version of the app as an acceptable solution. Nor do I know of any work-arounds.

Koslun on Feb 2, 2018

@rmayuri a work-around is described in this PR: https://github.com/dschnelldavis/angular2-json-schema-form/pull/230#issuecomment-383591628. I haven’t tried it myself but seems legit.

If you want to use version 0.6.0-alpha.7 you need to avoid using the forRoot() function when importing the modules. So to use no external libraries for instance:

imports: [ BrowserModule, JsonSchemaFormModule ]

Koslun on Apr 23, 2018