title: Angular6 export custom component using Angular Element: The selector "app-root" did not match any elements
body: <p>I created a custom component and export it as a JavaScript file, following the instruction in this link (<a href="https://angularfirebase.com/lessons/angular-elements-quick-start-guide/" rel="nofollow noreferrer">https://angularfirebase.com/lessons/angular-elements-quick-start-guide/</a>). I included the script file into an html file. </p>
  
  <p>My problem is when I open the html in the browser (Chrome), I see an error saying "The selector "app-root" did not match any elements". But when I delete
  <code>bootstrap: [AppComponent]</code>,
  in <strong>app.module.ts</strong> file, the problem will disappear.</p>
  
  <p><strong>app.module.ts code</strong>:
  <a href="https://i.stack.imgur.com/MubHK.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p><strong>app.component.ts</strong>
  <a href="https://i.stack.imgur.com/TDT9e.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p><strong>index.html code</strong></p>
  
  <pre><code>&lt;body&gt;
  &lt;app-root&gt;&lt;/app-root&gt;
  &lt;custom-visualization&gt;&lt;/custom-visualization&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>my demo html code:</strong></p>
  
  <pre><code>&lt;custom-visualization&gt;&lt;/custom-visualization&gt;
  &lt;script src="./exportedCustoVmisualization.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>Environment:</strong></p>
  
  <pre><code>Angular version: X.Y.Z
  Angular CLI: 6.0.8
  Node: 8.11.2
  OS: win32 x64
  Angular:
  ...
  
  Package                      Version
  ------------------------------------------------------
  @angular-devkit/architect    0.6.8
  @angular-devkit/core         0.6.8
  @angular-devkit/schematics   0.6.8
  @schematics/angular          0.6.8
  @schematics/update           0.6.8
  rxjs                         6.2.1
  typescript                   2.7.2
  </code></pre>