What is your product version? 10 Latest
What is your product type (Angular or MVC)? ASP.net Core and Angular
What is product framework type (.net framework or .net core)? .NET5
What is ABP Framework version? The one that comes up with ASP.NET and Angular v10.
I am having issue with installing a third party library angular-formio and formio. I installed this library using the following command
npm install --save angular-formio formio
Next, I added the following imports in my app.module.ts
import { Formio, FormioModule, FormioAppConfig } from 'angular-formio';
import { FormioGrid } from 'angular-formio/grid';
I add FormioModule and FormioAppConfig in the import and FormioResources in the provider sections of NgModule
@NgModule({
declarations: [
AppComponent,
HomeComponent,
DataComponent
],
imports: [
BrowserModule,
CommonModule,
FormioModule,
FormioGrid,
RouterModule.forRoot([
{
path: '',
component: HomeComponent
},
{
path: 'data',
component: DataComponent
},
{
path: 'forms',
loadChildren: './forms/forms.module#FormsModule'
},
{
path: 'auth',
loadChildren: './auth/auth.module#AuthModule'
},
{
path: 'event',
loadChildren: './event/event.module#EventModule'
},
{
path: 'manager',
loadChildren: './form/form.module#FormModule'
}
], {useHash: true})
],
providers: [
PrismService,
FormioAuthService,
FormioResources,
{provide: FormioAppConfig, useValue: AppConfig},
{provide: FormioAuthConfig, useValue: {
login: {
form: 'user/login'
},
register: {
form: 'user/register'
}
}}
],
bootstrap: [AppComponent]
})
In my component file test.component.ts, I have the following
@Component({
templateUrl: './test.component.html',
animations: [appModuleAnimation()]
})
export class TestComponent extends AppComponentBase implements OnInit {
constructor(
injector: Injector,
private _testService: TestServiceProxy
) {
super(injector);
}
ngOnInit(): void {
}
}
In test.component.html, I have the following:
<formio [form]="{components: [
{
type: 'textfield',
label: 'FirstName',
key: 'firstName',
input: true
},
{
type: 'textfield',
label: 'LastName',
key: 'lastName',
input: true
},
{
type: 'email',
label: 'Email',
key: 'email',
input: true
},
{
type: 'button',
action: 'submit',
label: 'Submit',
theme: 'primary'
}
]}" [submission]="{
data: {
firstName: 'Joe',
lastName: 'Smith',
email: '[email protected]'
}
}"></formio>
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"
}
}
I receive the following error
ERROR in src/app/admin/mycomponent/test.component.html:103:21 - error NG8001: 'formio' is not a known element:
1. If 'formio' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
103 <formio [form]="{components: [
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
104 {
~~~~~~~~~~~~~
...
133 }
~~~~~~~~~~~~~
134 }"></formio>
~~~~~~~~~~~~~~~~~~~~~~
I have compared it with the following demo as well but to no avail. Demo works fine on its on but it is not working on ASPNET Zero angular project. I have spent two days on it but unable to fix it.
I have tried adding it in root.module.ts instead of app.module.ts but to no avail.
The same issue is happening with KendoGrid import, see below. There must be some easy steps for using third party components.
ERROR in src/app/admin/roles/roles.component.html:103:21 - error NG8001: 'kendo-grid' is not a known element:
1. If 'kendo-grid' is an Angular component, then verify that it is part of this module.
2. If 'kendo-grid' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
103 <kendo-grid [data]="gridData" [height]="410">
Can you help?
Thanks
3 Answer(s)
-
0
I am very interested in this answer because I need to use Syncfusion controls. Please be detailed in your answer for this person asking the question and for myself using another set of controls.
-
0
Hi @learner29
Could you try adding it to admin.module as well ?
Hi @murphymj5209
Steps @learner29 followed are correct, just the import of the module is wrong I guess.
-
0
I have added the import in admin.module.ts because I was using it in admin > roles component and it has worked.
I suggest to add this in tutorial to save time for others and make the transition easier to ASPNET Core and Angular project.
