title: Angular 2 App Component ngOnInit called twice when using iframe
body: <p>I'm working on an Angular 2 application that will be delivered via an iframe on other websites. Whilst testing I've noticed that when I load the application the App Component <code>ngOnInit()</code> function is being called twice.</p>
  
  <p>I'm finding this weird because when I'm testing the application 'on it's own', i.e. not though an iframe the App Component <code>ngOnInit()</code> is only called once.</p>
  
  <p>According to <a href="https://stackoverflow.com/a/38787863/2312637" title="this answer">this answer</a> this could happen due errors in child components. But in my case I'm not having the problem when running the application 'normally'.</p>
  
  <p><strong>Example Code:</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
      selector: 'my-app',
      template: `&lt;h1&gt;My App!&lt;/h1&gt;`
  })
  export class AppComponent implements OnInit {
      constructor() {
          console.log('App Component constructor()');
      }
  
      ngOnInit() {
          console.log('App Component ngOnInit()');
      }
  }
  </code></pre>
  
  <p><strong>Iframe Test:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;body&gt;
          &lt;h1&gt;My Test Page&lt;/h1&gt;
          &lt;!-- iframe accessing my-app component --&gt;
          &lt;iframe id="test-iframe" src="/#/" width="100%" height="1300px"&gt;&lt;/iframe&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've tested the application with only an <code>AppComponent</code> to be sure that no child components are causing any issues.</p>
  
  <p><strong>Console Output:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/Is4Dj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Is4Dj.png" alt="enter image description here"></a></p>