angular
angular copied to clipboard
formio
[BUG] Upgrade from 7.0.0 to 7.5.x/8.x on Angular 18 will not compile
Environment
Please provide as many details as you can:
- Hosting type
- [] Form.io
- [x] Local deployment
- Version: 7.5.x or 8.x
- Formio.js version: N/A
- Frontend framework: Angular 18.2.x using @angular-builders/custom-esbuild
- Browser: N/A
- Browser version: N/A
- Typescript 5.5.4
Steps to Reproduce
This is an upgrade from Angular 17 to Angular 18.2 and upgrading formio/angular from 7.0.0 to 7.5.x or 8.x
Expected behavior
Expect app to compile and run using ng serve {app}
Observed behavior
Application will not compile for ng serve {app}. Throws errors referencing @formio/deprecated-types which is not mentioned in the installation instructions but is fixable. Main issue is the cascade of other errors which appear to be missing dependencies being thrown from pretty much every .ts file within the node_modules/@formio install directory. Unsure if the formio/angular library is expecting other dependencies or what. Rolling back to 7.x with overrides compiles as expected and the usage works as expected within the compiled app.
Also, it does not seem to matter what version of formio/js is installed or bootstrap which is also used.
Example
Running ng serve {app} results in the following errors plus many more being displayed in the console
✘ [ERROR] TS2307: Cannot find module 'types' or its corresponding type declarations. [plugin angular-compiler]
node_modules/@formio/core/lib/error/FieldError.d.ts:1:34:
1 │ import { ValidationContext } from 'types';
╵ ~~~~~~~
✘ [ERROR] TS2307: Cannot find module 'types' or its corresponding type declarations. [plugin angular-compiler]
node_modules/@formio/core/lib/error/ProcessorError.d.ts:1:33:
1 │ import { ProcessorContext } from 'types';
╵ ~~~~~~~
✘ [ERROR] TS2307: Cannot find module 'utils' or its corresponding type declarations. [plugin angular-compiler]
node_modules/@formio/core/lib/modules/jsonlogic/index.d.ts:1:48:
1 │ import { BaseEvaluator, EvaluatorOptions } from 'utils';
╵ ~~~~~~~
✘ [ERROR] TS2307: Cannot find module 'types' or its corresponding type declarations. [plugin angular-compiler]
node_modules/@formio/core/lib/process/calculation/index.d.ts:1:98:
1 │ ...CalculationScope, CalculationContext, ProcessorInfo } from 'types';
╵ ~~~~~~~
✘ [ERROR] TS2307: Cannot find module 'types' or its corresponding type declarations. [plugin angular-compiler]
node_modules/@formio/core/lib/process/clearHidden.d.ts:1:81:
1 │ ...e, ProcessorContext, ProcessorInfo, ProcessorFnSync } from 'types';
╵ ~~~~~~~
This user has gotten the same error: https://github.com/formio/formio.js/issues/5993
Hi. We're running into the same issue as originally posted. I would be nice if this gets resolved since starting a new project on Angular 17 is no longer an option given LTS end date for it.
Hello, i suggest you to check out https://github.com/formio/formio.js/issues/5715#top as it should be fixed
Wanted to bump this issue as I am still seeing the same issue with both angular/formio 7.5 and 8.1 on Angular 19. I can create a new bug but it seems like this issue has not been fixed.
Perhaps the installation instructions need to be updated as may be I am missing some dependencies? Even installing the latest version of formiojs does not fix the issue.
I have made a basic angular app in stackblitz to show you the issues I am seeing. Please let me know if you can not access the page. https://stackblitz.com/edit/stackblitz-starters-rzjb9rc9?file=package.json Note you may have to run it with npm install --force as the current version of formio/angular does not support 19 out of the box. I setup the demo app to move to the latest angular 19.2 version (19.2.6) and added in the latest versions that I am aware of for the formio dependencies.
The fix (https://github.com/formio/core/pull/221) was released in @formio/[email protected], which was updated in @formio/[email protected] and above.
I expect it to be resolved if using those versions with @formio/angular 7.5 and 8.1.
I'm not sure what to expect with Angular 19, but we do expect to push some Angular 19 updates very soon, but would suggest going ahead and opening a new issue if needed.
@lane-formio Here is a stackblitz on node with angular 18.2 latest doing the same thing that was fixed - https://stackblitz.com/edit/stackblitz-starters-es4sxegk?file=package.json,src%2Fmain.ts. Are there other dependencies missing? Not sure what I am missing. Any help would be appreciated.
npm list from above stackblitz:
~/projects/stackblitz-starters-78xlg6ws
❯ npm list
[email protected] /home/projects/stackblitz-starters-78xlg6ws
+-- @angular-devkit/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @formio/[email protected]
+-- @formio/[email protected]
+-- @formio/[email protected]
+-- @formio/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]
Looks like Travis has a solution here: https://github.com/formio/angular/issues/1137#issuecomment-2932404031
You need to add the following to your tsconfig.json
{
...
"compilerOptions": {
...
"skipLibCheck": true,
...
I am not able to upgrade from Angular 17 to 18 due to some compile time errors like
Error: node_modules/@formio/js/lib/cjs/EventEmitter.d.ts:3:5 - error TS2416: Property 'emit' in type 'EventEmitter' is not assignable to the same property in base type 'EventEmitter<string | symbol, any>'. Type '(...args: any[]) => void' is not assignable to type '<T extends string | symbol>(event: T, ...args: any[]) => boolean'. Type 'void' is not assignable to type 'boolean'.
3 emit: (...args: any[]) => void; ~~~~
Error: node_modules/@formio/js/lib/cjs/Form.d.ts:365:30 - error TS2304: Cannot find name 'Webform'.
365 create(display: string): Webform | Wizard | PDF; ~~~~~~~
Error: node_modules/@formio/js/lib/cjs/Form.d.ts:365:40 - error TS2304: Cannot find name 'Wizard'.
365 create(display: string): Webform | Wizard | PDF; ~~~~~~
Error: node_modules/@formio/js/lib/cjs/Form.d.ts:365:49 - error TS2304: Cannot find name 'PDF'.
365 create(display: string): Webform | Wizard | PDF; ~~~
Error: node_modules/@formio/js/lib/cjs/Form.d.ts:404:62 - error TS2304: Cannot find name 'Webform'.
404 setForm(formParam: import('@formio/core').Form): Promise<Webform | Wizard | PDF>; ~~~~~~~
Error: node_modules/@formio/js/lib/cjs/Form.d.ts:404:72 - error TS2304: Cannot find name 'Wizard'.
404 setForm(formParam: import('@formio/core').Form): Promise<Webform | Wizard | PDF>; ~~~~~~
Error: node_modules/@formio/js/lib/cjs/Form.d.ts:404:81 - error TS2304: Cannot find name 'PDF'.
Any solution to resolve this errors while upgrading Angular ? I tried for "@formio/angular": "9.0.1", "@formio/js": "5.2.2"
Do you have anything other information to help reproduce? Specific versions?
@lane-formio Thanks for responding! Here are the specific versions I'm working with:
- Angular: 18.2.14
- @formio/angular: 9.0.1
- @formio/js: 5.2.2
- TypeScript: 5.4.5
- Node.js: v20.19.5
I have some custom components in my application by extending formio components like BaseComponent, TextFieldComponent, DataGridComponent
I tried without adding "skipLibCheck": true flag in tsconfig.json
Have you tried @formio/angular:8.1.0? It's specifically for angular 18.
Yes, I have tried for @formio/angular:8.1.0 Here, I am sharing demo application with formio https://stackblitz.com/edit/stackblitz-starters-w9vmyyrz?file=package.json
skipLibCheck should be set to true in your tsconfig.json because we use JSDoc for type emissions, not actual type-checked Typescript.
Have you tried this?