search

formio / angular

JSON powered forms for Angular
https://formio.github.io/angular-demo
MIT License
642 stars 469 forks source link

[Question] Not able to run ionic project after installing angular-formio #564

Closed angelvantony closed 8 months ago

angelvantony commented 4 years ago

Hi, I'm trying to include formio in my ionic project. So installed angular-formio. But after installation, on running the project, I'm getting errors in the plugin files itself.

Here are a few of the errors : `typescript: .../node_modules/angular-formio/custom-component/create-custom-component.d.ts, line: 11 ';' expected.

  L10:  component: ExtendedComponentSchema<any>;
  L11:  elementInfo(): import("formiojs").ElementInfo;
  L12:  readonly inputInfo: {

typescript: .../node_modules/angular-formio/custom-component/create-custom-component.d.ts, line: 11 Identifier expected.

  L10:  component: ExtendedComponentSchema<any>;
  L11:  elementInfo(): import("formiojs").ElementInfo;
  L12:  readonly inputInfo: {

typescript: .../node_modules/angular-formio/custom-component/create-custom-component.d.ts, line: 11 ';' expected.

  L10:  component: ExtendedComponentSchema<any>;
  L11:  elementInfo(): import("formiojs").ElementInfo;
  L12:  readonly inputInfo: {
 ...
 ...
 ...

typescript: .../node_modules/angular-formio/FormioBaseComponent.d.ts, line: 42 Type 'ElementRef' is not generic.

  L41:  ready: EventEmitter<FormioBaseComponent>;
  L42:  formioElement?: ElementRef<any>;
  L43:  AlertsPosition: typeof AlertsPosition;

typescript: .../node_modules/angular-formio/components/formbuilder/formbuilder.component.d.ts, line: 24 Type 'ElementRef' is not generic.

  L23:  change?: EventEmitter<object>;
  L24:  builderElement?: ElementRef<any>;
  L25:  constructor(ngZone: NgZone, config: FormioAppConfig, customTags?: CustomTagsService);`

All the errors about import is in the create-custom-component.d.ts file. Tried installing a lower version of the plugin which does not include custom-component file. Then the import errors disappeared, but ElementRef error persists.

What does "Type 'ElementRef' is not generic." mean?!

This is my ionic-info : `Ionic:

Ionic CLI : 5.4.16 (...\AppData\Roaming\npm\node_modules\ionic) Ionic Framework : ionic-angular 3.9.2 @ionic/app-scripts : 3.1.11

Cordova:

Cordova CLI : 8.1.2 (cordova-lib@8.1.1) Cordova Platforms : android 8.0.0 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 1.2.1, (and 20 other plugins)

Utility:

cordova-res : not installed native-run : 0.3.0

System:

Android SDK Tools : 26.1.1 (...\AppData\Local\Android\Sdk) NodeJS : v10.13.0 (...\Program Files\nodejs\node.exe) npm : 6.4.1 OS : Windows 10`

And the version of all '@angular/...' dependencies in package.json is 5.2.11(except '@angular/elements' - lowest available version is 6.1.10)

I've been stuck with this issue for days. What is the actual cause for the errors? Is it some version mismatch issue? How can I solve it? Somebody please help!

edwinanciani commented 4 years ago

Could you provide Type Script? You are running an old angular version. Try to update angular cli and core.

angelvantony commented 4 years ago

This is the plugin file in which I get the error: create-custom-component.d.ts import { BuilderInfo, ExtendedComponentSchema } from 'formiojs'; import { FormioCustomComponentInfo, FormioCustomElement } from '../elements.common'; export declare function createCustomFormioComponent(customComponentOptions: FormioCustomComponentInfo): { new (component: ExtendedComponentSchema<any>, options: any, data: any): { id: string; type: string; _customAngularElement: FormioCustomElement; readonly defaultSchema: ExtendedComponentSchema<any>; readonly emptyValue: any; component: ExtendedComponentSchema<any>; elementInfo(): import("formiojs").ElementInfo; readonly inputInfo: { type: string; component: ExtendedComponentSchema<any>; changeEvent: string; attr: any; content: string; id: any; }; renderElement(value: any, index: number): any; attach(element: HTMLElement): any; useWrapper(): boolean; readonly defaultValue: any; readonly maskOptions: { label: any; value: any; }[]; readonly isMultipleMasksField: boolean; getMaskByName(maskName: string): any; setInputMask(input: any, inputMask: any): any; getMaskOptions(): { label: any; value: any; }[]; readonly remainingWords: number; setCounter(type: string, element: any, count: number, max: number): void; updateValueAt(value: any, flags: any, index: string | number): void; getValueAt(index: string | number): any; updateValue(value: any, flags: any, index: string | number): any; attachElement(element: any, index: string | number): void; readonly widget: any; createWidget(index: string | number): any; addFocusBlurEvents(element: any): void; dataValue: any; readonly addAnother: any; renderRow(value: any, index: any): any; onSelectMaskHandler(event: any): void; tryAttachMultipleMasksInput(): boolean; updateMask(input: any, mask: any): void; addNewValue(value: any): void; addValue(): void; render(element: any): any; originalComponent: any; refs: Object; attached: boolean; rendered: boolean; data: Object; error: string; tooltip: string; row: any; pristine: boolean; parent: any; root: any; lastChanged: any; triggerRedraw: Function; tooltips: any[]; invalid: boolean; isBuilt: boolean; readonly ready: any; readonly labelInfo: any; init(): void; destroy(): void; readonly shouldDisabled: any; readonly isInputComponent: boolean; readonly hasInput: boolean; readonly key: any; parentVisible: any; parentDisabled: any; visible: any; currentForm: any; readonly fullMode: boolean; readonly builderMode: boolean; getModifiedSchema(schema: ExtendedComponentSchema<any>, defaultSchema: import("formiojs").ComponentSchema<any>, recursion: boolean): ExtendedComponentSchema<any>; readonly schema: ExtendedComponentSchema<any>; t(text: string, params?: Object): any; labelIsHidden(): boolean; readonly transform: any; getTemplate(names: any, modes: any): any; checkTemplate(templates: any, names: any, modes: any): any; checkTemplateMode(templatesByName: any, modes: any): any; renderTemplate(name: any, data: any, modeOption?: any[]): any; sanitize(dirty: string): any; renderString(template: any, data: any): HTMLElement; performInputMapping(input: any): any; getBrowserLanguage(): string; beforeNext(): any; beforePage(): any; beforeSubmit(): any; readonly submissionTimezone: any; readonly canDisable: boolean; loadRefs(element: any, refs: any): any; build(element: any): any; addShortcut(element: any, shortcut: any): void; removeShortcut(element: any, shortcut: any): void; detach(): void; attachRefreshEvent(refreshData: any): void; attachRefreshOn(): void; refresh(value: any): void; inContext(component: any): boolean; readonly viewOnly: any; createViewOnlyElement(): HTMLElement; readonly defaultViewOnlyValue: "-"; getValueAsString(value: any): string; getView(value: any): string; updateItems(...args: any[]): void; createModal(): HTMLElement; readonly className: string; readonly customStyle: string; getElement(): HTMLElement; evalContext(additional: any): any; setPristine(pristine: boolean): void; removeValue(index: number): void; iconClass(name: any, spinning: any): any; readonly name: string; readonly errorLabel: string; errorMessage(type: any): any; setContent(element: any, content: any): boolean; redraw(): any; rebuild(): any; removeEventListeners(): void; hasClass(element: any, className: string): any; addClass(element: any, className: string): any; removeClass(element: any, className: string): any; hasCondition(): boolean; conditionallyVisible(data: any): boolean; checkCondition(row: any, data: Object): boolean; checkConditions(data: any): any; readonly logic: any[]; fieldLogic(data: any): any; applyActions(actions: any[], result: any, data: any, newComponent: any): boolean; addInputError(message: any, dirty: boolean): void; clearOnHide(show: boolean): void; onChange(flags: Object, fromRoot: boolean): void; readonly wysiwygDefault: { theme: string; placeholder: any; modules: { clipboard: { matchVisual: boolean; }; toolbar: any[]; }; }; addCKE(element: any, settings: Object, onChange: (input: any) => any): any; addQuill(element: any, settings: Object, onChange: (input: any) => any): any; addAce(element: any, settings: Object, onChange: (input: any) => any): any; hasValue(data: Object): boolean; readonly rootValue: any; readonly rootPristine: any; splice(index: string | number): void; deleteValue(): void; getValue(): any; setValue(value: any, flags: any): boolean; setValueAt(index: number, value: any, flags: any): void; readonly hasSetValue: boolean; restoreValue(): void; normalizeValue(value: any): any; getIcon(name: any, content: any, styles: any, ref?: string): any; resetValue(): void; hasChanged(before: any, after: any): boolean; updateOnChange(flags: any, changed: any): boolean; calculateValue(data: Object, flags: any): boolean; label: any; getRoot(): import("formiojs/types/components/_classes/component/component").Component; invalidMessage(data: any, dirty: boolean, ignoreCondition?: boolean): any; isValid(data: any, dirty: boolean): boolean; checkValidity(data: any, dirty: any, rowData: any): boolean; readonly validationValue: any; isEmpty(value: any): boolean; validateMultiple(): boolean; readonly errors: any[]; setCustomValidity(message: any, dirty: any): void; shouldSkipValidation(data: any, dirty: any, rowData: any): boolean; whenReady(): any; readonly dataReady: any; asString(value: any): string; disabled: boolean; setDisabled(element: any, disabled: any): void; setLoading(element: any, loading: any): void; selectOptions(select: any, tag: any, options: any, defaultValue: any): void; setSelectValue(select: any, value: any): void; clear(): any; append(element: HTMLElement): void; prepend(element: HTMLElement): void; removeChild(element: HTMLElement): void; attachLogic(): void; autofocus(): void; focus(): void; readonly shouldDisable: boolean; readonly info: import("formiojs").ElementInfo; element: any; validators: ("required" | "minLength" | "maxLength" | "pattern" | "custom" | "customPrivate" | "min" | "max" | "minSelectedCount" | "maxSelectedCount" | "minWords" | "maxWords" | "email" | "url" | "date" | "day" | "json" | "mask" | "minDate" | "maxDate")[]; calculatedValue: any; options: any; labelElement: any; eventHandlers: any[]; i18next: any; events: import("formiojs/types/eventEmitter").EventEmitter; defaultMask: any; inputMasks: any[]; on(event: string, cb: Function, internal: boolean, once?: boolean): any; once(event: string, cb: Function, internal: boolean): any; onAny(cb: Function): any; off(event: string): void; emit(event: string, data: Object): void; addEventListener(obj: HTMLElement, type: string, func: Function, persistent?: boolean): any; removeEventListener(obj: Object, type: any): any; removeAllEvents(includeExternal: boolean): void; appendTo(element: HTMLElement, container: HTMLElement): any; prependTo(element: HTMLElement, container: HTMLElement): any; removeChildFrom(element: HTMLElement, container: HTMLElement): any; ce(type: string, attr?: Object, children?: string | HTMLElement | (string | HTMLElement)[]): HTMLElement; appendChild(element: any, child: any): any; maskPlaceholder(mask: HTMLElement): string; text(text: string): Text; attr(element: HTMLElement, attr: Object): void; empty(element: HTMLElement): void; interpolate(string: any, data: any): any; evaluate(func: any, args: any, ret: any, tokenize?: any): any; hook(...args: any[]): any; }; editForm: () => { components: ExtendedComponentSchema<any>[]; }; schema(): ExtendedComponentSchema<any>; readonly builderInfo: BuilderInfo; tableView(value: any, options: any): void; };

Current dependencies in package.json : "dependencies": { "@angular/animations": "5.2.11", "@angular/common": "5.2.11", "@angular/compiler": "5.2.11", "@angular/compiler-cli": "5.2.11", "@angular/core": "5.2.11", "@angular/forms": "5.2.11", "@angular/http": "5.2.11", "@angular/platform-browser": "5.2.11", "@angular/platform-browser-dynamic": "5.2.11", "@ionic-native/android-permissions": "^4.20.0", "@ionic-native/badge": "^4.20.0", "@ionic-native/base64-to-gallery": "^4.11.0", "@ionic-native/camera": "^4.11.0", "@ionic-native/core": "^4.10.1", "@ionic-native/crop": "^4.11.0", "@ionic-native/diagnostic": "^4.17.0", "@ionic-native/geolocation": "^4.12.0", "@ionic-native/http": "^4.20.0", "@ionic-native/location-accuracy": "^4.17.0", "@ionic-native/native-page-transitions": "^4.11.0", "@ionic-native/network": "^4.15.0", "@ionic-native/open-native-settings": "^4.16.0", "@ionic-native/push": "^4.20.0", "@ionic-native/sim": "^4.20.0", "@ionic-native/sms": "^4.20.0", "@ionic-native/splash-screen": "^4.10.1", "@ionic-native/sqlite": "^4.20.0", "@ionic-native/status-bar": "~4.10.0", "@ionic/storage": "^2.1.3", "@ngx-translate/core": "^10.0.2", "@ngx-translate/http-loader": "^3.0.1", "@types/node": "^14.0.6", "angular-formio": "^4.8.4", "angular-weather-widget": "^1.2.4", "com.telerik.plugins.nativepagetransitions": "^0.6.5", "cordova-android": "^8.0.0", "cordova-android-firebase-gradle-release": "^4.0.0", "cordova-android-play-services-gradle-release": "^1.4.6", "cordova-azure-notification-hubs": "^1.0.6", "cordova-base64-to-gallery": "^4.1.3", "cordova-open-native-settings": "^1.5.2", "cordova-plugin-android-permissions": "^1.0.2", "cordova-plugin-badge": "^0.8.8", "cordova-plugin-camera": "^4.1.0", "cordova-plugin-crop": "^0.4.0", "cordova-plugin-device": "^2.0.3", "cordova-plugin-geolocation": "^4.0.2", "cordova-plugin-ionic-keyboard": "^2.2.0", "cordova-plugin-ionic-webview": "^1.2.1", "cordova-plugin-network-information": "^2.0.2", "cordova-plugin-request-location-accuracy": "^2.3.0", "cordova-plugin-sim": "^1.3.3", "cordova-plugin-splashscreen": "^5.0.3", "cordova-plugin-statusbar": "^2.4.3", "cordova-plugin-whitelist": "^1.3.4", "cordova-sms-plugin": "^1.0.0", "cordova-sqlite-storage": "^2.6.0", "cordova-support-google-services": "^1.3.2", "cordova.plugins.diagnostic": "^4.0.10", "intl": "^1.2.5", "ionic-angular": "3.9.2", "ionic-img-viewer": "^2.9.0", "ionic2-calendar": "^0.4.5", "ionicons": "3.0.0", "moment": "^2.24.0", "ng2-translate": "^5.0.0", "phonegap-plugin-multidex": "^1.0.0", "rxjs": "5.5.11", "sw-toolbox": "3.6.0", "zone.js": "0.8.26" }, "devDependencies": { "@ionic/app-scripts": "3.1.11", "typescript": "~2.6.2" },

@edwinanciani How can i update this?

Sidiro23 commented 8 months ago

We're currently addressing a backlog of GitHub issues, and as part of this effort, some inactive issues may be marked as closed. This isn't a dismissal, but a step toward more efficient tracking.

If you feel the issue is still relevant, please re-open and we'll ensure it gets the attention it deserves. Your understanding is appreciated as we work to enhance our open-source responsiveness.