search

dschnelldavis / angular2-json-schema-form

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

Unable to bootstrap Angular2 JSON Schema From #203

Open abhishekgoenka opened 6 years ago

abhishekgoenka commented 6 years ago

Issue type

I'm submitting a (check one): [ ] Bug report

Prerequisites

Angular 5.2.0 and required dependencies

Current behavior

I followed the guideline provided in document but continuously getting following 2 errors

Error 1 : 'json-schema-form' is not a known element:

Error 2 : Cannot read property 'ui:order' of undefined

Cannot read property 'ui:order' of undefined
    at JsonSchemaFormService.compileAjvSchema (webpack-internal:///./node_modules/angular2-json-schema-form/angular2-json-schema-form.es5.js:6721)
    at JsonSchemaFormComponent.activateForm (webpack-internal:///./node_modules/angular2-json-schema-form/angular2-json-schema-form.es5.js:8617)
    at JsonSchemaFormComponent.initializeForm (webpack-internal:///./node_modules/angular2-json-schema-form/angular2-json-schema-form.es5.js:8403)
    at JsonSchemaFormComponent.updateForm (webpack-internal:///./node_modules/angular2-json-schema-form/angular2-json-schema-form.es5.js:8326)
    at JsonSchemaFormComponent.ngOnChanges (webpack-internal:///./node_modules/angular2-json-schema-form/angular2-json-schema-form.es5.js:8302)
    at checkAndUpdateDirectiveInline (webpack-internal:///./node_modules/@angular/core/esm5/core.js:12577)
    at checkAndUpdateNodeInline (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14105)
    at checkAndUpdateNode (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14048)
    at debugCheckAndUpdateNode (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14941)
    at debugCheckDirectivesFn (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14882)

Expected behavior

No error should occur. JSON schema form should be loaded

How can we reproduce your problem?

Create an Angular 5.2.0 app with following code in app.component.ts file

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  exampleJsonObject = `
  {
    "schema": {
      "name": {
        "title": "Name",
        "description": "Nickname allowed",
        "type": "string"
      },
      "gender": {
        "title": "Gender",
        "description": "Your gender",
        "type": "string",
        "enum": [ "male", "female", "alien" ]
      }
    }
  }
  `;
}

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    JSON Schema Form sample app : {{title}}
  </h1>
  <json-schema-form loadExternalAssets="true" [(ngModel)]="exampleJsonObject">
  </json-schema-form>
</div>

Environment

OS name & version: Windows10 Browser name & version: Chrome 64.0.3282.167 Angular version: 5.2.0 Angular JSON Schema Form version(s): 0.7.0-alpha.1 Other relevant software or packages:

Any other relevant information

Thorski commented 6 years ago

Did you import it in your module?

You might want to start with one of the seed projects.

-- Thor

On Thu, Feb 22, 2018 at 12:28 AM, Abhishek Goenka notifications@github.com wrote:

Issue type

I'm submitting a (check one): [ ] Bug report Prerequisites

Angular 5.2.0 and required dependencies Current behavior

I followed the guideline provided in document https://github.com/dschnelldavis/angular2-json-schema-form/blob/master/README.md but continuously getting following 2 errors Error 1 : 'json-schema-form' is not a known element:

https://content.screencast.com/users/AbhishekGoenka/folders/Default/media/af7d9f55-4130-4fbf-908d-6159f7a9cab7/Error%201%20-%20json%20schema%20form%20is%20not%20a%20known%20element.png Error 2 : Cannot read property 'ui:order' of undefined

Cannot read property 'ui:order' of undefined at JsonSchemaFormService.compileAjvSchema (webpack-internal:///./node_modules/angular2-json-schema-form/angular2-json-schema-form.es5.js:6721) at JsonSchemaFormComponent.activateForm (webpack-internal:///./node_modules/angular2-json-schema-form/angular2-json-schema-form.es5.js:8617) at JsonSchemaFormComponent.initializeForm (webpack-internal:///./node_modules/angular2-json-schema-form/angular2-json-schema-form.es5.js:8403) at JsonSchemaFormComponent.updateForm (webpack-internal:///./node_modules/angular2-json-schema-form/angular2-json-schema-form.es5.js:8326) at JsonSchemaFormComponent.ngOnChanges (webpack-internal:///./node_modules/angular2-json-schema-form/angular2-json-schema-form.es5.js:8302) at checkAndUpdateDirectiveInline (webpack-internal:///./node_modules/@angular/core/esm5/core.js:12577) at checkAndUpdateNodeInline (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14105) at checkAndUpdateNode (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14048) at debugCheckAndUpdateNode (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14941) at debugCheckDirectivesFn (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14882)

Expected behavior

No error should occur. JSON schema form should be loaded How can we reproduce your problem?

Create an Angular 5.2.0 app with following code in app.component.ts file

import { Component } from '@angular/core';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] })export class AppComponent { title = 'app'; exampleJsonObject = { "schema": { "name": { "title": "Name", "description": "Nickname allowed", "type": "string" }, "gender": { "title": "Gender", "description": "Your gender", "type": "string", "enum": [ "male", "female", "alien" ] } } }; }

app.component.html

JSON Schema Form sample app : {{title}}

Environment OS name & version: Windows10 Browser name & version: Chrome 64.0.3282.167 Angular version: 5.2.0 Angular JSON Schema Form version(s): 0.7.0-alpha.1 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 .
abhishekgoenka commented 6 years ago

Thanks. Seed project fixed error 2(Cannot read property 'ui:order' of undefined) but error 1 still exists.

catull commented 6 years ago

My guess is there is something missing in your app.module.ts.

Are you importing JsonSchemaFormModule and BootstrapFrameworkModule.

Check the description in the project's Readme.md, it states that you have to at least do this. Pay attention to my comments about IMPORTANT bits: Although, it shows the example with Material Design Framework, I adapted it for Bootstrap.

Here's the absolute minimal module code:

import {
  JsonSchemaFormModule, BootstrapFrameworkModule // <--- THIS IS IMPORTANT
} from 'angular2-json-schema-form';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    BrowserModule, BootstrapFrameworkModule,
    JsonSchemaFormModule.forRoot(BootstrapFrameworkModule)  // <--- THIS IS VERY IMPORTANT
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Good luck.

If this solves your problem, please close the issue.

abhishekgoenka commented 6 years ago

Yes, this solves the ISSUE 2 but error 1('json-schema-form' is not a known element:) still exists. For some reason VS Code editor is not happy. But I am able to compile the application successfully.

The same error is visible even in SEED project. I am using VS Code Version 1.20.

catull commented 6 years ago

Just out of curiosity, when you hover over the error, what is the error reported ? I also use VS Code editor and have been using angular2-json schema for 2 weeks.

Have not seen the error you reported.

abhishekgoenka commented 6 years ago

This is what I see image

Thorski commented 6 years ago

Post your app module or the module definition for the module you are using json-schema-form in. Or post complete example on plunker or somewhere.

On Sun, Feb 25, 2018 at 9:41 PM, Abhishek Goenka notifications@github.com wrote:

This is what I see [image: image] https://user-images.githubusercontent.com/14522198/36651022-a1263906-1acc-11e8-84f7-9f6af667fbf5.png

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/dschnelldavis/angular2-json-schema-form/issues/203#issuecomment-368374297, or mute the thread https://github.com/notifications/unsubscribe-auth/AbZl-5R6j6i2BKdLBWvew7sGl33to5KLks5tYhnkgaJpZM4SOwwX .

abhishekgoenka commented 6 years ago

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCardModule, MatToolbarModule } from '@angular/material';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

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

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MaterialDesignFrameworkModule,
    MatCardModule, MatToolbarModule,
    JsonSchemaFormModule.forRoot(MaterialDesignFrameworkModule)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }