Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sidebar.ngOnDestroy: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node' #10381

Closed
johnmanko opened this issue Jul 1, 2021 · 4 comments

Comments

@johnmanko
Copy link

johnmanko commented Jul 1, 2021

I'm submitting a ... (check one with "x")

[X ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
Sidebar gets an error onDestroy:

TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at Sidebar.ngOnDestroy (primeng-sidebar.js:232)
    at executeOnDestroys (core.js:7415)
    at cleanUpView (core.js:7318)
    at destroyViewTree (core.js:7151)
    at destroyLView (core.js:7296)
    at RootViewRef.destroy (core.js:22642)
    at ComponentRef$1.destroy (core.js:25182)
    at RouterOutlet.deactivate (router.js:5307)
    at ActivateRoutes.deactivateRouteAndOutlet (router.js:2072)
    at ActivateRoutes.deactivateRouteAndItsChildren (router.js:2050)
    at resolvePromise (zone-evergreen.js:1213)
    at resolvePromise (zone-evergreen.js:1167)
    at zone-evergreen.js:1279
    at ZoneDelegate.invokeTask (zone-evergreen.js:406)
    at Object.onInvokeTask (core.js:28578)
    at ZoneDelegate.invokeTask (zone-evergreen.js:405)
    at Zone.runTask (zone-evergreen.js:178)
    at drainMicroTaskQueue (zone-evergreen.js:582)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:491)
    at invokeTask (zone-evergreen.js:1600)
defaultErrorLogger	@	core.js:6210
handleError	@	core.js:6258
next	@	core.js:29198
__tryOrUnsub	@	Subscriber.js:183
next	@	Subscriber.js:122
_next	@	Subscriber.js:72
next	@	Subscriber.js:49
next	@	Subject.js:39
emit	@	core.js:25940
(anonymous)	@	core.js:28617
invoke	@	zone-evergreen.js:372
run	@	zone-evergreen.js:134
runOutsideAngular	@	core.js:28520
onHandleError	@	core.js:28617
handleError	@	zone-evergreen.js:376
runGuarded	@	zone-evergreen.js:147
api.microtaskDrainDone	@	zone-evergreen.js:1074
drainMicroTaskQueue	@	zone-evergreen.js:589
invokeTask	@	zone-evergreen.js:491
invokeTask	@	zone-evergreen.js:1600
globalZoneAwareCallback	@	zone-evergreen.js:1637
load (async)		
customScheduleGlobal	@	zone-evergreen.js:1752
scheduleTask	@	zone-evergreen.js:393
onScheduleTask	@	zone-evergreen.js:283
scheduleTask	@	zone-evergreen.js:386
scheduleTask	@	zone-evergreen.js:221
scheduleEventTask	@	zone-evergreen.js:247
(anonymous)	@	zone-evergreen.js:1907
(anonymous)	@	http.js:1805
_trySubscribe	@	Observable.js:42
subscribe	@	Observable.js:28
innerSubscribe	@	innerSubscribe.js:67
_innerSub	@	mergeMap.js:57
_tryNext	@	mergeMap.js:51
_next	@	mergeMap.js:34
next	@	Subscriber.js:49
(anonymous)	@	subscribeToArray.js:3
_trySubscribe	@	Observable.js:42
subscribe	@	Observable.js:28
call	@	mergeMap.js:19
subscribe	@	Observable.js:23
call	@	filter.js:13
subscribe	@	Observable.js:23
(anonymous)	@	platform-ajax.ts:182
ZoneAwarePromise	@	zone-evergreen.js:1387
ajax	@	platform-ajax.ts:180
httpGet	@	platform-ajax.ts:101
getReportMenu	@	report.service.ts:27
resolve	@	report.service.ts:56
getResolver	@	router.js:3521
(anonymous)	@	router.js:3507
_tryNext	@	mergeMap.js:44
_next	@	mergeMap.js:34
next	@	Subscriber.js:49
(anonymous)	@	subscribeToArray.js:3
_trySubscribe	@	Observable.js:42
subscribe	@	Observable.js:28
call	@	mergeMap.js:19
subscribe	@	Observable.js:23
call	@	takeLast.js:22
subscribe	@	Observable.js:23
call	@	mergeMap.js:19
subscribe	@	Observable.js:23
call	@	map.js:16
subscribe	@	Observable.js:23
innerSubscribe	@	innerSubscribe.js:67
_innerSub	@	mergeMap.js:57
_tryNext	@	mergeMap.js:51
_next	@	mergeMap.js:34
next	@	Subscriber.js:49
(anonymous)	@	subscribeToArray.js:3
_trySubscribe	@	Observable.js:42
subscribe	@	Observable.js:28
call	@	mergeMap.js:19
subscribe	@	Observable.js:23
call	@	tap.js:16
subscribe	@	Observable.js:23
call	@	takeLast.js:22
subscribe	@	Observable.js:23
call	@	mergeMap.js:19
subscribe	@	Observable.js:23
innerSubscribe	@	innerSubscribe.js:67
_innerSub	@	mergeMap.js:57
_tryNext	@	mergeMap.js:51
_next	@	mergeMap.js:34
next	@	Subscriber.js:49
(anonymous)	@	subscribeToArray.js:3
_trySubscribe	@	Observable.js:42
subscribe	@	Observable.js:28
call	@	mergeMap.js:19
subscribe	@	Observable.js:23
call	@	tap.js:16
subscribe	@	Observable.js:23
innerSubscribe	@	innerSubscribe.js:67
_innerSub	@	switchMap.js:44
_next	@	switchMap.js:34
next	@	Subscriber.js:49
_next	@	tap.js:46
next	@	Subscriber.js:49
(anonymous)	@	subscribeToArray.js:3
_trySubscribe	@	Observable.js:42
subscribe	@	Observable.js:28
call	@	tap.js:16
subscribe	@	Observable.js:23
call	@	switchMap.js:15
subscribe	@	Observable.js:23
call	@	tap.js:16
subscribe	@	Observable.js:23
call	@	map.js:16
subscribe	@	Observable.js:23
innerSubscribe	@	innerSubscribe.js:67
_innerSub	@	switchMap.js:44
_next	@	switchMap.js:34
next	@	Subscriber.js:49
_next	@	filter.js:33
next	@	Subscriber.js:49
_next	@	tap.js:46
next	@	Subscriber.js:49
notifyNext	@	mergeMap.js:70
_next	@	innerSubscribe.js:10
next	@	Subscriber.js:49
_next	@	map.js:35
next	@	Subscriber.js:49
notifyNext	@	mergeMap.js:70
_next	@	innerSubscribe.js:10
next	@	Subscriber.js:49
_complete	@	defaultIfEmpty.js:25
complete	@	Subscriber.js:61
_complete	@	Subscriber.js:79
complete	@	Subscriber.js:61
_complete	@	Subscriber.js:79
complete	@	Subscriber.js:61
_complete	@	mergeMap.js:65
complete	@	Subscriber.js:61
(anonymous)	@	subscribeToArray.js:5
_trySubscribe	@	Observable.js:42
subscribe	@	Observable.js:28
call	@	mergeMap.js:19
subscribe	@	Observable.js:23
call	@	filter.js:13
subscribe	@	Observable.js:23
call	@	take.js:22
subscribe	@	Observable.js:23
call	@	defaultIfEmpty.js:10
subscribe	@	Observable.js:23
innerSubscribe	@	innerSubscribe.js:67
_innerSub	@	mergeMap.js:57
_tryNext	@	mergeMap.js:51
_next	@	mergeMap.js:34
next	@	Subscriber.js:49
_complete	@	defaultIfEmpty.js:25
complete	@	Subscriber.js:61
_complete	@	Subscriber.js:79
complete	@	Subscriber.js:61
_complete	@	Subscriber.js:79
complete	@	Subscriber.js:61
_complete	@	mergeMap.js:65
complete	@	Subscriber.js:61
(anonymous)	@	subscribeToArray.js:5
_trySubscribe	@	Observable.js:42
subscribe	@	Observable.js:28
call	@	mergeMap.js:19
subscribe	@	Observable.js:23
call	@	filter.js:13
subscribe	@	Observable.js:23
call	@	take.js:22
subscribe	@	Observable.js:23
call	@	defaultIfEmpty.js:10
subscribe	@	Observable.js:23
call	@	mergeMap.js:19
subscribe	@	Observable.js:23
call	@	map.js:16
subscribe	@	Observable.js:23
innerSubscribe	@	innerSubscribe.js:67
_innerSub	@	mergeMap.js:57
_tryNext	@	mergeMap.js:51
_next	@	mergeMap.js:34
next	@	Subscriber.js:49
_next	@	map.js:35
next	@	Subscriber.js:49
_next	@	tap.js:46
next	@	Subscriber.js:49
notifyNext	@	switchMap.js:66
_next	@	innerSubscribe.js:10
next	@	Subscriber.js:49
_next	@	map.js:35
next	@	Subscriber.js:49
(anonymous)	@	subscribeToArray.js:3
_trySubscribe	@	Observable.js:42
subscribe	@	Observable.js:28
call	@	map.js:16
subscribe	@	Observable.js:23
innerSubscribe	@	innerSubscribe.js:67
_innerSub	@	switchMap.js:44
_next	@	switchMap.js:34
next	@	Subscriber.js:49
notifyNext	@	switchMap.js:66
_next	@	innerSubscribe.js:10
next	@	Subscriber.js:49
_next	@	tap.js:46
next	@	Subscriber.js:49
notifyNext	@	mergeMap.js:70
_next	@	innerSubscribe.js:10
next	@	Subscriber.js:49
_next	@	map.js:35
next	@	Subscriber.js:49
(anonymous)	@	subscribeToArray.js:3
_trySubscribe	@	Observable.js:42
subscribe	@	Observable.js:28
call	@	map.js:16
subscribe	@	Observable.js:23
innerSubscribe	@	innerSubscribe.js:67
_innerSub	@	mergeMap.js:57
_tryNext	@	mergeMap.js:51
_next	@	mergeMap.js:34
next	@	Subscriber.js:49
_next	@	tap.js:46
next	@	Subscriber.js:49
notifyNext	@	switchMap.js:66
_next	@	innerSubscribe.js:10
next	@	Subscriber.js:49
Promise.then (async)		
scheduleMicroTask	@	zone-evergreen.js:565
scheduleTask	@	zone-evergreen.js:396
onScheduleTask	@	zone-evergreen.js:283
scheduleTask	@	zone-evergreen.js:386
scheduleTask	@	zone-evergreen.js:221
scheduleMicroTask	@	zone-evergreen.js:241
scheduleResolveOrReject	@	zone-evergreen.js:1266
resolvePromise	@	zone-evergreen.js:1204
(anonymous)	@	zone-evergreen.js:1120
webpackJsonpCallback	@	bootstrap:25
(anonymous)	@	my-module.js:1

Expected behavior
No error.

Minimal reproduction of the problem with instructions

<ng-container *ngTemplateOutlet="menuTemplate"></ng-container>

<p-sidebar appendTo="body" [(visible)]="display">
    <ng-container *ngTemplateOutlet="menuTemplate"></ng-container>
</p-sidebar>

<ng-template #menuTemplate>
    <ul class="side-menu-section side-nav show-for-large-up system-menu">
        <ng-container *ngFor="let section of menu">
            <li *ngIf="section.name" class="no-border side-menu-section-name">
                <h3>{{section.name}}</h3>
            </li>
            <ng-container *ngFor="let item of section.children">
                <li class="side-menu-section-item" *ngIf="!isItemHidden(item, false)" [routerLink]="getRouterLink(item)" [ngClass]="{active: isActive(item), disabled: isDisabled(item)}"
                    tooltipPosition="right" (click)="onItemClick($event, item);" [pTooltip]="item.description">
                    <a>
                        <span [ngClass]="item.icon"></span>&nbsp;{{item.name}}
                    </a>
                </li>
            </ng-container>
        </ng-container>
    </ul>
</ng-template>

Please tell us about your environment: npm: 6.14.11, Ubuntu: 20.10

  • Angular version: 11.2.14
  • PrimeNG version: 11.4.3
  • Browser: Chromium Version 91.0.4472.114 (Official Build) snap (64-bit)
  • Language: TypeScript 4.1.6
  • Node (for AoT issues): node --version = 14.15.1
@johnmanko
Copy link
Author

johnmanko commented Jul 1, 2021

Additional information:

image

Just a little more on the design. I have sidebar component, and that's used in other components for layout and menu generation. As I navigate my main menu, a child sidebar is generated based on the menu options provided. The error occurs when I'm leaving one main-menu view for another. This used to work.

some-view-component.html:

<app-two-column-panel>
	<app-left-panel>
		<app-side-menu [menu]="menu"></app-side-menu>
	</app-left-panel>
	<app-content-panel>
		<router-outlet></router-outlet>
	</app-content-panel>
</app-two-column-panel>

app-side-menu.html:

<ng-container *ngTemplateOutlet="menuTemplate"></ng-container>

<p-sidebar appendTo="body" [(visible)]="display">
    <ng-container *ngTemplateOutlet="menuTemplate"></ng-container>
</p-sidebar>

<ng-template #menuTemplate>
    <ul class="side-menu-section side-nav show-for-large-up system-menu">
        <ng-container *ngFor="let section of menu">
            <li *ngIf="section.name" class="no-border side-menu-section-name">
                <h3>{{section.name}}</h3>
            </li>
            <ng-container *ngFor="let item of section.children">
                <li class="side-menu-section-item" *ngIf="!isItemHidden(item, false)" [routerLink]="getRouterLink(item)" [ngClass]="{active: isActive(item), disabled: isDisabled(item)}"
                    tooltipPosition="right" (click)="onItemClick($event, item);" [pTooltip]="item.description">
                    <a>
                        <span [ngClass]="item.icon"></span>&nbsp;{{item.name}}
                    </a>
                </li>
            </ng-container>
        </ng-container>
    </ul>
</ng-template>

@yigitfindikli yigitfindikli added the Status: Pending Review Issue or pull request is being reviewed by Core Team label Jul 2, 2021
@yigitfindikli yigitfindikli added this to the 12.1.0-rc.1 milestone Jul 2, 2021
@yigitfindikli yigitfindikli self-assigned this Jul 2, 2021
@yigitfindikli
Copy link
Contributor

Fixed in #10247

@yigitfindikli yigitfindikli removed the Status: Pending Review Issue or pull request is being reviewed by Core Team label Jul 8, 2021
@yigitfindikli yigitfindikli removed their assignment Jul 8, 2021
@yigitfindikli yigitfindikli removed this from the 12.1.0-rc.1 milestone Jul 8, 2021
@jemisha-25
Copy link

where is the solution? I also have the same error and there is nothing about this error in the code of the project

@ShrihariMohan
Copy link

where is the solution? I also have the same error and there is nothing about this error in the code of the project

#10247 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants