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 …
Please login or Register to submit your answer