Error when navigating away from a component using ngxd/core

[st-clair-clarke]

Hi I have two lazy loaded modules - registration and preferences. I am using:

1. "@angular/cli": "^9.0.0-rc.6" with similar @angular packages
2. "@ngxd/core": "^8.0.0"
3. Windows 10 environment

The registration modules use ngxd/core to load forms dynamically into an accordion.

Navigation via a sidebar from /preferences to /registration is fine. However, navigating from the /registration to /preferences crashes the application with the following errors:

core.js:6382 ERROR Error: Uncaught (in promise): TypeError: Cannot delete property 'hasIcon' of [object Object] TypeError: Cannot delete property 'hasIcon' of [object Object] at HostInputAdapter.dispose (ngxd-core.js:183) at HostInputAdapter.detach (ngxd-core.js:161) at HostAdapter.detachInput (ngxd-core.js:243) at NgxComponentOutletAdapterRef.detachHostInput (ngxd-core.js:390) at NgxComponentOutletAdapterRef.disposeInputs (ngxd-core.js:487) at NgxComponentOutletAdapterRef.dispose (ngxd-core.js:304) at NgxComponentOutletDirective.destroyAdapterRef (ngxd-core.js:798) at NgxComponentOutletDirective.ngOnDestroy (ngxd-core.js:777) at executeOnDestroys (core.js:16128) at cleanUpView (core.js:16036) at resolvePromise (zone-evergreen.js:793) at resolvePromise (zone-evergreen.js:752) at zone-evergreen.js:854 at ZoneDelegate.invokeTask (zone-evergreen.js:400) at Object.onInvokeTask (core.js:41410) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Zone.runTask (zone-evergreen.js:168) at drainMicroTaskQueue (zone-evergreen.js:570)

Seems as if icons are being deleted. What do you think? Looking forward to hearing from you. Thanks.

[thekiba]

Hello! Please, let me an example of how you're using ngxd in the component. And then I'll try to help.

[st-clair-clarke]

The following is my actual usage - it will not run if you cut and paste because of imports, but the general code can be seen.

MattExpansionPanelComponent

` import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core' import { SharedAppDataService } from '@pim/common/core' import { FormState, IFormState } from '@pim/common/store' import { messages } from '@pim/common/validation-model' import { AutoUnsubscribe } from 'ngx-auto-unsubscribe'

@AutoUnsubscribe() @Component( { selector: 'matt-expansion-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: ` <mat-expansion-panel [expanded] = "step === row" (opened) = "setStep(row)" hideToggle>

Close Next Previous Next Previous `, styles: [] } ) export class MattExpansionPanelComponent implements OnDestroy { @Input() component: any @Input() description = messages.error.formError @Input() dirty = false @Input() labelMarginTop = '4px' @Input() lable = { row1: 'Label', axis: 'column' } @Input() options: any @Input() state: Partial = new FormState() @Input() valid = false @Input() statusIcon = '' @Input() statusIconTop = '0px' @Input() target: string @Input() titleIcon = 'question-l1' @Input() titleIconTop = '' @Output() eventData = new EventEmitter>() // @Input() index = 0 @Input() maxRows = 0 @Input() row = 0 step = 0 constructor( public store: SharedAppDataService ) {} ngOnDestroy() { // needed for @AutoUnsubscribe() } onActivate( component: any ) { this.state.target = this.target // this.state.options[ 'component' ] = component this.eventData.emit( this.state ) } setStep( row: number ) { this.step = row } nextStep() { this.step++ } prevStep() { this.step-- } } ` **nok.component.html** ` ` Thanks

[thekiba]

Where you're using hasIcon property? Can you show me that component too?

[st-clair-clarke]

The first component dynamically injected by ngxd/core is NameComponent with the following ..

export class NameComponent implements OnInit { @Input() hasIcon = false @Input() size = '25' @Input() target = '' @Output() event = new EventEmitter<IFormState>() controls: Object form: RxFormGroup middle: AbstractControl name: IName = new Name() state: Object suffixFilteredOptions$: Observable<Array<string>> suffixOptions: string[] titleGroupOptions: Observable<IGroupedOptions[]> titleGroups: IGroupedOptions[] Now, when I commented out the hasIcon property, the error then points to the next Input property size - so it seems that the Input() properties are the problem.

[st-clair-clarke]

Note that without navigating from the /registration url, everything is fine, and the component is displayed. I only found out the error when I added the /preferences route and navigate away from /registration that generates the errors.

[thekiba]

Seems interesting, because I had tried to reproduce the problem on stackblitz and I doesn't see something error.

Maybe can you try to do it? https://stackblitz.com/edit/angular-simple-dynamic-ptv1e4

[thekiba]

I had update this demo, please check this again. If you can fix it and show the problem, then I will be able to help you.

Otherwise, you can try to create different component for using *ngxComponentOutlet and try again.

[st-clair-clarke]

How do you navigate the stackblitz examaple. Remember, it is when I navigate away from a component that uses ngxd/core that that the error is generated.

[f1ght4fun]

I have exactly same issue.

on dispose method, when it tries to delete input - throws "Cannot delete property 'XXX' of [object Object] at HostInputAdapter.dispose

[thekiba]

@st-clair-clarke @f1ght4fun could you please reproduce the problem on the Stackblitz?

[f1ght4fun]

for some reason your stackblitz doesn't even render anything for me now. issue happens when i want to pass via context input/output properties which doesn't seem to be happening now

[thekiba]

@f1ght4fun @st-clair-clarke could you please check your issue with @ngxd/core@9.0.3? Let me know if all ok or not.

[thekiba]

I think that similar problem with https://github.com/IndigoSoft/ngxd/issues/29#issuecomment-588397911

Please, let me know if that issue still not resolved.