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.
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
Hi,
I have tried this order and I do not receive an exception. However, the data is still not being returned. I have emailed my solution for a different ticket (9631), you can check that solution and see if you can get the data.
Hi @maliming
We need to get the data for a particular tenant, is that not possible?
We also get a null exception, see the attached.
Hi @maliming,
I have tried your method and I don't get the error now. However, no data is returned from the database, even though data exists in the database.
public class EthnicityAppService_Tests : AppTestBase
{
private readonly IRepository<Ethnicity> _ethnicityRepositroy;
private readonly IUnitOfWorkManager _unitOfWorkManager;
public EthnicityAppService_Tests()
{
_ethnicityRepositroy = Resolve<IRepository<Ethnicity>>();
_unitOfWorkManager = Resolve<IUnitOfWorkManager>();
}
public async Task<List<EthnicitiesListDto>> GetAll()
{
List<EthnicitiesListDto> a = new List<EthnicitiesListDto>();
using (var uow = _unitOfWorkManager.Begin())
{
var test = from ethnicity in _ethnicityRepositroy.GetAll()
select new EthnicitiesListDto
{
Id = ethnicity.Id,
Text = ethnicity.Text,
Code = ethnicity.Code,
TenantId = ethnicity.TenantId
};
a = test.ToList();//No Data is apppearing, event though database has the data
await uow.CompleteAsync();
}
return a;
}
}
No data is appearing event though there is data in the database. I even tried by using tenant id e.g
from ethnicity in _ethnicityRepositroy.GetAll().Where(e => e.TenantId == 3) but of no use.
public class MyAppService_Tests : AppTestBase
{
private readonly EthnicityAppService_Tests _ethnicityAppServiceTest;
public MyAppService_Tests()
{
_ethnicityAppServiceTest = Resolve<EthnicityAppService_Tests>();
}
[Fact]
public async Task GetAll_Test()
{
//I get error, the control goes into the function and then returns above error.
List<EthnicitiesListDto> ethnicities = await _ethnicityAppServiceTest.GetAll();
}
}
Thanks
Hi @ismcagdas
Did you get a chance to have a look at this issue, I had replied to your email 4 days ago.
Thanks
Hi @maliming,
I have done as you suggested but I am getting the following exception.
Message:
System.ObjectDisposedException : Cannot access a disposed object. A common cause of this error is disposing a context that was resolved from dependency injection and then later trying to use the same context instance elsewhere in your application. This may occur if you are calling Dispose() on the context, or wrapping the context in a using statement. If you are using dependency injection, you should let the dependency injection container take care of disposing context instances.
Object name: 'NebulaDbContext'.
Stack Trace:
DbContext.CheckDisposed()
DbContext.get_DbContextDependencies()
DbContext.get_Model()
InternalDbSet`1.get_EntityType()
InternalDbSet`1.get_EntityQueryable()
IQueryable.get_Provider()
Queryable.Select[TSource,TResult](IQueryable`1 source, Expression`1 selector)
EthnicityAppService_Tests.GetAll() line 1548
MyAppService_Tests.GetAll_Test() line 234
--- End of stack trace from previous location where exception was thrown
My ethnicity class is as follows:
public class EthnicityAppService_Tests : AppTestBase
{
private readonly IRepository<Ethnicity> _ethnicityRepositroy;
public EthnicityAppService_Tests()
{
_ethnicityRepositroy = Resolve<IRepository<Ethnicity>>();
}
public async Task<List<EthnicitiesListDto>> GetAll()
{
var ethnicities = from ethnicity in _ethnicityRepositroy.GetAll()
select new EthnicitiesListDto
{
Id = ethnicity.Id,
Text = ethnicity.Text,
Code = ethnicity.Code,
TenantId = ethnicity.TenantId
};
return ethnicities.ToList();
}
}
And I am calling above test from another class which requires data from the ethnicity table, I get error in GeteAll_Test() where I call the function.
public class MyAppService_Tests : AppTestBase
{
private readonly EthnicityAppService_Tests _ethnicityAppServiceTest;
public MyAppService_Tests()
{
_ethnicityAppServiceTest = Resolve<EthnicityAppService_Tests>();
}
[Fact]
public async Task GetAll_Test()
{
//I get error, the control goes into the function and then returns above error.
List<EthnicitiesListDto> ethnicities = await _ethnicityAppServiceTest.GetAll();
}
}
Hi,
Is there any update, can you please treat this on urgent basis as we need to schedule a go live and this is prohibiting it?
Thanks
Please answer the following questions before submitting an issue. YOU MAY DELETE THE PREREQUISITES SECTION.
It is taking long time for pages to load even if we load it the second time. The resources are being cached on browser but even then it takes long time. I have emailed a word document detailing the issue, please have a look. We are concerned that we have built our application and it is very slow.
Will I declare that service in Nebula.Tests project?