I have two Angular Elements. The first one contains select-box and the second one looks like this:
<h1>Title</h1>
<ng-content></ng-content>
I try to display both inside another application using @angular-extensions/elements or just by adding script to index.html:
It works:
<app-select *axLazyElement="'assets/select.js'"></app-select>
And it works:
<app-dashboard *axLazyElement="'assets/dashboard.js'">some text</app-dashboard>
It displays only select:
<app-select *axLazyElement="'assets/select.js'"></app-select>
<app-dashboard *axLazyElement="'assets/dashboard.js'">
<div>some text
<app-select *axLazyElement="'assets/select.js'"></app-select>
</div>
</app-dashboard>
And this two display only dashboard without select inside:
<app-dashboard *axLazyElement="'assets/dashboard.js'">
<div>some text
<app-select *axLazyElement="'assets/select.js'"></app-select>
</div>
</app-dashboard>
<app-dashboard *axLazyElement="'assets/dashboard.js'">
<div>some text</div>
</app-dashboard>
<app-select *axLazyElement="'assets/select.js'"></app-select>
I always see only first custom element. I see that both scripts loaded in browser network and i do not see any errors in console. Does anybody know what happens?