Angular Element inside dynamic components gets destroyed twice.

🐞 bug report

Affected Package

The issue is caused by package @angular/elements

Description

We are creating a plugin based dashboard where plugins are angular libraries which are injected dynamically. Libraries expose regular angular components which can be instantiated at run time. Also, libraries expose angular elements components which can be used by other libraries.

Let’s say there are 2 libraries

1. Product Library : Exposes ProductDetailComponent as regular angular component.
2. Cart Library : Exposes AddToCartComponent as angular element.

ProductDetailComponent refers to AddToCartComponent through HTML template.

<div>
...
<add-to-cart></add-to-cart>
</div>

The Cart button renders perfectly as required. Problem occurs when we navigate away from the ProductDetailComponent.

e.html:1 ERROR TypeError: Cannot read property 'nativeNode' of null
    at removeDebugNodeFromIndex (core.js:18995)
    at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.destroyNode (core.js:24233)
    at destroyViewNodes (core.js:23461)
    at destroyView (core.js:23449)
    at callWithDebugContext (core.js:24176)
    at Object.debugDestroyView [as destroyView] (core.js:23884)
    at ViewRef_.push../node_modules/@angular/core/fesm5/core.js.ViewRef_.destroy (core.js:21710)
    at ComponentRef_.push../node_modules/@angular/core/fesm5/core.js.ComponentRef_.destroy (core.js:21546)
    at elements.js:236
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)

🌍 Your Environment

Angular Version:

Angular CLI: 7.3.6
Node: 9.11.1
OS: win32 x64
Angular: 7.2.10
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.13.6
@angular-devkit/build-angular      0.13.6
@angular-devkit/build-ng-packagr   0.13.6
@angular-devkit/build-optimizer    0.13.6
@angular-devkit/build-webpack      0.13.6
@angular-devkit/core               7.3.6
@angular-devkit/schematics         7.3.6
@angular/cdk                       7.3.5
@angular/cli                       7.3.6
@angular/material                  7.3.5
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.3.6
@schematics/angular                7.3.6
@schematics/update                 0.13.6
ng-packagr                         4.7.1
rxjs                               6.3.3
typescript                         3.2.4
webpack                            4.29.0

[juristr]

So I debugged the issue quickly and the problem. Here’s what I’ve found so far.

The node gets inserted twice, passing in the elements.ts:createElement(...) function. Since the Angular element tag is already present in the template, the first time it passes here:

…and then once the Angular Element gets instantiated and “boots”, it again passes by here:

…since in that scenario it is the root element.

Hence, the indexDebugNode(...) gets invoked two times as well:

The issue starts when we switch the view which gets destroyed. The according removeDebugNodeFromIndex gets called, and since it uses the elements nativeNode as key in the Set (which is the same instance), the first call removes it, and the 2nd fails when it tries to retrieve the debug element, getting null back:

I debugged this with v8-beta.11 & Ivy as well, and it doesn’t seem to be an issue there.

I wonder whether we can land a fix in v7 as well. One option could be to not invoke the removeDebugNodeFromIndex if the node has already been removed, that it is cannot be retrieved via the getDebugNode(...) function.

What do you think @jasonaden

[Dr0drigues]

@juristr Hi,

When you say that this is solved in v8, do you mean on Angular 8? Because I just upgraded to Angular 8 and I’m still facing the issue 😦

Is there any workaround or something to prevent this?