Unable to use WebComponent developed using Angular Elements in another Angular project – issue in final build

I’ve developed a custom WebComponent using Angular Elements and am able to generate a single JS build file. The WebComponent is working perfectly fine when I add it into a single index.html file as http://./web-component-file-name.js, including it’s tag name in the same index.html file and spinning a local HTTP server using ‘http-server’.

I then created a new basic Angular app, and tried to add this component. Followed the article till this point from beginning – added the below snippet also installing the required dependency @webcomponents/webcomponentsjs :

  
  <!-- This div is needed when targeting ES5.
  It will add the adapter to browsers that support customElements, which require ES6 classes -->
  <div id="ce-es5-shim">
    <script type="text/javascript">
      if (!window.customElements) {
        var ceShimContainer = document.querySelector('#ce-es5-shim');
        ceShimContainer.parentElement.removeChild(ceShimContainer);
      }
    </script>
    http://node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js
  </div>

  http://node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js
  <script>
    if (!window.customElements){document.write('<!--');}
  </script>

When I try ng serve, it’s working perfectly as expected. The issue occurs when I’m trying to build the project to get compiled files using ng build --prod. The build completes successfully without any errors and when I’m trying to host the files using http-server, I don’t see anything (not even the boilerplate Angular code). Neither do I see any error in console. What is it that I’m missing here?

P.S. I’m developing this component so that it could be used across different frameworks used within my organization, hence went with WebComponents.

Source: Angular Questions