search

dschnelldavis / angular2-json-schema-form

Angular 2 JSON Schema Form builder
MIT License
285 stars 177 forks source link

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

Open rmayuri opened 6 years ago

rmayuri commented 6 years ago

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 6 years ago

Yes, this is because of the way forRoot is implemented.

I work around this by the following in my imports instead of the suggested:

... Bootstrap4FrameworkModule.forRoot(), { ngModule: JsonSchemaFormModule, providers: [ JsonSchemaFormService, FrameworkLibraryService, WidgetLibraryService, ] } ...

See https://github.com/angular/angular/issues/14707

On Thu, Apr 26, 2018 at 7:53 AM, Mayuri notifications@github.com wrote:

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 https://stackoverflow.com/search?q=angular2+json+schema+form for similar issues Note: Please cross-post GitHub support requests to Stack Overflow https://stackoverflow.com/search?q=angular2+json+schema+form, 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": { "": "^5.2.10", "": "^5.2.4", "": "^5.2.9", "": "^5.2.0", "": "^5.2.9", "": "^2.0.0-beta.12", "": "^5.2.0", "": "^5.2.0", "": "^5.2.4", "": "^5.2.0", "": "^5.2.0", "": "^5.2.0", "": "^1.0.4", "": "^3.3.1", ".cookie": "^1.4.31", "": "^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": { "": "~1.7.4", "": "^5.2.0", "": "^5.2.0", ".net": "^1.10.8", "": "~2.8.3", "": "~2.0.2", "": "~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 ''; //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 '/animations'; import { NgModule,CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA } from ''; import { DataTablesModule } from 'angular-datatables'; import { Route, RouterModule } from ''; import { NgbModule } from '';

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 "/http"; import { FormsModule } from ""; 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 https://github.com/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 ''; @component https://github.com/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

{{title}}



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 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub , or mute the thread .
rhalff commented 6 years ago

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

rmayuri commented 6 years ago

@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 6 years ago

@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 6 years ago

@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 6 years ago

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

jakubjosef commented 6 years ago

@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: https://github.com/hamzahamidi/Angular6-json-schema-form/issues/5

danielmhair commented 6 years ago

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 6 years ago

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 6 years ago

@kiranjholla Forked version I mentioned in previous post works.

narthur157 commented 6 years ago

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 6 years ago

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) https://github.com/narthur157/angular2-json-schema-form/commit/d5a6a2ed834bd68c3931fd7644ee3dcd6740bea8

hackintoshsa commented 4 years ago

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.