Create reactive form w/ a formarray. add an item into the formarrary, then remove it
core.js:6142 ERROR TypeError: Cannot read property 'errors' of null at MapSubscriber.project (ngx-validate-core.js:1213) at MapSubscriber._next (map.js:29) at MapSubscriber.next (Subscriber.js:49) at FilterSubscriber._next (filter.js:33) at FilterSubscriber.next (Subscriber.js:49) at MergeMapSubscriber.notifyNext (mergeMap.js:70) at SimpleInnerSubscriber._next (innerSubscribe.js:10) at SimpleInnerSubscriber.next (Subscriber.js:49) at MapToSubscriber._next (mapTo.js:19) at MapToSubscriber.next (Subscriber.js:49)
Also we are still getting this error, mainly on pages with tabs. I reported this error before and it was replicated by abp.
ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ''. Current value: 'View_AbpUsers'.. Find more at https://angular.io/errors/NG0100 at throwErrorIfNoChangesMode (core.js:6724) at bindingUpdated (core.js:12855) at ɵɵproperty (core.js:14670) at LookupInputComponent_Template (volo-abp.commercial.ng.ui.js:223) at executeTemplate (core.js:9518) at refreshView (core.js:9387) at refreshComponent (core.js:10553) at refreshChildComponents (core.js:9184) at refreshView (core.js:9437) at refreshComponent (core.js:10553)
All of our datepickers pick the day before not the user selected date. An example is Administration | Audit Logs. Select any start time and the date before is selected. Same goes for end time as well as for pages we control
ABP Framework version: v4.3.3
UI type: Angular
DB provider: EF Core
Tiered (MVC) or Identity Server Separated (Angular): no
Exception message and stack trace:
Steps to reproduce the issue:"
i created a new project using the cmd: abp new Angular.TypeAhead -t app-pro -u angular --mobile none --database-provider ef -csf
in suite I create 2 entities Author and Book
i create a navigational property from Book to Author
I run the project add an Author and then try and add a book
I can see items are brought in Chrome DevTools back when I type into the authors fields, but no choices are displayed
If I change the typeahead to a dropdown in suite and then go back into books, i can select the author and save the item.
i have a ngbNav, with 7 tabs. i click save without some fields entered. the fields are required. i want the user to see what errors are. i change tabs after clicking submit and get the error. the error breaks the modal, i cannot cancel out of the moda. after googling it appears the error is becuase the validation component is being injected dynamically. short of disabling the save button if there are errors, i don't know how to prevent the issue happening.
It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook?\n at throwErrorIfNoChangesMode (http://localhost:4200/vendor.js:11512:11)\n at bindingUpdated (http://localhost:4200/vendor.js:17623:17)\n at Module.ɵɵproperty (http://localhost:4200/vendor.js:19438:9)\n at ValidationErrorComponent_Template (http://localhost:4200/vendor.js:91900:65)\n at executeTemplate (http://localhost:4200/vendor.js:14286:9)\n at refreshView (http://localhost:4200/vendor.js:14155:13)\n at refreshComponent (http://localhost:4200/vendor.js:15321:13)\n at refreshChildComponents (http://localhost:4200/vendor.js:13952:9)\n at refreshView (http://localhost:4200/vendor.js:14205:13)\n at refreshEmbeddedViews (http://localhost:4200/vendor.js:15275:17)
is there any documentation on how to use the control 'abp-lookup-typeahead' in angular? This what i tried so far. I see another parameter called filter that might be needed, but not sure how to use it
<abp-lookup-typeahead
[getFn]="settings"
displayNameProp="displayName"
lookupFilterProp="displayName"
formControlName="category">
</abp-lookup-typeahead>
Thanks for the response. I will give this a try when 4.3 is released and we upgrade our solutions. It looks like the code which I got caught in has been changed.
fromEvent(window, 'beforeunload')
.pipe(takeUntil(this.destroy$))
.subscribe(event => {
event.preventDefault();
if (this.isFormDirty && !this.suppressUnsavedChangesWarning) {
event.returnValue = true;
** } else { delete event.returnValue; }** });
We are using a npm package that determines if the user has been idle for x minutes. The package works ok when the user is not in a modal. If the user is in a modal, the user gets the dialog below after calling authService.logout
To try and get around this, I added some code to remove all .ng-dirty before calling authService.logout, but I am still presented with the dialog from the window:beforeunload. I still want the user to be presented with a dialog if they make changes to a form and then forget to save the form, so I do not want to shut off the "are you sure you want to leave" entirely, just when they have been idle for more than x minutes. How do I logout the user and bring them back to the login screen without the dialogs?
Mehmet, is there any documentation that talks about being able to disable the dynamic loading of css? I assume this will stop all the Style1-6 from being loaded? Which version of ABP is this enhancement in?
This solution still have problems, when you have both lepton theme source code and account source code, you cannot change the style of the theme, (you still read the value from node module)
Hi Paul
- The theme-lepton library gets style files from
node_modules/@volo/abp.ng.theme.lepton/dist
folder. You should overwrite the CSS files after building. So you can use a command to achieve this like the following:yarn ng build theme-lepton && cp -r packages/theme-lepton/dist dist/theme-lepton
Then check the styles in
dist/theme-lepton/dist/styles
folder. You will see your edited styles there.
- You should add a variable named appInfo. This custom footer component works:
import { EnvironmentService } from '@abp/ng.core'; import { Component } from '@angular/core'; @Component({ selector: 'app-footer', template: ` <footer class="lp-footer"> <div class="d-flex"> <div class="mr-auto"> <span>2019 - {{ currentYear }} © {{ appInfo.name }}</span
> > ><br />
</div> </div> </footer>
`,
styleUrls: ['./footer.component.scss'],
})
export class FooterComponent {
currentYear = new Date().getFullYear();get appInfo() {
return this.environment.getEnvironment().application;
}constructor(private environment: EnvironmentService) {}
}3. Here is the `tsconfig.prod.json`:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": ["node_modules/@types"],
"lib": ["es2018", "dom"],
"types": ["jest"]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}`tsconfig.json`:
{
"extends": "./tsconfig.prod.json",
"compilerOptions": {
"paths": {
"@volo/abp.commercial.ng.ui": ["packages/commercial-ui/src/public-api.ts"],
"@volo/abp.ng.account": ["packages/account/src/public-api.ts"],
"@volo/abp.ng.account/config": ["packages/account/config/src/public-api.ts"],
"@volo/abp.ng.account/admin": ["packages/account/admin/src/public-api.ts"],
"@volo/abp.ng.audit-logging": ["packages/audit-logging/src/public-api.ts"],
"@volo/abp.ng.audit-logging/config": ["packages/audit-logging/config/src/public-api.ts"],
"@volo/abp.ng.identity-server": ["packages/identity-server/src/public-api.ts"],
"@volo/abp.ng.identity-server/config": ["packages/identity-server/config/src/public-api.ts"],
"@volo/abp.ng.identity": ["packages/identity/src/public-api.ts"],
"@volo/abp.ng.identity/config": ["packages/identity/config/src/public-api.ts"],
"@volo/abp.ng.saas": ["packages/saas/src/public-api.ts"],
"@volo/abp.ng.saas/config": ["packages/saas/config/src/public-api.ts"],
"@volo/abp.ng.theme.lepton": ["packages/theme-lepton/src/public-api.ts"],
"@volo/abp.ng.theme.lepton/": ["packages/theme-lepton/src/lib/"],
"@volo/abp.ng.language-management": ["packages/language-management/src/public-api.ts"],
"@volo/abp.ng.language-management/config": [
"packages/language-management/config/src/public-api.ts"
],
"@volo/abp.ng.language-management/locale": ["packages/language-management/locale/src/public-api.ts"],
"@volo/abp.ng.text-template-management": [
"packages/text-template-management/src/public-api.ts"
],
"@volo/abp.ng.text-template-management/config": [
"packages/text-template-management/config/src/public-api.ts"
]
}
}
}
Yes we are already doing what u r describing. Every new version of ABP we repeat the procedure again, so not an ideal solution. It would make things even easier if ABP would use the vars they create (perhaps they do this b/c of older browsers). Another method which we use is i load the style being used as a class in the body. then in style.scss i can create styles like
.Style1 .lp-footer {
// these styles only affect this style and not globally. this is being done so i can use Style1 as our specific brand. this allows
// me to change the background color of the footer. We still run into issues where ABP uses styles that are !important that I am
// not able to override. an example of this is with the pick lists and errors, like the user submitted and didn't enter the data
// required (we do not disable the submit button if there are form errors, b/c we feel it's a bad user experience if the user cannot
// see any visual of what is wrong with the form).
}
As for footer, i was able to replace the footer component with a custom footer component.