<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report
[ ] feature request
[ ] support request"><pre class="notranslate"><code class="notranslate">[x] bug report
[ ] feature request
[ ] support request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Having several times an element in the DOM tree with the selector associated to a component will only bootstrap the first DOM node found in the tree.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
All nodes matching the correct selector should be bootstrapped not only the first appearance in the tree.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
<a href="http://plnkr.co/edit/bLCsmIRG7pkMu6GohOxS?p=preview" rel="nofollow">http://plnkr.co/edit/bLCsmIRG7pkMu6GohOxS?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
I need to bootstrap several time the same component on my page.<br>
(For my special case I am bootstrapping 2 time the same ui-element that are at 2 different places in the DOM tree)</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.6</li>
<li><strong>Browser:</strong> Chrome</li>
<li><strong>Language:</strong> TypeScript</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[] feature request"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[] feature request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Platform server fully renders a lazy module, and the view on the browser is changed several times:</p>
<ol dir="auto">
<li>The html rendered on the server is shown.</li>
<li>As the application starts to bootstrap, the page is shown without the lazy loaded component.</li>
<li>As the chunk is downloaded, the lazy loaded component is rendered.</li>
</ol>
<p dir="auto">In case of a heavy chunk, or alternatively a slow connection, it looks like the application flickers on the transition between the views.</p>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">The transition between the server rendered page and the client side bootstrapped page should be smooth and invisible to the user.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto"><a href="https://github.com/nglibs/universal-example-app">Universal example app</a> was provided as an example in the <a href="https://github.com/angular/angular/issues/13822" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/13822/hovercard">roadmap</a>. Running the application in chrome and throttling the network should be enough for reproducing the behavior (The lazy loaded components will flicker as described above).</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">It makes the application look bad and unprofessional.</p>
<p dir="auto">I've used Angular Universal previously, and managed to solve the issue using preboot (rendered the application to a hidden div, and called preboot.complete() manually as the lazy loaded module view was initialized). I've integrated preboot to the current version and tried to use the same approach, but encountered style issues.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<ul dir="auto">
<li><strong>Angular version:</strong> 4.0.0</li>
</ul>

<ul dir="auto">
<li><strong>Browser:</strong> [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]</li>
</ul>

<p dir="auto">Tried on Chrome 56, Firefox</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
Typescript 2.2.2</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =<br>
node v6.9.10 (I'm running LTS)</p>
</li>
</ul>