Angular 13 - reactive-form-validators ivy enabled

[mikerentmeister]

Description

Now that Angular 13 is released and view engine is deprecated, does this team have any plans on updating reactive-form-validators to be built in at least partial ivy mode, in order to not need to run ngcc for this library? Currently ngcc is the only thing in the way of my team being able to update to yarn 2 with PnP.

Describe the solution you'd like

reactive-form-validators library built with "compilationMode": "partial" and "enableIvy": true

[tim-blome]

Hi, looks like this also causes Jest UnitTests with ng13 to fail. After updating to Angular13 our UnitTests for Components that used the RXFormBuilder suddenly failed in a similar way as described here: ngneat/reactive-forms#118, caused by incompatibility with Angular13.

[ajayojha]

@tim-blome would be great if you share the issue repo. I tried but didn't get any error, maybe I am missing something.

[KiranMantha]

@ajayojha I'm too facing the same issue with angular@13.3.4. the application itself is not getting compiled and failing with below error:

Error in turbo_modules/@rxweb/reactive-form-validators@2.1.6/services/reactive-form.module.d.ts (2:22)
Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the dependency (@rxweb/reactive-form-validators) which declares RxReactiveFormsModule has not been processed correctly by ngcc.

Here is the stackblitz link for reference

[ajayojha]

@KiranMantha I have downloaded the stackblitz code and tried to run the same in my local but it's not working, as this is showing a different error than the mentioned issue you have highlighted. I am keen to solve this issue, but for this, I would need an issue repo. Would be great if you share the issue repo with minimal code [nonproduction code].

[tamyfabius]

@ajayojha I have created a new NX Angular 13 project with the latest Jest version and The test fails when creating a RxFormGroup. I seen a discussion about this error, I don't know there are a fix about this:

==> TypeError: Class constructor FormControl cannot be invoked without 'new'

NRWL / NX cli version
@nrwl/cli@13.8.3
nx@13.8.3

Angular cli version:
13.7.2

Package.json :

"dependencies": {
"@angular-architects/ddd": "2.0.0",
"@angular/animations": "13.2.0",
"@angular/cdk": "13.2.0",
"@angular/common": "13.2.0",
"@angular/compiler": "13.2.0",
"@angular/core": "13.2.0",
"@angular/forms": "13.2.0",
"@angular/platform-browser": "13.2.0",
"@angular/platform-browser-dynamic": "13.2.0",
"@angular/router": "13.2.0",
"@fullcalendar/angular": "5.10.1",
"@fullcalendar/core": "5.10.1",
"@fullcalendar/daygrid": "5.10.1",
"@ngneat/hot-toast": "4.1.0",
"@ngneat/overview": "3.0.0",
"@ngneat/until-destroy": "9.0.0",
"@nrwl/angular": "13.7.2",
"@rxweb/reactive-form-validators": "2.1.6",
"date-fns": "2.28.0",
"eslint-plugin-import": "2.25.4",
"eslint-plugin-rxjs": "5.0.2",
"lodash-es": "4.17.21",
"ng-let": "13.0.3",
"ng-mocks": "13.0.2",
"ngx-date-fns": "8.3.0",
"primeflex": "3.1.2",
"primeicons": "5.0.0",
"primeng": "13.1.0",
"roboto-fontface": "0.10.0",
"rxjs": "7.4.0",
"tslib": "2.0.0",
"zone.js": "0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "13.2.0",
"@angular-eslint/eslint-plugin": "13.0.1",
"@angular-eslint/eslint-plugin-template": "13.0.1",
"@angular-eslint/template-parser": "13.0.1",
"@angular/cli": "13.2.0",
"@angular/compiler-cli": "13.2.0",
"@angular/language-service": "13.2.0",
"@ngneat/spectator": "10.0.0",
"@nrwl/cli": "13.7.2",
"@nrwl/cypress": "13.7.2",
"@nrwl/eslint-plugin-nx": "13.7.2",
"@nrwl/jest": "13.7.2",
"@nrwl/linter": "13.7.2",
"@nrwl/tao": "13.7.2",
"@nrwl/workspace": "13.7.2",
"@types/jest": "27.0.2",
"@types/node": "16.11.7",
"@typescript-eslint/eslint-plugin": "5.17.0",
"@typescript-eslint/parser": "5.17.0",
"api-client-generator": "^4.7.1",
"cypress": "9.1.0",
"eslint": "8.12.0",
"eslint-config-prettier": "8.5.0",
"eslint-plugin-cypress": "2.12.1",
"husky": "^7.0.4",
"jest": "27.2.3",
"jest-preset-angular": "11.0.0",
"ng-packagr": "13.0.0",
"postcss": "8.4.5",
"postcss-import": "14.0.2",
"postcss-preset-env": "6.7.0",
"postcss-url": "10.1.1",
"prettier": "2.5.1",
"ts-jest": "27.0.5",
"typescript": "4.5.2"
}

[ajayojha]

Would be great if you share the sample issue repo or else share the package json and angular cli version. Get Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ From: De Giovanni ***@***.***> Sent: Thursday, April 21, 2022 8:17:28 PM To: rxweb/rxweb ***@***.***> Cc: Ajay Ojha ***@***.***>; Mention ***@***.***> Subject: Re: [rxweb/rxweb] Angular 13 - reactive-form-validators ivy enabled (Issue #542) I have created a new NX Angular 13 project with the latest Jest version and The test fails when creating a RxFormGroup. I seen a discussion about this error, I don't know there are a fix about this: ==> TypeError: Class constructor FormControl cannot be invoked without 'new' — Reply to this email directly, view it on GitHub<#542 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AE3SS3UJDCJP6JXOMW4QU3TVGFTABANCNFSM5H5O2V3A>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[ajayojha]

Please check with 2.1.7 version, I will close this ticket once I get an update from anyone of you.

[mikerentmeister]

2.1.7 shows that this package is still not ivy compatible:

[tamyfabius]

@ajayojha,
After check, I still have the same error Class constructor FormControl cannot be invoked without 'new' with 2.1.7 version.

And this package is still not ivy compatible

[sozzzzz]

Same issue TypeError: Class constructor FormControl cannot be invoked without 'new'

"@rxweb/reactive-form-validators": "^2.1.7",
"jest": "^28.1.0",
"@angular/forms": "~13.2.4",

[SmailHammour]

Please check with 2.1.7 version, I will close this ticket once I get an update from anyone of you.

I can confirm that 2.1.7 still throws this warning.

[sahofmann]

We also had no luck updating to 2.1.7 and it currently blocks our Angular 13 - Upgrade.

@ajayojha
During the overall upgrade - process we also had issues with our own libraries not being ivy compatible. We've fixed it by upgrading targets and libs in our tsconfigs. I see that you're also still using es5 as a target.
So we've used the following language versions:

"target": "es2017",
"module": "es2020",
 "lib": ["es2020", "dom"]

We've also removed angularCompilerOptions completely and let angular do its thing. At least already using Angular 13. In your case, still being on 12, you should leave it there.

Don't know if it helps in this case but I guess upgrading the target could do the trick.

[sahofmann]

Nevermind. With the decision to create a PR I've played around with the settings.
First of all I've bumped the language version but still got the "Processing legacy View Engine" messages and errors during test. Then I've added "enableIvy: true" in the tsconfig.lib.prod.json (which was missing anyway) but this even changed anything.
After all I didn't got it to output an ivy compilation at all. May I've missed something.

Anyway, it would be great to have a better contribution guide with steps how to build locally. I've ended up performing a npm install in client-side/angular, ng build @rxweb/reactive-form-validators and npm publish --registry http://localhost:4873 from within the dist, using verdaccio.

[ajayojha]

@sahofmann Thanks for sharing the detailed information, I will update it here in the next two days, Mostly will fix this issue. Would be happy to see the PR, if you have time and work on this :).

[sahofmann]

Yeah, as soon as I find time I'll provide a PR. Meanwhile I've found the issue why it never switched to ivy compilation mode. You have to do a production build. So running ng build @rxweb/reactive-form-validators --configuration production with enableIvy: true set in tsconfig.lib.prod.json produces a ivy build (at least the ivy compiler startet).
For now it crashes with compilation errors as there are some classes which get implicitly exported:

NG3001: Unsupported private class ImageFileControlDirective. This class is visible to consumers via RxReactiveFormsModule -> ImageFileControlDirective, but is not exported from the top-level library entrypoint.

[sahofmann]

@ajayojha

Still getting TypeError: Class constructor FormControl cannot be invoked without 'new' but Ivy compilation works. I'm not quite sure if it makes any sense to provide a PR fixing the ivy compilation while not fixing this "new" bug. Even switching to ivy would break compatibility with non-ivy-projects.
So for now I'm not quite sure what is causing the issue. That's what I've done so far:
sahofmann@0dfd251

Didn't found a way to add --configuration production to CI as it's not clear how you've set it up. Found yarn prod, but not sure what it does in your setup. But if the library was ever built in production mode your builds would've crashed due to missing ng-package.prod.json.

[sahofmann]

So ... after all 2 PRs:

The first one fixes Ivy compilation but still throws Class constructor FormControl … and needs adjustments on how you built your libraries.

The second one bumps the whole client-side project to Angular 13 with all it's shiny advantages. With this PR all errors are gone and compiles perfectly. But you still have to check if it works for your RxWeb environment.

It's yours to choose ;) (or abandon both)

[ajayojha]

Thank You So Much @sahofmann, I really appreciate your efforts in fixing the issue, Soon, The PR will be reviewed and merged the same :).

[ajayojha]

@sahofmann if you have a sample code of producing this issue "throws Class constructor FormControl", then please share the same.

[sahofmann]

This error has gone with the Angular 13 update you've already merged. Thanks for that. If you still need a sample let me know.

[matusko89]

Hey, will there be a new release with this fix?

[nita-au]

Any update on an upcoming version for this fix?
2.1.7 has this issue as being resolved, however the commits to resolve the issue were merged in after the release was cut.

[ajayojha]

if anyone tests this build copy in their machine, if it's working then I release the same. I appreciate @sahofmann work on this issue but I was facing some issues with my machine for creating a build copy. I would request if anyone spare some time to test with this build copy.

[mikerentmeister]

Any update on this by chance?

[ajayojha]

@mikerentmeister I have attached a build copy of the package in my previous comment, would be great if you/someone else check in the local environment, if everything works well then would be happy to release the same :).

[jgomesmv]

@ajayojha I tried to run the command ng build reactive-form-validators on the solution you shared but it didn't work.
I believe it's due to the fact that angular.json is missing:

Do you mind to publish a release candidate version on NPM so that we can easily install and test?

Thanks for the help!

[ajayojha]

@jgomesmv I have released the rc version, please check the same.

[jgomesmv]

@ajayojha I have tested rc version:

• Install no longer showns any error
• I have used a few validators like: greaterThen, lessThen, noneOf

Good job! Everything works as expected! Thanks a lot for the help!

I have checked this branches package.json:
Master
Development
revert-585-upgrade-to-angular-13

In all of them you are using angular 12. Are there any plans to support angular 13, 14 and 15?

Cheers!

[ajayojha]

@jgomesmv Thanks for the update. I am going to create a separate branch for angular 13 & above version support and the release version starts with 1X.X.X....

[ajayojha]

I am closing this ticket as the issue has been resolved and the stable version (13.0.0) has been released.

Thanks to everyone who has helped with this issue :).

[sahofmann]

Hi, first of all, sorry that my PR caused more issues than it solved.
We've faced that Version 13 ist only compatible with at least Angular 14 and produces errors in Angular 13 - Projects. I need to do some tests on this but for now we stick to the "dirty" fixed version I provided as a PR.