title: Angular 6 - Is it possible to use two angular element components on the same page?
body: <p>I'm trying to host independent angular elements that I can drop into a non-angular webpage.  It's working great when I have just one.. but when I load two or more on the same page I get this error:</p>
  
  <blockquote>
    <p>Uncaught Error: Zone already loaded.</p>
  </blockquote>
  
  <p>I'm using a build script to concatenate my dist files into one js file.. and then dropping that into my project</p>
  
  <pre><code>const fs = require('fs-extra')
  const concat = require('concat')
  
  
  const files = [
      './dist/elementsApp/runtime.js',
      './dist/elementsApp/polyfills.js',
      './dist/elementsApp/scripts.js',
      './dist/elementsApp/main.js',
  ]
  
  
  fs.ensureDir('elements')
  .then(() =&gt; {
    console.log('success!')
    concat(files, 'elements/include-me-somewhere-else.js')
  })
  .catch(err =&gt; {
    console.error(err)
  })
  </code></pre>
  
  <p>I can only have one of these js files on one page.  I understand angular 7 will make this whole process easier but I'm wondering how I can accomplish this right now.  </p>
  
  <p>I've also tried wrapping my exported js file in a self-executing function to try and limit scope.. Doesn't fix anything unfortunately.</p>
  
  <p>Any ideas?</p>
  
  <p>People seem confused about what angular elements are.  For clarification you can watch this video <a href="https://www.youtube.com/watch?v=4u9_kdkvTsc" rel="noreferrer">https://www.youtube.com/watch?v=4u9_kdkvTsc</a>.  the last few mins in particular show an angular element being exported and included on a non angular page.  I'm trying to include multiple elements on the same page.</p>