2

I'm trying to bootstrap an Angular 2+ app (6 to be precise) inside a specific DOM node. I want to do this inside a web component my-component (written with StencilJS).

Ideally I could bootstrap from the root element of my web component with a selector or the HTMLElement.

The problem however is that Angular is instantianted "globally" on the page and therefore tries to interpret all tags as Angular components - not just the ones found inside my own web component: enter image description here

I've tried 3 different approaches found on the web. However many of them still use the .bootstrap method which is no longer available in newer Angular versions. Others just instantiate components in a certain node but not the whole app.

NgDoBootstrap seemed to be a quite promising way but it also leads to Angular parsing all components found on the page.

I've created a repo to investigate the issue. Any help would be appreciated.

https://github.com/bitflower/ng-stencil

j08691
  • 204,283
  • 31
  • 260
  • 272
Matthias Max
  • 595
  • 1
  • 7
  • 20
  • 1
    Would bundling your Angular app component as a Web Component (via Angular Elements) do the job? https://angular.io/guide/elements – matthewsteele Jun 20 '18 at 15:01
  • Was thinking about the same sime minutes ago. Sure would work. Not sure though if the component I want to use is "simple" enough. It's the Angular Gridster 2. – Matthias Max Jun 20 '18 at 15:28

0 Answers0