Angular - Can't bind template properties to JSONforms properties

General
1

I am attempting to use JSONforms in angular and I am experiencing an issue in binding the <jsonforms> properties in the html template with the JSONForms module. Each property ( schema, uischema, data, renderers, ajv) throws the error:

error NG8002: Can't bind to '<property>' since it isn't a known property of 'jsonforms'

I have ensured that the modules are imported in app.module.ts unless implementation details have changed since the development of the angular-seed project:

import { JsonFormsModule } from '@jsonforms/angular';
import { JsonFormsAngularMaterialModule } from '@jsonforms/angular-material';

imports: [
  ...,
  JsonFormsModule,
  JsonFormsAngularMaterialModule,
]

I cannot post my schema, UI schema, or data, but I had the same issue just cloning the angular-seed repository and running it out of the box so I don’t think it’s an issue with my implementation. The schema is very basic, uses no custom renderers and is laid out very similar to the angular-seed project in the app’s component.ts file.

Versions are as follows:
“@angular/core”: “^15.0.1”,
“@angular/forms”: “^15.0.0”,
“@angular/material”: “^15.0.0”,
“@jsonforms/angular”: “^3.2.1”,
“@jsonforms/angular-material”: “^3.2.1”,
“@jsonforms/core”: “^3.2.1”

I had some conflicts when installing @jsonforms/angular@3.2.1 with @angular/core@“15.0.0”, but again, I had this exact same issue with just the out-of-the-box angular-seed project.

Am I missing some implementation detail or something? Hopefully I didn’t just miss something obvious. Any recommendations would be appreciated.

2

Hi @bsimms2086,

I tried the latest version of the angular seed project and could not reproduce the problem.
Could you try from a fresh clone?

I had some conflicts when installing @jsonforms/angular@3.2.1 with @angular/core@“15.0.0”, but again, I had this exact same issue with just the out-of-the-box angular-seed project.

Angular 15 is not supported by JsonForms 3.2.0 or later. We had to drop support due to some incompatibilities. Thus, I would not expect it to ever work. Do you have the same problem when upgrading to Angular 16 or 17?

Best regards,
Lucas

3

I just grabbed a fresh clone this morning. Opening it in vscode and immediately get the problem flags:

jsonforms_screenshot
jsonforms_screenshot740×868 101 KB

Angular 15 is not supported by JsonForms 3.2.0 or later. We had to drop support due to some incompatibilities. Thus, I would not expect it to ever work. Do you have the same problem when upgrading to Angular 16 or 17?

The project I’m working within uses Angular 15 so I’m not sure I can upgrade, but I will look into going that route. I’d like to understand why I’m having the same issue with the angular seed project though before I take the time try migrating my project.

Do you happen to know which is the most recent version of JsonForms that is compatible with Angular 15 off the top of your head? If so, is there any guidance that still exists for implenting it in Angular? I’d probably prefer using an older version.

Thanks for the quick response, by the way.

4

Hi @bsimms2086 ,

Angular 15 is only supported in pre-release version 3.2.0-alpha.4. Usage should the the same as the current version.
I also used a fresh version of the seed again and could not reproduce the problem unfortunately.
Some ideas what could cause this would be:

  • Node version: JsonForms uses Node 18. Maybe you use an older or newer version?
  • VSCode Angular plugins: As the problems are reported in the VSCode problems view they must come from some extension. For Angular specific extensions, I only have extension Angular.ng-template.

Best regards,
Lucas

5

I’m using Node v18.16.1 and also only have that extension loaded. Very odd. I’m going to try rolling back to the pre-release version of jsonforms. Thanks very much for the recommendations.

6

Another update:

While installing the 3.2.0-alpha.4 version of @jsonforms/angular-material I got a dependency error:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @jsonforms/angular-material@3.2.0-alpha.4
npm WARN Found: @jsonforms/angular-test@undefined
npm WARN node_modules/@jsonforms/angular-test
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer @jsonforms/angular-test@"^3.2.0-alpha.3" from @jsonforms/angular-material@3.2.0-alpha.4
npm WARN node_modules/@jsonforms/angular-material
npm WARN   @jsonforms/angular-material@"3.2.0-alpha.4" from the root project
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@jsonforms%2fangular-test - Not found
npm ERR! 404 
npm ERR! 404  '@jsonforms/angular-test@^3.2.0-alpha.3' is not in this registry.
npm ERR! 404

Looks like a similar issue to this post. I haven’t been able to find that package anywhere in any version. I’ll try some other things.

7

Hi @bsimms2086,

This is an error in the peerDependency declaration of @jsonforms/angular-material in version 3.2.0-alpha.4. This is only a development dependency and not a published one. It’s not required at runtime, so this error can be safely ignored.

8

In case this is found in the future. The dependency error will be fixed in the upcoming 3.3 release as the angular-test package is removed there. 3.3 is only going to support Angular 17 and 18 though.