Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to bootstrap Angular2 JSON Schema From

See original GitHub issue

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

Issue Analytics

State:
Created 6 years ago
Comments:8 (2 by maintainers)

Top GitHub Comments

1reaction

abhishekgoenkacommented, Feb 26, 2018

This is what I see

1reaction

abhishekgoenkacommented, Feb 23, 2018

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

Top Results From Across the Web

Can`t import JsonSchemaFormModule · Issue #88 - GitHub

Got an error Module '"/node_modules/angular6-json-schema-form/angular6-json-schema-form"' has no exported member 'JsonSchemaFormModule'.

Why is Bootstrap not working in my Angular project?

I feel like I've imported everything correctly... angular.json: { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", ...

I purchased it to use the angular […] - Discussion on Appwork

Data path ".styles[1]" should match exactly one schema in oneOf. I noticed the error is related to this styles in the angular.json:

Error when pass my application to universal angular

An unhandled exception occurred: Error: ENOENT: no such file or directory, lstat tsconfig.app.json comparto configuración angular.json { "$schema": ".

Upgrading from AngularJS to Angular

To bootstrap a hybrid application, you must bootstrap each of the Angular and ... The tsconfig.json file tells the TypeScript compiler how to...