Unable to install @formio/angular 6.0.0-rc.3 version

[Muntazir86]

I am using angular cli v16 and what to install @formio/angular but getting below mentioned error

• Hosting type
  • [x] Form.io
    • Version: 6.0.0-rc.3

Steps to Reproduce

1. Run npm i @formio/[email protected]

Observed behavior

  npm ERR! code ETARGET
  npm ERR! notarget No matching version found for @formio/js@^5.0.0.
  npm ERR! notarget In most cases you or one of your dependencies are requesting
  npm ERR! notarget a package version that doesn't exist.

[hbaldwinRPT]

same issue here

[AshwinKumar-V]

Hey @Muntazir86 and @hbaldwinRPT, I tried to reproduce your issue and it seems to be working fine for me on Angular CLI v16.1.4. Can you provide more information if you're still facing the issue?

Steps tried to reproduce

npm i @formio/[email protected]

Observed behavior

added 2 packages, and audited 3 packages in 5s

found 0 vulnerabilities

[fomin-grigorich]

same for me on Angular 15. Should I try to update NG to v16?

[Muntazir86]

@fomin-grigorich this issue is not related to angular cli version. you can use npm i @formio/[email protected] -f to install formio for angular 15 or 16.

[Muntazir86]

@AshwinKumar-V i am getting this error npm ERR! code ETARGET npm ERR! notarget No matching version found for @formio/js@^5.0.0. npm ERR! notarget In most cases you or one of your dependencies are requesting npm ERR! notarget a package version that doesn't exist.

when i see @formio/js package version for 5.0.0 version on npmjs, it does not found there.

[fomin-grigorich]

@AshwinKumar-V tried to install but unfortunately it failed

npm i @formio/[email protected] npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: @formio/[email protected] npm WARN Found: @formio/js@undefined npm WARN node_modules/@formio/js npm WARN Could not resolve dependency: npm WARN peer @formio/js@"^5.0.0" from @formio/[email protected] npm WARN node_modules/@formio/angular npm WARN @formio/angular@"6.0.0-rc.3" from the root project npm ERR! code ETARGET npm ERR! notarget No matching version found for @formio/js@^5.0.0. npm ERR! notarget In most cases you or one of your dependencies are requesting npm ERR! notarget a package version that doesn't exist.

[AshwinKumar-V]

Hey @Muntazir86 and @fomin-grigorich, I tried to reproduce the issue again and this time I encountered the above error. After deep digging I found that the error is caused by closed PR #970 commit 1b49037 in the /projects/angular-formio/package.json file line 31.

As a workaround you can try these steps in order to manually install the peerDependencies

npm i @formio/[email protected] --save --legacy-peer-deps
npm i @formio/js --save --legacy-peer-deps
npm i @angular/elements

And this works for me. Let me know if it works for you guys too.

[travist]

Hello everyone. I am actively working to get these libraries released and synced. I appreciate your patience while I work on all the latest updates to our core renderer and this library. Hoping to have a new version out today with this fix in place.

[fomin-grigorich]

Hello, everyone! Next command did a trick for me and now I have installed version of formio/angular npm i @formio/[email protected] --save --legacy-peer-deps But unfortunately after ng serve the console is full of errors. Should I wait until stable release to try 6.0.0 version of formio/angular or it can be fixed somehow? Thanks!

Error: node_modules/@formio/angular/FormioBaseComponent.d.ts:86:88 - error TS2344: Type '{ form: { alias: "form"; required: false; }; submission: { alias: "submission"; required: false; }; src: { alias: "src"; required: false; }; url: { alias: "url"; required: false; }; service: { alias: "service"; required: false; }; ... 16 more ...; dataTableActions: { ...; }; }' does not satisfy the constraint '{ [key: string]: string; }'. Property '"form"' is incompatible with index signature. Type '{ alias: "form"; required: false; }' is not assignable to type 'string'. 86 static ɵcmp: i0.ɵɵComponentDeclaration<FormioBaseComponent, "ng-component", never, { "form": { "alias": "form"; "required": false; }; "submission": { "alias": "submission"; "required": false; }; "src": { "alias": "src"; "required": false; }; "url": { "alias": "u rl"; "required": false; }; "service": { "alias": "service"; "required": false; }; "options": { "alias": "options"; "required": false; }; "noeval": { "alias": "noeval"; "required": false; }; "formioOptions": { "alias": "formioOptions"; "required": false; }; "renderOptio ns": { "alias": "renderOptions"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "viewOnly": { "alias": "viewOnly"; "required": false; }; "hideLoading": { "alias": "hideLoading"; "required": false; }; "hideComponents": { "alias": "hideCom ponents"; "required": false; }; "refresh": { "alias": "refresh"; "required": false; }; "error": { "alias": "error"; "required": false; }; "success": { "alias": "success"; "required": false; }; "submitDone": { "alias": "submitDone"; "required": false; }; "language": { " alias": "language"; "required": false; }; "hooks": { "alias": "hooks"; "required": false; }; "renderer": { "alias": "renderer"; "required": false; }; "watchSubmissionErrors": { "alias": "watchSubmissionErrors"; "required": false; }; "dataTableActions": { "alias": "data TableActions"; "required": false; }; }, { "render": "render"; "customEvent": "customEvent"; "fileUploadingStatus": "fileUploadingStatus"; "submit": "submit"; "prevPage": "prevPage"; "nextPage": "nextPage"; "beforeSubmit": "beforeSubmit"; "rowAdd": "rowAdd"; "rowAdded": "rowAdded"; "rowEdit": "rowEdit"; "rowEdited": "rowEdited"; "rowDelete": "rowDelete"; "rowClick": "rowClick"; "rowSelectChange": "rowSelectChange"; "change": "change"; "invalid": "invalid"; "errorChange": "errorChange"; "formLoad": "formLoad"; "submissionLoad": "submissionLoad"; "ready": "ready"; }, never, never, false, never>;

Error: node_modules/@formio/angular/components/alerts/formio.alerts.component.d.ts:10:91 - error TS2344: Type '{ alerts: { alias: "alerts"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"alerts"' is incompatible with index signature.
    Type '{ alias: "alerts"; required: false; }' is not assignable to type 'string'.
10     static ɵcmp: i0.ɵɵComponentDeclaration<FormioAlertsComponent, "formio-alerts", never, { "alerts": { "alias": "alerts"; "required": false; }; }, { "focusComponent": "focusComponent"; }, never, never, false, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/@formio/angular/components/formbuilder/formbuilder.component.d.ts:35:89 - error TS2344: Type '{ form: { alias: "form"; required: false; }; options: { alias: "options"; required: false; }; formbuilder: { alias: "formbuilder"; required: false; }; noeval: { alias: "noeval"; required: false; }; refresh: { ...; }; rebuild: { ...; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"form"' is incompatible with index signature.
    Type '{ alias: "form"; required: false; }' is not assignable to type 'string'.
35     static ɵcmp: i0.ɵɵComponentDeclaration<FormBuilderComponent, "form-builder", never, { "form": { "alias": "form"; "required": false; }; "options": { "alias": "options"; "required": false; }; "formbuilder": { "alias": "formbuilder"; "required": false; }; "noeval": { "alias": "noeval"; "required": false; }; "refresh": { "alias": "refresh"; "required": false; }; "rebuild": { "alias": "rebuild"; "required": false; }; }, { "change": "change"; }, never, never, false, never>;                                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/@formio/angular/components/loader/formio.loader.component.d.ts:5:91 - error TS2344: Type '{ isLoading: { alias: "isLoading"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"isLoading"' is incompatible with index signature.
    Type '{ alias: "isLoading"; required: false; }' is not assignable to type 'string'.
5     static ɵcmp: i0.ɵɵComponentDeclaration<FormioLoaderComponent, "formio-loader", never, { "isLoading": { "alias": "isLoading"; "required": false; }; }, {}, never, never, false, never>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: Can't resolve 'node_modules/formiojs/dist/formio.full.min.css' in 'E:\dev\ibricks-v2-front-end'
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
× Failed to compile.
`

[Gregordy]

Hey @Muntazir86 @fomin-grigorich

I was able to install Formio with Angular 16.1.8 with this minimal setup

{
  "dependencies": {
    "@angular-devkit/build-angular": "^16.1.8",
    "@angular/cli": "^16.1.8",
    "@angular/platform-browser-dynamic": "^16.1.8",
    "@angular/router": "^16.1.8",
    "@formio/angular": "^5.5.0-rc.11",
    "@formio/js": "^5.0.0-rc.18",
    "typescript": "4.9.3",
    "zone.js": "0.8.0"
  }
}

[dinbtechit]

Hey @Muntazir86 @fomin-grigorich

I was able to install Formio with Angular 16.1.8 with this minimal setup

{
  "dependencies": {
    "@angular-devkit/build-angular": "^16.1.8",
    "@angular/cli": "^16.1.8",
    "@angular/platform-browser-dynamic": "^16.1.8",
    "@angular/router": "^16.1.8",
    "@formio/angular": "^5.5.0-rc.11",
    "@formio/js": "^5.0.0-rc.18",
    "typescript": "4.9.3",
    "zone.js": "0.8.0"
  }
}

@Gregordy I'm running into the below error. Do you have any recommendations on to resolve this?

Angular version is 16.1.8
"@formio/angular": "^6.0.0-rc.5",
"@formio/js": "^5.0.0-rc.27",

Error:

╰$ npm install                                                          
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^16.1.8" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0" from @formio/[email protected]
npm ERR! node_modules/@formio/angular
npm ERR!   @formio/angular@"^5.5.0-rc.11" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/srinivad/.npm/_logs/2023-08-22T18_43_28_190Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/srinivad/.npm/_logs/2023-08-22T18_43_28_190Z-debug-0.log

[fomin-grigorich]

@dinbtechit Can you try with "@formio/angular": "^5.5.0-rc.11" ?

[dinbtechit]

@fomin-grigorich - "@formio/angular": "^5.5.0-rc.11" worked. Thanks mate.

I have some feedback for formio team:

It would be nice if we had some docs showing the compatibility matrix for @formio/angular with the associated Angular and @formio/js versions.

Right now, we often run into peer dependency issues which require to use of the flag, --legacy-peer-dependency which is not ideal.

[Gregordy]

@dinbtechit Ah yeah it was the same for me. Because it was for a very simple project I used the force flag to bypass dependency resolution errors but that's clearly not ideal. : / The project in question was running really fine though, I didn't notice any unexpected behavior at runtime

[lane-formio]

@fomin-grigorich - "@formio/angular": "^5.5.0-rc.11" worked. Thanks mate.

I have some feedback for formio team:

It would be nice if we had some docs showing the compatibility matrix for @formio/angular with the associated Angular and @formio/js versions.

Right now, we often run into peer dependency issues which require to use of the flag, --legacy-peer-dependency which is not ideal.

@dinbtechit I agree this could be helpful. I'll get a ticket created for our documentation backlog.

[daneformio]

I created the documentation ticket, for internal tracking: FID-171. Closing this issue.