Creating Web Components in Angular

• Author
• Recent Posts

Tuba Mansoor

She works with an IT major. Normally she doesn't speak much but when she speaks, I bet she can make you speechless. Total nerd and travel buff Tuba can be seen passionately doing gyms, Netflix or sharing experiences through excellent blogs. If not then you can find her learning something new. Yes, She knows 4 languages – English, Hindi, Marathi, and German.

Latest posts by Tuba Mansoor (see all)

• Creating Web Components in Angular - February 23, 2021
• What is your Communication Style? - August 1, 2020
• Sharing is caring? - January 28, 2020

What are Web Components?

According to the angular website – Angular elements are Angular components packaged as custom elements (also called Web Components), a web standard for defining new HTML elements in a framework-agnostic way.

What we are trying to do today?

We will create a main angular application and another application with a web component. We will then use this web component in our main angular application by just writing <webcomponent-widget></webcomponent-widget>.

Creating the main angular application.

ng new mainapplication

Creating the web component application–

ng new webcomponent

We will change the app.component.html empty as below to avoid confusion later on-

We will need to add the below library for creating custom elements.

ng add @angular/elements --project webcomponent

We will create a new component in webcomponent.

We can now test if the demo component works by doing ng serve —

Transforming the component to a custom element-

Import injector and createCustomElement.

When you build an app, there are a couple of javascript files created. We will install the following package so that we can concatenate all the javascript files into one.

 npm install --save-dev concat fs-extra

Inside the root of your project, create a build-component.js file and add the following code:

const fs = require('fs-extra');
const concat = require('concat');

build = async () =>{
    const files = [
        './dist/webcomponent/main-es5.js',
        './dist/webcomponent/main-es2015.js',
        './dist/webcomponent/polyfills-es5.js',
        './dist/webcomponent/polyfills-es2015.js',
        './dist/webcomponent/runtime-es5.js',
        './dist/webcomponent/runtime-es2015.js',
      ];
    
      await fs.ensureDir('widget');
      await concat(files, 'widget/webcomponent-widget.js');
}
build();

If in your dist folder, after building the project, some other js files are created modify the above code accordingly.

Next, add a script to the package.json file of your Angular project as follows:

  "scripts": {
        "build:component": "ng build --prod --output-hashing none && node build-component.js",  
      },

Finally, you can run your script to build your project and concatenate the files into one JavaScript file that can be used wherever you want to use your web component to display news. Head back to your terminal and run the following command:

npm run build:component

You will find that in the widget folder there is a webcomponent-widget.js file created. Copy this file to the asset folder of the main application.

When you do ng serve for the main application, you can see that the main application is able to access the webcomponent

References-

• https://buddy.works/tutorials/building-web-components-with-angular
• https://taagung.com/angular-tutorial-1/