AOT compilation error: Function calls are not supported in decorators but 'JsonSchemaFormModule' was called.

[chivalme]

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

[Koslun]

@chivalme would also add that it's a regression in the issue type. It is working in the previous version 0.6.0-alpha.7.

It's what's currently preventing us from upgrading and I imagine others new to the library from adopting it.

I am however not quite certain that this issue applies to all build configurations that use AoT as I've seen similar issues before where this was the case. It is however an issue with @angular/cli users at the very least.

[maksfastovets]

Hi @Koslun ,
Could you, please, tell, if using downgraded version 0.6.0-alpha.7 renders your schema layout neatly?

as I got this: https://photos.app.goo.gl/gemkOkHSmH98YWew2

may be I tuned something in a wrong way, of course, as I downgraded using this commit: dschnelldavis/ng-jsf-material-design-seed@cb3c532 - and I might miss something..

[stalsma]

I'm running into this issue was well. I was previously using 0.6.0-alpha.7 but was compiling with ng4.x. Upgraded to ng5.1, and upgraded this library. Runs fine when using ng serve, but blows up when using the aot compiler when building a prod build.

ERROR in Error during template compile of 'DynamicFormsModule' Function calls are not supported in decorators but 'JsonSchemaFormModule' was called.

[Koslun]

@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.

[maksfastovets]

@Koslun thank you.

[maksfastovets]

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

[kgathi2]

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

[jaan]

I get the same error during aot compilation but not during ng serve

ERROR in Error during template compile of 'AppModule' Function calls are not supported in decorators but 'JsonSchemaFormModule' was called.

It's an important issue as we can't do prod builds. Hope it gets prioritized.

[johnedvard]

This issue is the reason I am developing my own schemabuilder. Having this issue fixed would make a huge difference for production applications 🥇

[FrankDoersam]

hey
great libary!
have you a solution for the prod build, i got the same error ?
Best regards,
Fran Dörsam

[viktor25]

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.

[catull]

Thanks @viktor25 !

Saved my day.

[sasos90]

@viktor25 this solution doesn't work for me. I still have this error.
Any other ideas?

[viktor25]

@sasos90 Sorry, I don't have other ideas.
If you upload somewhere the error you are getting and the contents of your app.module.ts, I'll have a look if anything stands out.

[sasos90]

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

[RobArbor]

@viktor25 getting the following error when using your solution:

widget type "string" not found in library. Replacing with "text".
btw i'm using the Bootstrap4 framework.

looks like the WidgetLibraryService isn't loaded correctly.

[RobArbor]

😅 my bad was using useClass: Bootstrap4FrameworkModule, should have used useClass: Bootstrap4Framework the workaround now works for me.

[sasos90]

@RobArbor, But it still doesn't solve the production build issue right?

[RobArbor]

@sasos90 The workaround also fixed my production build.

[RobArbor]

i'm using angular version 5.2.0
and Angular cli version 1.6.4

[stalsma]

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

[ClaudeStephan]

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.

[rmayuri]

@Koslun , Hi I downgraded to [email protected] then I am facing the below issue,
ERROR in Error during template compile of 'AppModule'
Function calls are not supported in decorators but 'JsonSchemaFormModule' was called.
src/app/app.module.ts(79,25): error TS2339: Property 'forRoot' does not exist on type 'typeof JsonSchemaFormModule'.

or else if I upgrade it to [email protected], then I am facing below issue,
ERROR in Error during template compile of 'AppModule'
Function calls are not supported in decorators but 'JsonSchemaFormModule' was called.

if I add below lines ,
{
// ngModule: JsonSchemaFormModule,
// providers: [
// JsonSchemaFormService,
// FrameworkLibraryService,
// WidgetLibraryService,
// {provide: Framework, useClass: MaterialDesignFrameworkModule, multi: true}
// ]
// }
I am facing below issue,
ERROR in src/app/app.module.ts(10,61): error TS2305: Module '"C:/navigator_src/navigator/navigator/src/main/angular/node_modules/angular2-json-schema-form/angular2-json-schema-form
"' has no exported member 'Bootstrap4FrameworkModule'.
src/app/app.module.ts(10,88): error TS2305: Module '"C:/navigator_src/navigator/navigator/src/main/angular/node_modules/angular2-json-schema-form/angular2-json-schema-form"' has no
exported member 'Framework'.

Could anyone of you provide any work around for this.

[Koslun]

@rmayuri a work-around is described in this PR: #230 (comment). 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 ]

[rmayuri]

@Koslun ,

I have made the changes like you suggested, could you please provide any example of adding custom css for each form fields as we are not using any framework.

thanks in advance

[Koslun]

@rmayuri we are not currently making an custom css for each form field generated by this library.

We are rather just waiting to go back to using the material framework as that matches the rest of our app well.

[rmayuri]

@Koslun

Thanks for your response, I am facing below issue now, it would be helpful if you could provide any inputs on this,

I am trying to add widget for file upload, I followed the documentation to add new widget and added the below files but the newly added widget is not being shown in browser, Please provide any inputs to work it proper
the files are below

attach.component.ts

import { Component, Input, OnInit } from '';
import { AbstractControl } from '';

import { JsonSchemaFormService } from 'angular2-json-schema-form';

@component({
selector: 'attach-widget',
template: ,
})
export class AttachComponent implements OnInit {
formControl: AbstractControl;
controlName: string;
controlValue: any;
controlDisabled = false;
boundControl = false;
options: any;
@input() layoutNode: any;
@input() layoutIndex: number[];
@input() dataIndex: number[];

constructor(
private jsf: JsonSchemaFormService,
) { }

ngOnInit() {
this.options = this.layoutNode.options || {};
this.jsf.initializeControl(this);
}

updateValue(event) {
this.jsf.updateValue(this, event.target.value);
}
}

attach.component.type.ts

import { WidgetLibraryService } from 'angular2-json-schema-form';
import {AttachComponent} from './attach.component';

export class attachComponentType{
constructor(private widgetLibrary: WidgetLibraryService) {

widgetLibrary.registerWidget('attach', AttachComponent);
}
}

vendor.thirdparty.component.ts

import { Component } from '';
@component({
selector: 'app-vendorthirdparty',
templateUrl: './vendor_thirdparty.component.html',
//styleUrls: ['./vendor_thirdparty.component.css']
})

export class VendorThirdPartyComponent {
title = 'Vendor and Third Party';
myschema = {
"type": "object",
"properties": {
"RequestedBy":{
"properties": {
"Name": {
"type": "string",
"fieldHtmlClass":"form-control",
"readonly":true,
"labelHtmlClass": "col-xs-2"
},
"BU": {
"type": "string",
"readonly":true,
"fieldHtmlClass":"ifield readonly",
"labelHtmlClass": "h6"
},
"Email": {
"type": "string",
"readonly":true,
"fieldHtmlClass":"ifield readonly",
"labelHtmlClass": "h6"
},
"Phone": {
"type": "string",
"readonly":true,
"fieldHtmlClass":"ifield readonly",
"labelHtmlClass": "h6"
},
}
},
"Manager":{
"properties": {
"ManagerName": {
"type": "string",
"fieldHtmlClass":"ifield readonly",
"readonly":true,
"labelHtmlClass": "h6"
},
"ManagerBU": {
"type": "string",
"readonly":true,
"fieldHtmlClass":"ifield readonly",
"labelHtmlClass": "h6"
},
"ManagerEmail": {
"type": "string",
"readonly":true,
"fieldHtmlClass":"ifield readonly",
"labelHtmlClass": "h6"
},
"ManagerPhone": {
"type": "string",
"readonly":true,
"fieldHtmlClass":"ifield readonly",
"labelHtmlClass": "h6"
},
}
},
"GLCode":{
"properties": {
"BusinessUnit": {
"type": "string",
"fieldHtmlClass":"ifield readonly",
"readonly":true,
"labelHtmlClass": "h6",
"required":true,
},
"OperatingUnit": {
"type": "string",
"readonly":true,
"fieldHtmlClass":"ifield readonly",
"labelHtmlClass": "h6"
},
"Location": {
"type": "string",
"readonly":true,
"fieldHtmlClass":"ifield readonly",
"labelHtmlClass": "h6"
},
"Account": {
"type": "string",
"readonly":true,
"fieldHtmlClass":"ifield readonly",
"labelHtmlClass": "h6"
},
"DepartmentID": {
"type": "string",
"fieldHtmlClass":"ifield readonly",
"readonly":true,
"labelHtmlClass": "h6",
"required":true,
},
"Product": {
"type": "string",
"readonly":true,
"fieldHtmlClass":"ifield readonly",
"labelHtmlClass": "h6"
},
"Customer": {
"type": "string",
"readonly":true,
"fieldHtmlClass":"ifield readonly",
"labelHtmlClass": "h6"
},
"PIDGL": {
"type": "string",
"readonly":true,
"fieldHtmlClass":"ifield readonly",
"labelHtmlClass": "h6"
},
}
},
"RequestAction": {
"type": "string",
"enum": [ "Add", "Change", "Remove"],
"required":true,
"fieldHtmlClass": 'multiselect ifield mysingleselect drgRequired',
"labelHtmlClass": "h6"
},
"RequestTitle": {
"type": "string",
"required":true,
"fieldHtmlClass":"ifield drgId",
"labelHtmlClass": "h6"
},
"ContractuallyObligatedforRequesttobeWorkedinUnitedStates": {
"type": "string",
"enum": [ "Yes", "No"],
"required":true,
"fieldHtmlClass": 'multiselect ifield mysingleselect drgRequired',
"labelHtmlClass": "h6"
},
"ConnectingEntity": {
"type": "string",
"enum": [ "Acquired Entity", "Business Partner", "Client", "Provider", "Vendor"],
"required":true,
"fieldHtmlClass": 'multiselect ifield mysingleselect drgRequired',
"labelHtmlClass": "h6"
},
"SUI": {
"type": "string",
"fieldHtmlClass":"ifield drgId",
"labelHtmlClass": "h6"
},
"PHIInvolved": {
"type": "string",
"enum": [ "Yes", "No"],
"required":true,
"fieldHtmlClass": 'multiselect ifield mysingleselect drgRequired',
"labelHtmlClass": "h6"
},
"SubmissionDate": {
"type": "string",
"fieldHtmlClass":"ifield submissionDate",
"labelHtmlClass": "h6"
},
"ThirdPartyName": {
"type": "string",
"required":true,
"fieldHtmlClass":"ifield drgId",
"labelHtmlClass": "h6"
},
"DRGRequired": {
"type": "string",
"enum": [ "Yes", "No"],
"required":true,
"fieldHtmlClass": 'multiselect ifield mysingleselect drgRequired',
"labelHtmlClass": "h6"
},
"DRGID": {
"type": "string",
"required":true,
"fieldHtmlClass":"ifield drgId",
"labelHtmlClass": "h6"
},
"Reasonforconnection": {
"type": "string",
"required":true,
"fieldHtmlClass":"ifieldtextarea reason",
"labelHtmlClass": "h6"
},
"BusinessName": {
"type": "string",
"required":true,
"fieldHtmlClass":"ifield drgId",
"labelHtmlClass": "h6"
},
"BackupRequestorContactName": {
"type": "string",
"required":true,
"fieldHtmlClass":"ifield drgId",
"labelHtmlClass": "h6"
},
"BackupRequestorContactEmail": {
"type": "string",
//"widget":"email",
"required":true,
"fieldHtmlClass":"ifield",
"labelHtmlClass": "h6"
},
"fileUpload": {
"type": "string",
"widget":"attach",
//"required":true,
//"fieldHtmlClass":"ifield",
//"labelHtmlClass": "h6"
},
}
};
myModel={
Name:"",
BU:"",
Email:"",
Phone:"",
ManagerName:"",
ManagerBU:"",
ManagerEmail:"",
ManagerPhone:"",
BusinessUnit:"",
OperatingUnit:"",
Location:"",
Account:"",
DepartmentID:"",
Product:"",
Customer:"",
PIDGL:"",
RequestAction:"",
RequestTitle:"",
ContractuallyObligatedforRequesttobeWorkedinUnitedStates:"",
ConnectingEntity:"",
SUI:"",
PHIInvolved:"",
SubmissionDate:"",
ThirdPartyName:"",
DRGRequired:"",
DRGID:"",
Reasonforconnection:"",
BusinessName:"",
BackupRequestorContactName:"",
BackupRequestorContactEmail:"",
fileUpload:"",
};
mylayout = [
{
"type": "section",
"display": "flex",
"title": "Requestor Information",
"labelHtmlClass": "h4",
// "type": "section",
"expandable": true,
"expanded": false,
"items": [
{
"type": "flex", "flex-flow": "row wrap",
"title": "Requested By","labelHtmlClass": "h4",
"items": [
{"key": "RequestedBy.Name", "flex-wrap": "wrap","title": "Name"},
{"key": "RequestedBy.BU","title": "BU"} ,
{"key": "RequestedBy.Email", "flex-wrap": "wrap","title": "Email"},
{"key": "RequestedBy.Phone","title": "Phone"}
]
},
{
"type": "flex", "flex-flow": "row wrap",
"title": "Manager",
"labelHtmlClass": "h4",
"items": [
{"key": "Manager.ManagerName", "flex-wrap": "wrap","title": "Name"},
{"key": "Manager.ManagerBU","title": "BU"} ,
{"key": "Manager.ManagerEmail", "flex-wrap": "wrap","title": "Email"},
{"key": "Manager.ManagerPhone","title": "Phone"}
]
},
{
"type": "flex", "flex-flow": "row wrap",
"title": "GL Code",
"labelHtmlClass": "h4",
"items": [
{"key": "GLCode.BusinessUnit", "flex-direction": "row","title": "Business Unit",},
{"key": "GLCode.OperatingUnit", "title": "Operating Unit"} ,
{"key": "GLCode.Location", "title": "Location"},
{"key": "GLCode.Account", "title": "Account"},
{"key": "GLCode.DepartmentID","flex-direction": "row","title": "Department ID"},
{"key": "GLCode.Product","title": "Product"} ,
{"key": "GLCode.Customer", "title": "Customer"},
{"key": "GLCode.PIDGL","title": "PID GL"}
]
},
]
},

///////////
{ "type": "div",
"title":"Request Information",
"labelHtmlClass": "h4",
// "display": "flex",
//"flex-direction": "row wrap",
"items": [
{ "type": "flex", "flex-flow": "row wrap",
"items": [
{ "key": "RequestAction","title": "Request Action"},
{"key": "RequestTitle","title": "Request Title"}
]},
{"key": "ContractuallyObligatedforRequesttobeWorkedinUnitedStates","title": "Contractually Obligated for Request to be Worked in United States"},
{"type": "flex", "flex-flow": "row wrap",
"items": [{"key": "ConnectingEntity","title": "Connecting Entity",}, "SUI" ] },
{"type": "flex", "flex-flow": "row wrap",
"items": [{"key": "PHIInvolved","title": "PHIInvolved"},{"key": "SubmissionDate","title": "Submission Date"}] },
{ "key": "ThirdPartyName","title": "Third Party Name"},
{ "type": "flex", "flex-flow": "row wrap",
"items": [{"key": "DRGRequired","title": "DRG Required",},{"key": "DRGID","title": "DRG ID"} ] },
{ "key": "Reasonforconnection","type":"textarea","title": "Reason for connection"},
{ "type": "flex", "flex-flow": "row wrap","title": "Backup Contact Information", "labelHtmlClass": "h5",
"items": [
{"key": "BusinessName","title": "Business Name", "labelHtmlClass": "h6"},
{ "key": "BackupRequestorContactName","title": "Backup Requestor Contact Name","labelHtmlClass": "h6",}
]
},
{ "labelHtmlClass": "h6", "key": "BackupRequestorContactEmail","title": "Backup Requestor Contact Email"},
]
},

{ "type": "div",
"title":"Attachments (multiple attachments)",
"labelHtmlClass": "h4",
// "display": "flex",
//"flex-direction": "row wrap",
"items": [
{ "type": "flex", "flex-flow": "row wrap",
"items": [
{ "key": "fileUpload","type":"attach","notitle": true},

]}

]
}

];

public OnSubmitFn(){

console.log("OnSubmitFn "+this.myModel.RequestTitle);
this.showValidationDialog("Data Validation", "Please enter mandatory fields");
//this.isValidFn(event);
};
public isValidFn(){

console.log("isValidFn "+this.myModel.RequestTitle);
}

showValidationDialog(title, htmlData) {
var dialogue = $("#datavalidationpopup").html(htmlData).dialog('option', 'title', title);
dialogue.dialog("open");
return false;
}
}

Thanks in advance

[Koslun]

@rmayuri I haven't looked into using custom controls with this library. From previous experience I wouldn't completely trust the docs though. If there is a similar example in the demos I would dig deeper into the demo source code to verify that it's the same as any other docs that you might be relying on.

Btw, I would suggest wrapping any code example with the code format tag, makes reading it a lot easier and compact. Just mark the code and press the <> button which has the tooltip Insert code.

[pdinesh80]

@viktor25 I tried the solution you posted in this thread.

I still see AOT issue, here is the error
Error: Metadata version mismatch for module /bld/workspace///node_modules/angular2-json-schema-form/angular2-json-schema-form.d.ts, found version 4, expected 3
at StaticSymbolResolver.getModuleMetadata

I'm using a Shared Module and this is the import and export section

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

exports: [
   ...,
  ...,
      MaterialDesignFrameworkModule,
      JsonSchemaFormModule,
  ...,
   ....
  ],
  declarations: [],
  providers: []
})
export class SharedModule {}

Using the shared module like this

@NgModule({
    imports: [
       .... ,
        SharedModule
    ],

Can you please tell me whats wrong?

[viktor25]

@pdinesh80 That sounds unrelated. Have you seen angular/components#8229 ?

[pdinesh80]

@viktor25 Thanks a lot for your quick response and the link you provided. I'll try the latest version of material and cdk. We are Angular 4.4.4 for all core angular modules, not sure I'll have any conflicts. Currently we use
"@angular/cdk": "^2.0.0-beta.11",
"@angular/material": "^2.0.0-beta.12",

Let me try upgrading and comment here. Thanks again.

[skeely1234]

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.

@viktor25 Thank you very much. It works.