title: Using Angular 2 components throughout a non-Angular app
body: <p>I have a fork of a preexisting, mature, non-Angular web app. I also have some existing Angular 2 components from a separate app that I wish to reuse. I would like to sprinkle the existing Angular components into the non-Angular app in various places. I would like to know if this is possible and advisable. Note that this is similar but not identical to <a href="https://stackoverflow.com/questions/35418243/sprinkling-angular-2-components-inside-a-non-angular-page">Sprinkling Angular 2 components inside a non-angular page
  </a>. I have a more specific scenario that I describe below. </p>
  
  <p>Currently, I have figured out how to add single instances of these Angular components by bootstrapping a module that wraps my desired component. E.g. if I want to insert AppComponent into my existing non-Angular app:</p>
  
  <p>In <em>app.module.ts:</em></p>
  
  <pre><code>@NgModule({
    declarations: [AppComponent],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>In <em>app.component.ts:</em></p>
  
  <pre><code>@Component({
    selector: 'my-app'
    template: '&lt;span&gt;{{value}}&lt;/span&gt;'
    ...
  })
  export class AppComponent { 
     public value: string;
     ...
   }
  </code></pre>
  
  <p>Whenever I want an AppComponent, I simply append a <code>my-app</code> element and bootstrap the module as follows:</p>
  
  <pre><code>platformBrowserDynamic().bootstrapModule(AppModule);
  </code></pre>
  
  <p>This works perfectly fine and gives the exact results I want <em>for a single instance of AppComponent</em>. However, my use cases require that I have <em>two simultaneous instances of AppComponent</em> in separate places of the DOM. If I attempt to bootstrap AppModule a second time, the core Angular code attaches the second AppModule to the <code>my-app</code> element that appears first in the DOM, effectively erasing my first instance of AppModule. Is there a way to tell Angular which <code>my-app</code> element to append to? Or is there any way around this? </p>
  
  <p><strong>HTML Example</strong>:</p>
  
  <p>Let's say I append a <code>&lt;my-app&gt;</code> to <code>&lt;body&gt;</code>. Then my HTML looks like:</p>
  
  <pre><code>&lt;body&gt;
    &lt;my-app&gt;
    &lt;/my-app&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Next, if I call <code>platformBrowserDynamic().bootstrapModule(AppModule);</code> and set <code>value = '111'</code> anywhere in the AppComponent, my HTML looks like: </p>
  
  <pre><code>&lt;body&gt;
    &lt;my-app&gt;
      &lt;span&gt;111&lt;/span&gt;
    &lt;/my-app&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Then I add another <code>my-app</code> selector to the HTML, so it looks like:</p>
  
  <pre><code>&lt;body&gt;
    &lt;my-app&gt;
      &lt;span&gt;111&lt;/span&gt;
    &lt;/my-app&gt;
    &lt;my-app&gt;
    &lt;/my-app&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Then, if I call <code>platformBrowserDynamic().bootstrapModule(AppModule);</code> and set <code>value = '222'</code> in the newly created AppComponenet anywhere in the AppComponent logic my HTML looks like: </p>
  
  <pre><code>&lt;body&gt;
    &lt;my-app&gt;
      &lt;span&gt;222&lt;/span&gt;
    &lt;/my-app&gt;
    &lt;my-app&gt;
    &lt;/my-app&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>when I would like the desired result to be:</p>
  
  <pre><code>&lt;body&gt;
    &lt;my-app&gt;
      &lt;span&gt;111&lt;/span&gt;
    &lt;/my-app&gt;
    &lt;my-app&gt;
      &lt;span&gt;222&lt;/span&gt;
    &lt;/my-app&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>In summary:</strong> Is it possible and advisable to use Angular components throughout a non-Angular app? Is it possible to have 2 visible instances of the same Angular Module simultaneously?</p>
  
  <p>Thanks!</p>