Any json editor in angular 10?

Question

I was using ang-jsoneditor before I upgrade my nodejs (was 8, now 12) and angular (was 7, now 10). After the upgrade, the ang-jsoneditor seems not working, and error is

core.js:4442 ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at JsonEditorComponent.ngOnInit (ang-jsoneditor.js:50)
    at callHook (core.js:3281)
    at callHooks (core.js:3251)
    at executeInitAndCheckHooks (core.js:3203)
    at selectIndexInternal (core.js:6324)
    at Module.ɵɵadvance (core.js:6306)
    at NewConfigurationEditorComponent_Template (new-configuration-editor.component.html:72)
    at executeTemplate (core.js:7511)
    at refreshView (core.js:7380)
    at refreshComponent (core.js:8527)

I visited the homepage https://github.com/mariohmol/ang-jsoneditor, it says only support angular from 4 to 9. here's my package.json, please advise.

{
  "name": "configuration-service",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod --aot --output-hashing all",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "10.2.5",
    "@angular/cdk": "10.2.7",
    "@angular/common": "10.2.5",
    "@angular/compiler": "10.2.5",
    "@angular/core": "10.2.5",
    "@angular/flex-layout": "9.0.0-beta.29",
    "@angular/forms": "10.2.5",
    "@angular/localize": "^10.2.5",
    "@angular/material": "10.2.7",
    "@angular/platform-browser": "10.2.5",
    "@angular/platform-browser-dynamic": "10.2.5",
    "@angular/router": "10.2.5",
    "@ng-bootstrap/ng-bootstrap": "6.2.0",
    "@ng-select/ng-select": "2.18.0",
    "@ngrx/effects": "10.1.2",
    "@ngrx/router-store": "10.1.2",
    "@ngrx/store": "10.1.2",
    "@ngrx/store-devtools": "10.1.2",
    "@types/hammerjs": "2.0.36",
    "ang-jsoneditor": "1.10.5",
    "angular2-uuid": "1.1.1",
    "bootstrap": "4.1.3",
    "core-js": "2.5.7",
    "font-awesome": "4.7.0",
    "jsoneditor": "5.32.5",
    "material-design-icons": "^3.0.1",
    "ng-prettyjson": "0.2.0",
    "ng2-search-filter": "^0.5.1",
    "ngx-autosize": "1.6.3",
    "ngx-clipboard": "^12.3.0",
    "ngx-file-drop": "^8.0.8",
    "ngx-json-viewer": "2.4.0",
    "ngx-tour-core": "^4.1.1",
    "ngx-tour-md-menu": "^4.1.1",
    "ngx-window-token": "3.0.0",
    "rxjs": "6.6.7",
    "rxjs-compat": "6.5.2",
    "serialize-ts": "2.5.1",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1002.3",
    "@angular/cli": "10.2.3",
    "@angular/compiler-cli": "10.2.5",
    "@angular/language-service": "10.2.5",
    "@ngrx/schematics": "10.1.2",
    "@types/jasmine": "2.8.9",
    "@types/jasminewd2": "2.0.5",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "rxjs-tslint-rules": "4.27.1",
    "ts-node": "7.0.1",
    "tslint": "~6.1.0",
    "typescript": "4.0.8"
  }
}

Answer 1

For Angular 10, you can use version 1.10.5 of the Library.

npm i [email protected]

For anyone reading this after 2020 and needs a solution for angular 11 and 12 (and 13 soon).

I've forked the repository and updated it, as i needed the library for a personal project and the original project doesn't seem to be actively maintained at the moment.

https://www.npmjs.com/package/@maaxgr/ang-jsoneditor

For Angular 11:

npm install @maaxgr/ang-jsoneditor@11

For Angular 12:

npm install @maaxgr/ang-jsoneditor@12