title: Lazy-Loading Components with Angular Elements
body: <p>I'm using Angular elements to build a web component that should be exported to any other website. There are a few components that should be lazy-loaded but I keep getting Chunk Load Error.</p>
  <p>I'm using ngx-element for lazy loading and used the basic configuration. When I run the Angular app it works fine; however, the issue happens when I use my element in another app.</p>
  <p>So I build the Angular Elements app and serve it using http-server at port 1014. The component loads up but when I try to load the lazy-loaded component I get a Chunk load error
  <a href="https://i.stack.imgur.com/zkHqa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zkHqa.png" alt="chunk load error" /></a></p>
  <p>It's looking for the chunk under port 8080 when it should be looking for it under port 1014. I tried using APP_BASE_HREF like so in the providers of app module.</p>
  <pre class="lang-js prettyprint-override"><code>{
    provide: APP_BASE_HREF,
    useValue: 'localhost:1014/elements',
  },
  </code></pre>
  <p>This didn't work at all and I still get the chunk load error.</p>