Closed learner291 closed 3 years ago
My package.json is given below.
{
"name": "abp-zero-template",
"version": "10.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"publish": "gulp build && ng build --prod",
"start": "gulp buildDev && ng serve --host 0.0.0.0 --port 4203",
"hmr": "gulp buildDev && ng serve --host 0.0.0.0 --port 4203 --hmr",
"test": "gulp buildDev && ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "gulp buildDev && protractor",
"create-dynamic-bundles": "gulp buildDev",
"nswag": "cd nswag/ && refresh.bat"
},
"private": false,
"dependencies": {
"@angular/animations": "^10.0.2",
"@angular/cdk": "^10.0.1",
"@angular/common": "^10.0.2",
"@angular/compiler": "^10.0.2",
"@angular/core": "^10.0.2",
"@angular/elements": "^11.0.3",
"@angular/forms": "^10.0.2",
"@angular/platform-browser": "^10.0.2",
"@angular/platform-browser-dynamic": "^10.0.2",
"@angular/platform-server": "^10.0.2",
"@angular/router": "^10.0.2",
"@fullcalendar/core": "^5.1.0",
"@microsoft/signalr": "^3.1.3",
"@swimlane/ngx-charts": "^16.0.0",
"abp-ng2-module": "^6.2.0",
"abp-web-resources": "^5.3.0",
"adal-angular": "^1.0.17",
"angular-formio": "^4.11.1",
"angular-gridster2": "^10.0.1",
"angular-oauth2-oidc": "^10.0.2",
"angular2-counto": "^1.2.5",
"angular2-text-mask": "^9.0.0",
"animate.css": "^4.1.0",
"chart.js": "^2.9.3",
"cookieconsent": "^3.1.1",
"core-js": "^3.6.4",
"famfamfam-flags": "^1.0.0",
"formiojs": "^4.12.1",
"js-cookie": "^2.2.1",
"just-compare": "^1.3.0",
"localforage": "^1.7.3",
"lodash-es": "^4.17.15",
"luxon": "^1.25.0",
"msal": "^1.2.2",
"ng2-file-upload": "^1.4.0",
"ngx-bootstrap": "^5.6.1",
"ngx-captcha": "^8.0.1",
"ngx-image-cropper": "^3.1.4",
"ngx-perfect-scrollbar": "^9.0.0",
"ngx-spinner": "^9.0.1",
"object-path": "^0.11.4",
"primeicons": "^4.0.0",
"primeng": "^9.1.2",
"push.js": "^1.0.12",
"quill": "^1.3.7",
"rtl-detect": "^1.0.2",
"rxjs": "^6.5.4",
"simple-line-icons": "^2.4.1",
"sweetalert2": "^9.10.7",
"text-mask-addons": "^3.8.0",
"tslib": "^2.0.0",
"webdriver-manager": "^12.1.7",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1000.0",
"@angular/cli": "^10.0.0",
"@angular/compiler-cli": "^10.0.2",
"@angularclass/hmr": "^2.1.3",
"@angularclass/hmr-loader": "^3.0.4",
"@types/jasmine": "~3.5.10",
"@types/jasminewd2": "^2.0.8",
"@types/lodash-es": "^4.17.0",
"@types/node": "^14.0.14",
"codelyzer": "^6.0.0",
"globby": "^11.0.1",
"gulp": "^4.0.1",
"gulp-clean-css": "^4.3.0",
"gulp-concat": "^2.6.1",
"gulp-less": "^4.0.1",
"gulp-postcss": "^8.0.0",
"gulp-uglify": "^3.0.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.1.0",
"karma-chrome-launcher": "~3.1.0",
"karma-cli": "~2.0.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"merge-stream": "^2.0.0",
"nswag": "^13.7.4",
"postcss-url": "^9.0.0",
"prettier": "2.1.2",
"protractor": "~7.0.0",
"ts-node": "~8.10.2",
"tslint": "~6.1.0",
"tslint-config-prettier": "^1.18.0",
"typescript": "3.9.6"
}
}
Updating this item again, in case someone can pickup the issue and help resolve?
I deleted node-modules and installed everything again but still the same error appears. I got the below warning regarding incorrect peer dependency, could this be the reason?
warning " > angular-formio@4.11.1" has incorrect peer dependency "@angular/core@^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0".
warning " > angular-formio@4.11.1" has incorrect peer dependency "@angular/common@^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0".
warning " > angular-formio@4.11.1" has incorrect peer dependency "@angular/forms@^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0".
warning " > angular-formio@4.11.1" has incorrect peer dependency "@angular/router@^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0".
warning " > angular-formio@4.11.1" has incorrect peer dependency "@angular/elements@^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0".
warning " > angular-formio@4.11.1" has incorrect peer dependency "zone.js@^0.8.0".
[4/4] Building fresh packages...
success Saved 2 new dependencies.
info Direct dependencies
├─ angular-formio@4.11.1
└─ formiojs@4.12.1
info All dependencies
├─ angular-formio@4.11.1
└─ formiojs@4.12.1
Done in 29.24s.
Further update,
If I use Formio.CreateForm
in test.component.ts and use <form id='formio'> </form>
in test.component.html file then it works but I suppose this is using formio.js library instead of Angular.
Can someone please help how to fix angular-formio issue?
ngOnInit(): void {
Formio.createForm(document.getElementById('formio'), {
"title": "My Test Form",
"components": [
{
"type": "textfield",
"input": true,
"tableView": true,
"inputType": "text",
"inputMask": "",
"label": "First Name",
"key": "firstName",
"placeholder": "Enter your first name",
"prefix": "",
"suffix": "",
"multiple": false,
"defaultValue": "",
"protected": false,
"unique": false,
"persistent": true,
"validate": {
"required": true,
"minLength": 2,
"maxLength": 10,
"pattern": "",
"custom": "",
"customPrivate": false
},
"conditional": {
"show": "",
"when": null,
"eq": ""
}
},
{
"type": "textfield",
"input": true,
"tableView": true,
"inputType": "text",
"inputMask": "",
"label": "Last Name",
"key": "lastName",
"placeholder": "Enter your last name",
"prefix": "",
"suffix": "",
"multiple": false,
"defaultValue": "",
"protected": false,
"unique": false,
"persistent": true,
"validate": {
"required": true,
"minLength": 2,
"maxLength": 10,
"pattern": "",
"custom": "",
"customPrivate": false
},
"conditional": {
"show": "",
"when": null,
"eq": ""
}
},
{
"input": true,
"label": "Submit",
"tableView": false,
"key": "submit",
"size": "md",
"leftIcon": "",
"rightIcon": "",
"block": false,
"action": "submit",
"disableOnInvalid": true,
"theme": "primary",
"type": "button"
}
]
}, {
readOnly: false
}
);
}
I have manged to fix this issue. This issue was not related to angular-formio.
I needed to import angular-formio in a different module which was the requirement of the framework I was using.
I have manged to fix this issue. This issue was not related to angular-formio.
I needed to import angular-formio in a different module which was the requirement of the framework I was using.
Hello, I'm running into this exact issue. Can you please explain how/where you used angular-formio for solving the issue above?
I have manged to fix this issue. This issue was not related to angular-formio. I needed to import angular-formio in a different module which was the requirement of the framework I was using.
Hello, I'm running into this exact issue. Can you please explain how/where you used angular-formio for solving the issue above?
Hello, please were you able to fix this issue?? If yes, Please how??
I have manged to fix this issue. This issue was not related to angular-formio.
I needed to import angular-formio in a different module which was the requirement of the framework I was using.
Please I'm having the exact same issue, How where you able to fix it??
I have used formio.js successfully for a while and now I am checking out angular-formio but I am receiving Error NG8001: formio is not a known element. I have followed the angular demo and compared it with my project but unable to find any difference in my project.
Can someone please help, I have spent a couple of days trying to figure this out but to no avail?
Please see below the steps that I used:
npm install --save angular-formio
FormioResources
I receive the following error