Support Angular w/ Material v16

[Scarylaggy]

Is your feature request related to a problem? Please describe.

We would like to use Angular for an Application in the version 16 as it is the latest version of angular and stumbled upon this repo for a great (in version 14) working form system. As it looks like the Angular package is still worked on, in version 12 which is quite old by now and should be updated due to some vulneribiltys.

Describe the solution you'd like

Update the dependencys used for the angular and angular material packages to latest standards.

Describe alternatives you've considered

Not using jsonforms if it is not possible.

Framework

Angular

RendererSet

No response

Additional context

No response

[JonasDev17]

Another alternative would be Formly: https://github.com/ngx-formly/ngx-formly
Made specifically for Angular whcich means it has a littel more flexibility since they can upgrade their typescript without having to worry about breaking any other packages.

[Scarylaggy]

Yes, their product does look very good and i tried it but unfortunatly they got some issues with Angular v16 too.
Worked quite good when you don't make misstakes.

[chladog]

I also wanted to implement it in my project as the project looks quite practical.
To clarify on this topic, the cause is lack of compability with Ivy compiler. In Angular version 16 the Angular Compatibility Compiler (ngcc) has been removed (which allowed older non-ivy libraries to be compiled with Ivy). So that's why it was working until now.

[sdirix]

In general we would like to support the latest Angular version when possible. This is complicated by the fact that our Angular builds are very old school and need to be modernized.

The community driven PR to support Angular 15 sadly got stuck. If someone of the community wants to contribute Angular 15/16 support then we will gladly accept that.

We are currently working on modernizing the repo with pnpm etc. so it probably makes sense to wait for this.

[Altair-Bueno]

Wondering if it would made more sense to just use Web components instead of maintaining integrations for each framework. There are projects following this direction, such as material web, which aims to be compatible with multiple frameworks with the same codebase.

• Benefits: Less packages and code to maintain. The ability to easily use this package with plain HTML without much hassle.
• Disadvantages: Somewhat limited props, based on HTML attributes and events. Custom renderers are possible but only if they are based on Web components
• The weird: At first glance, frameworks such as Svelte and Vue won't need integrations. They have great support for custom events. However, because React isn't as friendly with those (as always React ruins the fun) it should probably have a wrapper.

[Ketec]

It seems like no A16 support is coming in the new future?

Web components are not an option. It won't integrate with any company/enterprise or custom renderers or themes. Web components are extremely limited and don't work well in the real world - unless all you do is very basic standard one-off apps.

I guess the only option left is to extract and convert/integrate the angular adapter part into the project directly.

Staying stuck on A14 is not a long-term option and too late to remove jsonforms since there is no alternative.

[headitsolutionsdev]

It seems like no A16 support is coming in the new future?

Web components are not an option. It won't integrate with any company/enterprise or custom renderers or themes. Web components are extremely limited and don't work well in the real world - unless all you do is very basic standard one-off apps.

I guess the only option left is to extract and convert/integrate the angular adapter part into the project directly.

Staying stuck on A14 is not a long-term option and too late to remove jsonforms since there is no alternative.

I recommend Formly. It takes some time getting used to it but it can do everything this package does and creating custom controls is super simple. It works with Angular 16.

[Ketec]

It's not an option to swap. There is an entire backend and UI built around it. With custom renderers for an internal component library. All rely on the 3 separate JSON/jsonschema structures.

That's months of work that no company will give you time for to just rewrite everything and convert all existing data.

[lucas-koehler]

It seems like no A16 support is coming in the new future?

Web components are not an option. It won't integrate with any company/enterprise or custom renderers or themes. Web components are extremely limited and don't work well in the real world - unless all you do is very basic standard one-off apps.

I guess the only option left is to extract and convert/integrate the angular adapter part into the project directly.

Staying stuck on A14 is not a long-term option and too late to remove jsonforms since there is no alternative.

Hello @Ketec,
thank you for your interest in JsonForms. Currently, we don't have enough resources available to migrate JsonForms to Angular 16 ourselves. However, we are happy to review and accept a contribution that migrates the packages to Angular 16. Thereby, it is fine if you break backward compatibility, i.e. only make it work for Angular 16+. The aforementioned migration to pnpm was finished in the meantime. Thus, a larger migration like this can be started now.
If you don't want to do this yourselves, another option is for your company to sponsor this feature.

[Ketec]

There really isn't much to change code-wise for the adapter code itself.

Not familiar with the building/project structure.
It looks like it compiles it as typescript to commonjs module.

In that case, || ^15.0.0 || ^16.0.0 || ^17.0.0 alone may be enough to bypass npm install complaints.
With a note that 15+ has not been fully tested/verified.

The material renderer is a separate issue (likely breaking changes). But I use a custom renderer so I have not tried it.

[sdirix]

@Ketec If you can report that our current @jsonforms/angular is compatible with Angular 15, 16 and 17 and you tested it against all these versions then we don't have a problem with declaring our package compatible. Preferably at least one other tester could report this too or the compatibility is showcased by for example adapting the JSON Forms Angular seed to a later Angular version.

[Ketec]

I have not tested against 16 yet (will take some time to get 15 stable and then upgrade to 16).

But I only tested 15 by copy-pasting the Lerna built lib contents to node_modules ( did not see how it builds the actual npm package).

[iamraj0811]

Hi
My project is using jsonforms/angular: 3.0.0
jsonforms/angular-material: 3.0.0
jsonforms/core; 3.0.0

I have changed angular version from 14 to 16 so now on npm install it is giving broken dependency error and is advising to use --force.
I don't want force to be used. How to resolve this issue.

[JBBianchi]

I did update the angular-seed project to v15 and tried to use v3.1.0 (using --force when installing)

I had no build error but runtime errors:

ERROR TypeError: Cannot read properties of undefined (reading '_hostElement')
    at MatSliderVisualThumb.ngAfterViewInit (slider.mjs:133:49)
    ...

ERROR TypeError: Cannot read properties of undefined (reading '_hostElement')
    at _validateInputs (slider.mjs:993:38)
    ...
    
ERROR Error: More than one custom value accessor matches form control with unspecified name attribute
    at _throwError (forms.mjs:3151:11)
    ...

I guess most of the fixes are available in this guide: https://v15.material.angular.io/guide/mdc-migration but I didn't have time to check it out yet.

It's unfortunatly not as trivial as adding || ^15.0.0 || ^16.0.0 || ^17.0.0 :'(

[Ketec]

Yes, it needs some code level fixes due to strictness etc.

But i more or less gave up abd use a bare minimum of it witj jsonforms core (I alreDy had custom renderer).
Since 16 and 17 are soon to follow.

[JBBianchi]

I isolated @jsonforms/angular and @jsonforms/angular-material to avoid fighting with the monorepo/lerna and focus on angular ( https://github.com/JBBianchi/ng-jsonforms/tree/v14-to-v15 ).

I still have ERROR Error: More than one custom value accessor matches form control with unspecified name attribute

If I manage to fix it, I'll try to migrate the packages back in the original monorepo but I think it's gonna be a pain in the butt (conflicting versions of nodejs/TypeScript/typedoc ...)

Edit: The custom value accessor error came from the seed custom.autocomplete.ts. Just running the ng generate @angular/material:mdc-migration command on the seed project as well fixed it.

[lucas-koehler]

Angular 16 (and 17) support was added via #2229