[BUG] Error: Interface 'ComponentOptions<T, V>' incorrectly extends interface 'ComponentSchema<T> & { [key: string]: any; }'.

[pauliax]

Environment

Please provide as many details as you can:

• Hosting type
  • [x ] Local deployment
    • Version: "@formio/angular": "5.3.0",
• Formio.js version: "formiojs": "^4.14.13",
• Frontend framework: Angular (15.2.7)
• strict mode: true

Steps to Reproduce

1. I am trying to migrate from Angular v14 to v15.
2. Angular 15 requires TypeScript version >= 4.8.2 and < 5.0.0.
3. I have updated my dependencies as per the official guide: https://update.angular.io/?l=3&v=14.0-15.0
4. When I run ng serve the compilation fails. Error is related to this formio package.

Expected behavior

Successful compilation.

Observed behavior

Error: node_modules/@formio/angular/formio.common.d.ts:4:18 - error TS2430: Interface 'ComponentOptions<T, V>' incorrectly extends interface 'ComponentSchema<T> & { [key: string]: any; }'.
  Type 'ComponentOptions<T, V>' is not assignable to type 'ComponentSchema<T>'.
    Types of property 'validate' are incompatible.
      Type 'V | undefined' is not assignable to type 'ValidateOptions | undefined'.
        Type 'V' is not assignable to type 'ValidateOptions | undefined'.
          Type 'V' is not assignable to type 'ValidateOptions'.

4 export interface ComponentOptions<T = any, V = ValidateOptions> extends ExtendedComponentSchema<T> {
                   ~~~~~~~~~~~~~~~~

  node_modules/@formio/angular/formio.common.d.ts:4:44
    4 export interface ComponentOptions<T = any, V = ValidateOptions> extends ExtendedComponentSchema<T> {
                                                 ~~~~~~~~~~~~~~~~~~~
    This type parameter might need an `extends ValidateOptions` constraint.
  node_modules/@formio/angular/formio.common.d.ts:4:44
    4 export interface ComponentOptions<T = any, V = ValidateOptions> extends ExtendedComponentSchema<T> {
                                                 ~~~~~~~~~~~~~~~~~~~
    This type parameter might need an `extends ValidateOptions | undefined` constraint.

Example

[hamodi]

i have been following this issue and waiting for a propper solution. It is already mentioned before btw. check this please #938

Also, do you mind sharing your package dependencies? you are using an older version of formio/angular and its allowing to to npm serve while it doesnt even let me compile the code and run locally.

thanks!

[pauliax]

i have been following this issue and waiting for a propper solution. It is already mentioned before btw. check this please #938

Also, do you mind sharing your package dependencies? you are using an older version of formio/angular and its allowing to to npm serve while it doesnt even let me compile the code and run locally.

thanks!

I can't compile it either. Dependencies:

  "dependencies": {
    "@angular/animations": "^15.2.7",
    "@angular/common": "^15.2.7",
    "@angular/compiler": "^15.2.7",
    "@angular/core": "^15.2.7",
    "@angular/elements": "^15.2.7",
    "@angular/flex-layout": "^15.0.0-beta.42",
    "@angular/forms": "^15.2.7",
    "@angular/material-moment-adapter": "^15.2.7",
    "@angular/platform-browser": "^15.2.7",
    "@angular/platform-browser-dynamic": "^15.2.7",
    "@angular/router": "^15.2.7",
    "@formio/angular": "^5.3.0",
    "@ngrx/store": "^15.4.0",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "@webcomponents/custom-elements": "^1.5.0",
    "angular-auth-oidc-client": "~15.0.4",
    "angular-calendar": "^0.29.0",
    "angular-calendar-scheduler": "^11.0.7",
    "bootstrap": "^5.2.0",
    "bootswatch": "^5.2.0",
    "ckeditor4-angular": "^3.1.1",
    "formiojs": "^4.14.13",
    "ngrx-store-localstorage": "^15.0.0",
    "rxjs": "~7.5.6",
    "tslib": "^2.4.0",
    "zone.js": "~0.11.7"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.6",
    "@angular-eslint/builder": "^15.2.1",
    "@angular-eslint/eslint-plugin": "^15.2.1",
    "@angular-eslint/eslint-plugin-template": "^15.2.1",
    "@angular-eslint/schematics": "^15.2.1",
    "@angular-eslint/template-parser": "^15.2.1",
    "@angular/cdk": "^15.2.7",
    "@angular/cli": "^15.2.6",
    "@angular/compiler-cli": "^15.2.7",
    "@angular/material": "^15.2.7",
    "@types/node": "^18.6.2",
    "@typescript-eslint/eslint-plugin": "^5.43.0",
    "@typescript-eslint/parser": "^5.43.0",
    "eslint": "^8.28.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jsdoc": "^39.3.3",
    "eslint-plugin-prefer-arrow": "^1.2.3",
    "eslint-plugin-prettier": "^4.2.1",
    "prettier": "^2.7.1",
    "protractor": "~7.0.0",
    "ts-node": "~10.9.1",
    "typescript": "^4.9.5"
  }

[hamodi]

Yea, the maintainers of this library need to keep up with the latest formiojs and angular versions. they are a bit behind and i am sure they are busy too. Unfortunately i am working on an enterprise solution and i think i will go back to vanilla formiojs and integrate it in my project's angular myself i am afraid.

Its not that much more difficult to integrate into angular than to keep waiting for this third party library to maintain upgrades.

[roma-formio]

@pauliax can you try to use @formio/angular@5.5.0-rc.10 and let us know if the issue is gone?

[pauliax]

5.5.0-rc.10

It works with 5.5.0-rc.10, thanks.