Web Components in Angular

Web components are analogous to plugins. As we all know plugins are useful to provide a subset of features that extends the original application. Similar to that web components are used when we want to provide a subset of our application as embedded functionality to third-party applications.

For example, you might have seen some news sites that use embedded tweets.

Top Twitter Moments of 2021

To understand how web component works let us dive into how angular application bootstrap on the client browser.

1. As every web application angular too have an entry point which is index.html. which is loaded into the browser first.
2. when the browser parses index.html it finds link to below scripts to load
   polyfills.js – Polyfill scripts for supporting the variety of the latest modern browsers
   styles.css – This file contains the global style rules bundled as a css file.
   scripts.js – This file contains the global script rules bundled as a javascript file.
   main.js – code of the application.
   runtime.js: Webpack runtime file
3. When all the js and css are loaded, angular core initializes services, routes and finds main.ts and bootstrap the application with the component that is suggested by main.ts which is typically app.component.ts.

Now when web components are used similar procedure is followed except in 3rd step angular bootstrap only with the component selector used in third-party application.

Steps to integrate web component in angular

1. First of all, we need to create web-component.html as entry point to our web component and add it to assets in angular.json file so it’s copied to dist.

web-component.html file contains the below snippet.

2. When we build an angular application, build process modifies index.html and inserts scripts and styles tags in it. To do the similar for our web-component.html file we use gulp which is a build task automation tool.

Get Kevin Mavani’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

you can find more about gulp here.

create gulpfile.js at the root and add the below snippet in it.

3. In package.json add the below scripts to run gulp task after the build.

"scripts": {
    "gulp-add-pre-compiled-scripts": "echo \"Executing gulp command to add pre compiled scripts into web-component.html ...\" && gulp --color add-compiled-scripts-to-web-component-html",
    "build": "echo \"Building app\" && ng build && npm run gulp-add-pre-compiled-scripts",
}

After the gulp task is successfully completed web-component.html file will look like below

4. Now in order to use in third-party application, we need to inject our web-component.html file into another webpage we use html imports to parse our html file and load necessary js and css files.

create html-imports.min.js inside assets/js and the below I have attach the gist link of html-import js library code for reference. So copy the snippet inside it and paste it in the above created html-imports.min.js file.

html-imports.min.js

5. Our web component is ready to be embedded in any web application We just need to include a link to our web-component.html, html-imports, and put selected our component in a third-party web page at the desired place.