title: Angular ng eject command - webpack customizarion
body: <p>I  want to load <code>webpack</code> generated files either in <code>head</code> or at some other placeholder.</p>
  
  <p>Current Page structure as per <code>ng cli</code></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
           .....
     &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
   &lt;/head&gt;
   &lt;body&gt;
     &lt;app-root&gt;&lt;/app-root&gt;
     &lt;script&gt;&lt;/script&gt; ---- all angular generated scripts
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I need it to be like as below:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
           .....
     &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
     &lt;script&gt;&lt;/script&gt; ---- all angular generated scripts
   &lt;/head&gt;
   &lt;body&gt;
     &lt;app-root&gt;&lt;/app-root&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>To achieve my desired result, i have used <code>ng eject</code> command and i have <code>webpack.config.js</code> file in my project root.</p>
  
  <p>In webpack config file, i have edited <strong>HtmlWebpackPlugin</strong> and updated inject flag as below:</p>
  
  <pre><code>"inject": 'head',
  </code></pre>
  
  <p>With above change, i have got scripts in head but then i am getting error that <code>app-root</code> is not a known element.</p>