ORIGINAL EXCEPTION: Failed to execute 'removeChild' on 'Node

[ericel]

Basically I am creating ui components that are been included to container components. Here is the setup:

<masonry [options]="{ transitionDuration: '0.8s', gutter: 10 }" [useImagesLoaded]="true">
  <app-card [item]="item" *ngFor="let item of items"></app-card>
</masonry>

the app-card contains the

When I do an *ngFor in the <app-card [item]="item" *ngFor="let item of items"></app-card>

The bricks appear all overlapping. And my console shows the follow errors.

template:0:1 caused by: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
ErrorHandler.handleError @ vendor.bundle.js:64500
vendor.bundle.js:64502 ORIGINAL EXCEPTION: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
ErrorHandler.handleError @ vendor.bundle.js:64502
vendor.bundle.js:64505 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ vendor.bundle.js:64505
vendor.bundle.js:64506 Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at AngularMasonry.add (http://localhost:4200/vendor.bundle.js:37119:41)
    at AngularMasonryBrick.ngAfterViewInit (http://localhost:4200/vendor.bundle.js:52357:22)
    at CompiledTemplate.proxyViewClass.View_CardComponent0.detectChangesInternal (/AppModule/CardComponent/component.ngfactory.js:298:78)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:92130:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:92325:44)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:92115:18)
    at View_HomeComponent1.detectChangesInternal (/AppModule/HomeComponent/component.ngfactory.js:30:19)
    at View_HomeComponent1.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:92130:14)
    at View_HomeComponent1.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:92325:44)
    at ViewContainer.detectChangesInNestedViews (http://localhost:4200/vendor.bundle.js:92462:37)
    at CompiledTemplate.proxyViewClass.View_HomeComponent0.detectChangesInternal (/AppModule/HomeComponent/component.ngfactory.js:705:16)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:92130:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:92325:44)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:92115:18)
    at CompiledTemplate.proxyViewClass.View_HomeComponent_Host0.detectChangesInternal (/AppModule/HomeComponent/host.ngfactory.js:29:19)
ErrorHandler.handleError @ vendor.bundle.js:64506

[omahjoub]

Hi fellows,

I'am facing the same issue with :

"angular": "2.4.1" "angular2-masonry": "0.3.1" "imagesloaded": "4.1.1"

<masonry [useImagesLoaded]="true" > <masonry-brick *ngFor="let article of articles" class="gn grid-item"> ... </masonry-brick> </masonry>

[ak0arjun]

Hi,

Even i am facing a similar issue on random browsing.

DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at AngularMasonry.add (http://localhost:3000/node_modules/angular2-masonry/src/masonry.js:81:41) at AngularMasonryBrick.ngAfterViewInit (http://localhost:3000/node_modules/angular2-masonry/src/brick.js:22:22) at View_TribeComponent2.detectChangesInternal (/AppModule/TribeComponent/component.ngfactory.js:343:78) at View_TribeComponent2.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9355:18) at View_TribeComponent2.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9448:48) at ViewContainer.detectChangesInNestedViews (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9520:41) at View_TribeComponent1.detectChangesInternal (/AppModule/TribeComponent/component.ngfactory.js:146:14) at View_TribeComponent1.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9355:18) at View_TribeComponent1.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9448:48) at ViewContainer.detectChangesInNestedViews (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9520:41)

The worse part is it stops website working ? Any suggestions

[cjsheets]

The module seems to work if you catch the error thrown by

this._element.nativeElement.removeChild(element)

I made that small change in a fork and I'm using "https://github.com/cjsheets/angular2-masonry/tarball/master" as my npm version until we can figure out why this is happening. I spent a while trying to debug it without much luck.

[omahjoub]

Hi ! @ericel @cjsheets @jelgblad Is there any news on this ? Is there any correction in the pipe ? Anyone solved it ?

[inshaf]

im having the same issue... any solutions ?

[inshaf]

    if (this.useImagesLoaded) {
        imagesLoaded(element, function (instance) {
            _this._element.nativeElement.appendChild(element);
            // Tell Masonry that a child element has been added
            _this._msnry.appended(element);
            // layout if first item
            if (isFirstItem)
                _this.layout();
        });
        this._element.nativeElement.removeChild(element); ---> GETTING ERROR HERE
    }

this is within "public add(element: HTMLElement)"

[TimUnderhay]

@cjsheets' solution feels a bit of a hack, but a bit of a hack that works. Cheers!

The problem appears to stem from the async nature of the call to imagesLoaded. Because the element is added to the DOM in the callback, the removeChild call appears to sometimes execute before the appendChild runs, resulting in the error (race condition). Not sure why the hack works, but I'm satisfied until someone comes up with something better.

I could be totally wrong here, btw, as I don't fully comprehend how this masonry component even works. It appears to take something which is already part of the DOM by virtue of ng-template, then add it to the DOM again in the callback, then lay it out, and then remove it from the DOM. It doesn't help that the documentation for imagesLoaded and masonry is woefully poor.

I think this is a problem inherent to the fact that we're doing DOM manipulation outside of Angular, which you're really not supposed to do. It would be nice if the two could live more harmoniously.

[kenji-1996]

Not sure if this will help anyone but in my particular case I was searching for duplicates and removing them in a drag-drop scenario.

Instead of .remove() I reformatted the array that I wanted to prevent duplicates with like so;

 if(this.many2.includes(value[1].id)) {
            console.log(value[1].id + ' found');
            this.many2 =  Array.from(new Set(this.many2));
        }

I know this is very specific but hope it helps someone who might come accross this themselves in the same situation

[eltiare]

I'm getting this error when I use infinite scroll with masonry.

[contact2mayurkukadiya]

I have also same problem and I have done many try to solve this issue but I can't resolve this. if any solution is available then please update here.