Using custom element inside ng-template of another custom element throws an error

[apoorvalele]

I have used a login custom element inside a shell app.

<lazy-login *axLazyElement="'http://localhost:3000/lazy-login/main.js'"></lazy-login>

This is the login.component.html file. I have used another lazy loaded element lazy-card.

<lazy-card *axLazyElement="'http://localhost:3000/rds-card/main.js'" [header]="header" [body]="body" [footer]="footer">
  <ng-template #header>
    <div>Header</div>
  </ng-template>
  <ng-template #body>
    <div>Body</div>
   <button>Hello</button>
    <lazy-button *axLazyElement="'http://localhost:3000/lazy-button/main.js'" label="Sample button"></lazy-button>
  </ng-template>
  <ng-template #footer>
    <div>Footer</div>
  </ng-template>
</lazy-card>

The body template of lazy-card has a lazy-button custom element. I am getting an error when rendering the lazy-button element. If i remove the lazy-button custom element from the body template, all the ng-templates get rendered properly.

Here is the error thrown in the console.