Cannot import WidgetLibraryService

Version: v0.4.0-alpha.7

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

The error message is has no exported member 'WidgetLibraryService'.

If I use…

import { WidgetLibraryService } from 'angular2-json-schema-form/src/widget-library/widget-library.service';

It can build success, but will get the same error if I use WidgetLibraryService in constructor

constructor(private widgetLibrary: WidgetLibraryService) {}

My project is create by ng create with angular-cli 1.1.0

{
  "name": "angular4",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.1.0",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "2.5.45",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

[Sebastian-Fitzner]

@yovin99 yes i was able to build a whole custom framework with this lib. Unfortunately it did not scale well so I decided to create my own lib.

But here is a short description how you can achieve that:

Create your custom widgets

const customWidgets = {
	'input': BBInputComponent,
	'email': BBEmailComponent,
	'select': BBSelectComponent,
	'checkbox': BBCheckboxComponent,
	// 'checkboxes': BBCheckboxesComponent,
	'radio': BBRadioComponent,
	'input-norway': BBInputNorwayComponent,
	'fieldset': BBFieldsetComponent,
	'wizard': BBWizardComponent,
	'wizard-step': BBWizardStepComponent,
	'submit': BBSubmitComponent
};

Add custom widgets to declarations and entryComponents in your ngModule:

@NgModule({
	imports: [
		RouterModule,
		CommonModule,
		BrowserModule,
		FormsModule,
		ReactiveFormsModule,
		JsonSchemaFormModule
	],
	declarations: [
		// Components
		DynamicFormComponent,
		// Forms
		BBFormFrameworkComponent,
		BBInputComponent,
		BBEmailComponent,
		BBSelectComponent,
		BBCheckboxComponent,
		BBRadioComponent,
		BBSchemaFormComponent,
		BBRootComponent,
		BBSelectFrameworkComponent,
		BBSelectWidgetComponent,
		BBFieldsetComponent,
		BBWizardComponent,
		BBWizardStepComponent,
		BBInputNorwayComponent,
		BBSubmitComponent
	],
	entryComponents: [
		BBFieldsetComponent,
		BBFormFrameworkComponent,
		BBInputComponent,
		BBEmailComponent,
		BBSelectWidgetComponent,
		BBSelectComponent,
		BBCheckboxComponent,
		BBRadioComponent,
		BBInputNorwayComponent,
		BBWizardComponent,
		BBWizardStepComponent,
		BBSubmitComponent,
		BBDialogComponent
	],
	providers: [
		//
	],
	exports: [
		// 
	]
})
export class BBModule {
	constructor() {
	}
}

Use your widgets in your components

After that you should have the registration almost done. Now you need to create a reference to your custom widgets in your custom component and provide it to json-schema-form as input, like so:

Class

import { OnInit } from '@angular/core';
import customWidgets from '../form/custom-widgets';

@Component({
	selector: 'bb-dynamic-form',
	templateUrl: 'dynamic-form.component.html',
	styleUrls: ['dynamic-form.component.scss']
})
export class DynamicFormComponent implements OnInit {
	widgets = customWidgets;
}

HTML

<json-schema-form
	[widgets]="widgets"
	(onChanges)="onChanges.emit($event)"
	(onSubmit)="onSubmitFn($event)"
	(validationErrors)="validateErrors($event)">
</json-schema-form>

[neil-coutinho]

@Sebastian-Fitzner Thank you. This helped a lot