schema with key or id "http://json-schema.org/draft-06/schema" already exists

[mayankkalbhor]

Getting schema with key or id already exists error while using Angular6-json-schema-form library which template: All templates

• [| ] MaterialDesignFrameworkModule — Material Design
• [ |] Bootstrap3FrameworkModule — Bootstrap 3
• [ |] Bootstrap4FrameworkModule — Bootstrap 4
• [ |] NoFrameworkModule — plain HTML
• [ |] Other (please specify below)

A clear and concise description of what the bug is.:

Getting schema id error. Steps below: import { Bootstrap4FrameworkModule } from 'angular6-json-schema-form' in the app.module.ts file. Also i created a JSON schema object in the component file and used the below in the app.component.html file

<json-schema-form loadExternalAssets="true" [schema]="yourschema" framework="bootstrap-4"> But when i do npm start and do a localhost i am getting an error in the console

ERROR Error: schema with key or id "http://json-schema.org/draft-06/schema" already exists

To Reproduce Steps to reproduce the behavior:

1. import { Bootstrap4FrameworkModule } from 'angular6-json-schema-form' in the app.module.ts file.
2. Declare in imports imports: [ Bootstrap4FrameworkModule ],
3. created a JSON schema object in the component file and used the below in the app.component.html file <json-schema-form loadExternalAssets="true" [schema]="yourschema" framework="bootstrap-4">
4. Getting error in chrome console ERROR Error: schema with key or id "http://json-schema.org/draft-06/schema" already exists

Expected behavior Should load the HTML page from JSON

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]: Windows 10
• Browser [e.g. chrome, safari]: Chrome
• Version [e.g. 22]

[hamzahamidi]

Where is your schema?

[mayankkalbhor]

In app.component.ts i am using the schema like this:

export class AppComponent { yourschema = { "schema": { "type": "object", "properties": { "first_name": { "type": "string" }, "last_name": { "type": "string" }, "address": { "type": "object", "properties": { "street_1": { "type": "string" }, "street_2": { "type": "string" }, "city": { "type": "string" }, "state": { "type": "string", "enum": [ "AL", "AK", "AS", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FM", "FL", "GA", "GU", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MH", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", "MP", "OH", "OK", "OR", "PW", "PA", "PR", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VI", "VA", "WA", "WV", "WI", "WY" ] }, "zip_code": { "type": "string" } } }, "birthday": { "type": "string" }, "notes": { "type": "string" }, "phone_numbers": { "type": "array", "items": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "cell", "home", "work" ] }, "number": { "type": "string" } }, "required": [ "type", "number" ] } } }, "required": [ "last_name" ] }, "layout": [ { "type": "flex", "flex-flow": "row wrap", "items": [ "first_name", "last_name" ] }, { "key": "address.street_1", "title": "Address", "placeholder": "Street" }, { "key": "address.street_2", "notitle": true }, { "type": "div", "display": "flex", "flex-direction": "row", "items": [ { "key": "address.city", "flex": "3 3 150px", "notitle": true, "placeholder": "City" }, { "key": "address.state", "flex": "1 1 50px", "notitle": true, "placeholder": "State" }, { "key": "address.zip_code", "flex": "2 2 100px", "notitle": true, "placeholder": "Zip Code" } ] }, { "key": "birthday", "type": "date" }, { "key": "phone_numbers", "type": "array", "listItems": 3, "items": [ { "type": "div", "displayFlex": true, "flex-direction": "row", "items": [ { "key": "phone_numbers[].type", "flex": "1 1 50px", "notitle": true, "placeholder": "Type" }, { "key": "phone_numbers[].number", "flex": "4 4 200px", "notitle": true, "placeholder": "Phone Number" } ] } ] }, { "type": "section", "title": "Notes", "expandable": true, "expanded": false, "items": [ { "key": "notes", "type": "textarea", "notitle": true } ] } ], "data": { "first_name": "Jane", "last_name": "Doe", "address": { "street_1": "123 Main St.", "city": "Las Vegas", "state": "NV", "zip_code": "89123" }, "birthday": "1999-09-09", "phone_numbers": [ { "type": "cell", "number": "702-123-4567" }, { "type": "work", "number": "702-987-6543" } ], "notes": "(This is an example of an uninteresting note.)" } } }

[goldenbaski]

Hi [hamzahamidi]) and All, Pls can help me on the above issues and it's blocking.

[hamzahamidi]

I just tested your schema @mayankkalbhor & it works on the Demo

[mayankkalbhor]

@hamzahamidi I am still facing the issue. It works ok in demo that you shared. For simplicity i again checked and facing the same issue.

Please find the below steps i did one by one:

1) npm install angular6-json-schema-form --save 2) In App.module added this import { MaterialDesignFrameworkModule } from 'angular6-json-schema-form'; Please check the complete app.module.ts

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; import { LazyLoadModule } from './lazy-load/lazy-load.module'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { CoreModule } from './core/core.module'; import { MaterialDesignFrameworkModule } from 'angular6-json-schema-form';

@NgModule({ declarations: [ AppComponent,

], imports: [ BrowserModule, LazyLoadModule, CoreModule, BrowserAnimationsModule, MaterialDesignFrameworkModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

3) My app.component.html looks like this

<json-schema-form loadExternalAssets="true" [schema]="yourJsonSchema" framework="material-design">

4) My app.component.ts looks like this

import { Component } from '@angular/core'; import { trigger, state, style, animate, transition, query, } from '@angular/animations' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'],

}) export class AppComponent {

getRouteAnimation(outlet) {

  return outlet.activatedRouteData.animation

}

yourJsonSchema = { "first_name": "Jane", "last_name": "Doe", "age": 25, "is_company": false, "address": { "street_1": "123 Main St.", "street_2": null, "city": "Las Vegas", "state": "NV", "zip_code": "89123" }, "phone_numbers": [ { "number": "702-123-4567", "type": "cell" }, { "number": "702-987-6543", "type": "work" } ], "notes": "" }; }

5) While i run npm start i am getting this error in console:

ERROR Error: schema with key or id "http://json-schema.org/draft-06/schema" already exists at checkUnique (ajv.js:477) at Ajv.addSchema (ajv.js:140) at Ajv.addMetaSchema (ajv.js:156) at new JsonSchemaFormService (angular6-json-schema-form.js:6004) at createClass (core.js:9091) at _createProviderInstance (core.js:9078) at createProviderInstance (core.js:8961) at createViewNodes (core.js:10185) at callViewAction (core.js:10514) at execComponentViewsAction (core.js:10433)

Please suggest as i explained all the steps and also gave all the files

[mayankkalbhor]

@ hamzahamidi Can you help in this. I am currently eager to include this library in my app and not able to proceed

[hamzahamidi]

@mayankkalbhor Did you try installing the latest release $ npm install angular6-json-schema-form@^7.1.0 If this doesn't work, can you please provide a repository with this issue?

[mayankkalbhor]

@hamzahamidi I created a repo with the issue where this is occurring Can you please check the repo once.

REPO: https://gitlab.com/mayankkalbhor/schemaformdemo

1) Clone 2) npm install 3) Go to Chrome and http://localhost:4200 4) Check the chrome console for errors

You can check the commits section for the file names where i have used the library

[mayankkalbhor]

@hamzahamidi Did you get a chance to check this

[goldenbaski]

@hamzahamidi - Pls can you look into it and it's blocking all the UI layout and data loading also. We are tried a different way to resolve it, but we could not succeed.

[remonzh]

@hamzahamidi you closed the other issue & not answering this one, please help ?

[hamzahamidi]

@remonzh I'm not able to reproduce the issue neither in the demo nor in local.

[mayankkalbhor]

@hamzahamidi Did you tried this on the repo i have created???? i have given access to you in the repo Can you please check the repo once. Please check the below steps

REPO: https://gitlab.com/mayankkalbhor/schemaformdemo

1) Clone the repo i provided 2) run npm install 3) Go to Chrome and http://localhost:4200 4) Check the chrome console for errors 5) You can check the commits section for the file names where i have used the library

[hamzahamidi]

Please provide a minimal repository reproducing the issue.

[mayankkalbhor]

@hamzahamidi I have removed many files and created a new repository which is a slim down version.

REPO: https://gitlab.com/mayankkalbhor/schemaform

1) Clone the repo i provided 2) run npm install 3) Go to Chrome and http://localhost:4200 4) Check the chrome console for errors

[mayankkalbhor]

@hamzahamidi Can you please look at it once. I have trimmed down the code to the bare minimum and you can replicate it within seconds. Please can you check on this one as its getting late for us to include this great library in our project and go ahead.

[github-actions[bot]]

Stale issue

[mayankkalbhor]

Any update on the above??

[rohitb7]

This issue still exists. I am not sure how to fix this.