# 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>
</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?