dschnelldavis/angular2-json-schema-form

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

rmayuri opened this issue · 13 comments

rmayuri commented

Issue type

I'm submitting a (check one):
[ ] 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):
[ ] Confirm you are using the latest versions of all necessary packages (or if not, explain why not)
[ ] Search GitHub for a similar issue or PR
[ ] If submitting a Support request, also search Stack Overflow for similar issues
Note: Please cross-post GitHub support requests to 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

I am getting below error when I run below build command,
ERROR in Error during template compile of 'AppModule'
Function calls are not supported in decorators but 'JsonSchemaFormModule' was called.

package.json

{
"name": "navigator",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.2.10",
"@angular/cdk": "^5.2.4",
"@angular/common": "^5.2.9",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.9",
"@angular/flex-layout": "^2.0.0-beta.12",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/material": "^5.2.4",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"@ng-bootstrap/ng-bootstrap": "^1.0.4",
"@types/jquery": "^3.3.1",
"@types/jquery.cookie": "^1.4.31",
"@types/jqueryui": "^1.12.2",
"angular-datatables": "^5.0.0",
"angular2-json-schema-form": "^0.7.0-alpha.1",
"bootstrap": "^4.0.0-beta.2",
"core-js": "^2.4.1",
"datatables.net": "^1.10.16",
"datatables.net-dt": "^1.10.16",
"jquery": "^3.3.1",
"jquery-ui-dist": "^1.12.1",
"jquery.cookie": "^1.4.1",
"open-iconic": "^1.1.1",
"popper.js": "^1.14.1",
"npm": "^5.8.0",
"rxjs": "^5.5.7",
"zone.js": "^0.8.19",
"hammerjs": "^2.0.8"
},
"devDependencies": {
"@angular/cli": "~1.7.4",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/datatables.net": "^1.10.8",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}

app.module.ts

///
///
///

import { UserDataService } from './services/userData.service';
import { MainService } from './services/main.service';

import { BrowserModule } from '@angular/platform-browser';
//import { JsonSchemaFormModule, Bootstrap4FrameworkModule} from 'angular2-json-schema-form';
//Bootstrap4FrameworkModule,
//NoFrameworkModule
import {JsonSchemaFormModule, Bootstrap4FrameworkModule, Framework, WidgetLibraryService, FrameworkLibraryService, JsonSchemaFormService} from 'angular2-json-schema-form';
//import {JsonSchemaFormModule} from 'angular2-json-schema-form';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import { NgModule,CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA } from '@angular/core';
import { DataTablesModule } from 'angular-datatables';
import { Route, RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { MainComponent } from './ns-static-components/main/main.component';
import { HeaderComponent } from "./ns-static-components/header/header.component";
import { HTTP_INTERCEPTORS,HttpClientModule } from "@angular/common/http";
import { FormsModule } from "@angular/forms";
import { LbtogglerComponent } from './load_balance/lbtoggler/lbtoggler.component';
import { LoginComponent } from './login_poc/login.component';
import { FooterComponent } from './ns-static-components/footer/footer.component';
import { RequestorinformationComponent } from './ns-common-components/requestorinformation/requestorinformation.component';
import { RequestinformationComponent } from './security/dlp/requestinformation/requestinformation.component';
import { DarrequestdetailsComponent } from './security/dlp/darrequestdetails/darrequestdetails.component';
import { DlpformComponent } from './security/dlp/dlpform/dlpform.component';
import { NotesComponent } from './ns-common-components/notes/notes.component';
import { SharepointscanComponent } from './security/dlp/sharepointscan/sharepointscan.component';
import { AttachmentComponent } from "./ns-common-components/attachment/attachment.component";
import { AttachmentService } from "./services/attachment.service";
import { EnvService } from "./services/env.service.";
import { OraclescanComponent } from './security/dlp/oraclescan/oraclescan.component';
import { EndpointscanComponent } from './security/dlp/endpointscan/endpointscan.component';
import { RequeststatusComponent } from './ns-common-components/requeststatus/requeststatus.component';
import { DlpService } from './services/dlp.service';
import { PopUpsComponent } from './ns-common-components/pop-ups/pop-ups.component';

import { LoadingIndicatorService, LoadingIndicatorInterceptor} from './interceptors/loadingIndicatorInterceptor';
import { CommonService } from './services/common.service';

import { DatagridComponent } from './ns-common-components/datagrid/datagrid.component';

const ROUTES: Route[] = [
{path:'home', component: MainComponent},
{path:'lb_toggler' , component : LbtogglerComponent },
{path:'login_poc' , component :LoginComponent},
{path:'dlp' , component : DlpformComponent},
{path:'datagrid' , component: DatagridComponent},
{path :'**' , redirectTo:'home'}
]

@NgModule({
declarations: [
AppComponent,
MainComponent,
HeaderComponent,
LbtogglerComponent,
LoginComponent,
FooterComponent,
RequestorinformationComponent,
RequestinformationComponent,
DarrequestdetailsComponent,
DlpformComponent,
NotesComponent,
SharepointscanComponent,
AttachmentComponent,
OraclescanComponent,
EndpointscanComponent,
RequeststatusComponent,
PopUpsComponent,
DatagridComponent
],
imports: [
BrowserModule,
DataTablesModule,
HttpClientModule,
FormsModule,
NgbModule.forRoot(),
RouterModule.forRoot(ROUTES,{useHash: true}),
// NoopAnimationsModule,
Bootstrap4FrameworkModule,
//JsonSchemaFormModule
JsonSchemaFormModule.forRoot(Bootstrap4FrameworkModule)
// {
// ngModule: JsonSchemaFormModule,
// providers: [
// JsonSchemaFormService,
// FrameworkLibraryService,
// WidgetLibraryService,
// {provide: Framework, useClass: Bootstrap4FrameworkModule , multi: true}
// ]
// }

],
providers: [MainService, UserDataService, AttachmentService, EnvService, DlpService,
LoadingIndicatorService,
{
provide: HTTP_INTERCEPTORS,
useFactory: (service: LoadingIndicatorService) => new LoadingIndicatorInterceptor(service),
multi: true,
deps: [LoadingIndicatorService]
},
CommonService],
bootstrap: [AppComponent],
schemas: [ CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA ]
})
export class AppModule { }

login.component.ts

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

export class LoginComponent {
title = 'Optum Navigator';
mySchema = {
"properties": {
"msid": {
"type": "string",
"required":true
},
"password": {
"type": "string",
"widget": "password",
"required":true
},
"email": {
"type": "string",
"description": "email",
"format": "email",
"htmlClass": "mystyle1"
},

  }

};

//mylayout = [

// {
// key: 'msid',
// title: 'MY_TITLE',
// labelHtmlClass:'lable'
// // htmlClass: 'custom_css_class',
// // fieldHtmlClass: 'custom_field_css_class',
// // labelHtmlClass: 'custom_label_css_class',
// // itemLabelHtmlClass: 'custom_itemlabel_css_class',
// // activeClass: 'custom_active_css_class',
// // labelHelpBlockClass: 'custom_help_css_class',

// },
// {
// key: 'password',
// title: 'MY_TITLE1',
// activeClass: 'custom_css_class',

// }
// {
// key: 'submit',
// type: 'submit',
// title: 'Login'
// }

//]

// mylayout =
// { "type": "flex", "flex-flow": "row wrap", "items": [ "msid", "password" ]
// };
myform = {
"form": [
"msid",
"password",
"email",
{
"type": "submit",
"name": "btnSubmit",
"title": "Login"
}
]
};
public OnSubmitFn(event:any){
console.log("login"+event);
}
}

login.component.html

<div class="div1"><h1>{{title}}</h1><br/><br/>
    <div class="div2">
          <json-schema-form
        loadExternalAssets="true"
        [schema]="mySchema"
       
        [form]="myform"
       
        (onSubmit)="OnSubmitFn($event)"
        >       
        </json-schema-form> 
      
</div>

Expected behavior

IMPORTANT: How can we reproduce your problem?

Environment

OS name & version:
Browser name & version:
Angular version:
Angular JSON Schema Form version(s):
Other relevant software or packages:

Any other relevant information

Thorski commented
  • 👍1
rhalff commented

This seems to be the correct way of doing it:

import { NgModule, ModuleWithProviders } from '@angular/core'
import {
  JsonSchemaFormModule,
  MaterialDesignFrameworkModule,
  Bootstrap3FrameworkModule
} from 'angular2-json-schema-form'
...

export const jsonSchemaFormModuleForRoot: ModuleWithProviders = JsonSchemaFormModule.forRoot(
  MaterialDesignFrameworkModule,
  Bootstrap3FrameworkModule
)

@NgModule({
  imports: [
    ...
    MaterialDesignFrameworkModule,
    Bootstrap3FrameworkModule,
    jsonSchemaFormModuleForRoot
    ....

Note: Example is for when you use both frameworks, otherwise just select one.

Also note you must export the const otherwise you will still get the same error.

The suggested solution was taken from: https://github.com/ngxs/store/blob/master/packages/router-plugin/src/router.module.ts

  • 👍2
  • 🎉2
  • 🚀1
rmayuri commented

@Thorski

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

jakubjosef commented

@Thorski solution worked like a charm. EDIT: solution worked for build but forms are empty. Other solution also didn't work, so we had to hardcode bootstrap4 module directly to forRoot function inside our forked version of angular6-json-schema form.

But i personally more like @rhalff 's solution, but it doesn't work :(

danielmhair commented

@rhalff's solution seems to work for me, currently (still testing to ensure it is fully working), but I had to tweak his slightly:

export const jsonSchemaFormModuleForRoot: ModuleWithProviders = JsonSchemaFormModule.forRoot(
  MaterialDesignFrameworkModule,
  Bootstrap3FrameworkModule
)

As you see, I added the typing for ModuleWithProviders

rhalff commented

@danielmhair yeah that's totally correct, I've updated the comment and removed the confusing part.

  • 👍1
jakubjosef commented

@danielmhair Your solution is working for you even with AOT compiler?
I still see this error if I try to use your solution.

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

Only working solution for us is to hardcode bootstrap4module directly to the code of forRoot function in module file.

btw. take a look here: hamzahamidi/ajsf#5

danielmhair commented

Interesting. Well, I had a mix of libraries and applications. The libraries uses Angular 6's CLI, so it uses ng-packagr, which claims to be AOT-compliant, so I would say yes to with AOT compiler. The application isn't in AOT currently though.

I'm hoping that angular puts priority on this error -- its a very rough bug to deal with.

kiranjholla commented

Same issue as reported by @jakubjosef . Tried the solution posted by @rhalff and @danielmhair. But I still get the error when building with AOT.

> ng build my-app --prod

Date: 2018-08-29T
Hash: saghsh4ty463f34r4fef
Time: 8585ms
chunk {0} runtime.xxx.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.xxx.css (styles) 102 kB [initial] [rendered]
chunk {2} polyfills.xxx.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} main.xxx.js (main) 128 bytes [initial] [rendered]

ERROR in Error during template compile of 'MyAppModule'
  Function calls are not supported in decorators but 'AppSettingsModule' was called.
jakubjosef commented

@kiranjholla Forked version I mentioned in previous post works.

narthur157 commented

I forked a version isolating the issue by just turning on aot for the demo. It's definitely AOT. https://github.com/narthur157/angular2-json-schema-form

A real fix for this would be great

narthur157 commented

This seems to be the correct way of doing it:

import { NgModule, ModuleWithProviders } from '@angular/core'
import {
  JsonSchemaFormModule,
  MaterialDesignFrameworkModule,
  Bootstrap3FrameworkModule
} from 'angular2-json-schema-form'
...

export const jsonSchemaFormModuleForRoot: ModuleWithProviders = JsonSchemaFormModule.forRoot(
  MaterialDesignFrameworkModule,
  Bootstrap3FrameworkModule
)

@NgModule({
  imports: [
    ...
    MaterialDesignFrameworkModule,
    Bootstrap3FrameworkModule,
    jsonSchemaFormModuleForRoot
    ....

Note: Example is for when you use both frameworks, otherwise just select one.

Also note you must export the const otherwise you will still get the same error.

The suggested solution was taken from: https://github.com/ngxs/store/blob/master/packages/router-plugin/src/router.module.ts

This did not work for me (see this commit where I tried in my fork)
narthur157@d5a6a2e

hackintoshsa commented

Hi All I keep getting this error when i try to build in prod

I'm Using Material Design instead of Bootstrap As UI

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