Garmaine Staff asked 1 year ago

Suppose we've built a web component with Angular 9 and @angular/elements and we've compiled it to a javascript file named custom-element.js.

IIUC the right way to use it in another Angular project is to place it in src/assets/js and include it in the angular.json scripts block. So for example:

"scripts": [
    ...,
    "src/assets/js/custom-element.js"]

Based on this article, we also need to set "allowJs": true in tsconfig.json like this:


{
  compilerOptions: {
    "allowJs": true
  }
}

And add CUSTOM_ELEMENTS_SCHEMA from @angular/core like this in app.module.ts:

@NgModule({...
schemas: [CUSTOM_ELEMENTS_SCHEMA],

We also need to polyfill older browsers:

npm install --save-dev @webcomponents/webcomponentsjs

And copy the polyfill over in angular.json:

"assets": [
"src/favicon.ico",
"src/assets",
+{
+  "glob": "**/*.js",
+  "input": +"node_modules/@webcomponents/webcomponentsjs",
+  "output": "webcomponents/"
+}

And load the polyfills like this in index.html:

<script src="webcomponents/webcomponents-loader.js"></script>
<script>
  if (!window.customElements{document.write('<!--');}
</script>
<script src="webcomponents/custom-elements-es5-adapter.js"></script>
<!-- ! DO NOT REMOVE THIS COMMENT, WE NEED ITS CLOSING MARKER -->

And finally we also need to include a script for the web component itself inside the head section of index.html. So:

<script src="src/assets/js/custom-element.js"></script>

And now the web component is ready for in the Angular project.

Is this how it should be done or is there a shorter path? Seems like a lot of steps …