In this tutorial, we shall try to create a very simple Angular web element and use it in HTML file without any dependency on Angular.
For this tutorial, I am using Angular CLI 1.7.4 version.
Let’s get started!
Create a new Angular project
ng new ng-element-demo
Once project is created, navigate to new project directory.
Install Angular element package by running command:
npm install @angular/elements --save
This package contains a method to export Angular component as a web component.
Since custom web components concept is new, we will need to configure polyfills for our application. We can install package
npm install @webcomponents/custom-elements --save
Once it is done, go to
polyfills.ts file to mention libraries we need to use custom elements.
Ready for exporting Angular component?
As we are done with package and dependencies installation, now we can jump to Angular code.
We need to tell root Angular module (app.module.ts) which component we are going to export. For that, we will need to update module code as below:
@angular/coreand inject in AppModule’s constructor
bootstraparray property of NgModule
entryComponentsarray property of NgModule
- Create a custom element and register it using
createCustomElementmethod. This method is being exported from
@angular/elementspackage. Remember we have installed this package in start?
After these changes,
app.module.ts should look something like below:
At this point we should be able to test our Angular element.
index.html file and delete all content and put only a
ng serve --open command. We should see output of our Angular component in browser.
Exporting Angular element for rest of the world!
Generally we run
ng build --prod command to build Angular application. As an output we get
For convenience sake, we want to build our Angular element as a single bundle .js file.
Let’s install a package
npm install fs-extra concat --save-dev
This package combines multiple bundle files into one.
After installation, create a
build-script.js file on the same folder level as of
package.json file. In this file, we shall add build and bundling instructuions as below:
Now we need to call this
build-script.js file from command line. For that, we will add another command in
package.json file inside
We are all set to export our Angular component now. Just run command:
npm run build:elements
This shall create a folder
elements in the same folder level of
src. This folder shall contain
Using Angular element in plain HTML website
Let’s create a new folder called
client-website. Inside this folder, create a
index.html file and copy-paste
ng-greet-element.js file in this folder from
Add a code in HTML file to use Angular element we just created by placing tag
<greet-comp></greet-comp> followed by linking Angular Element’s bundle file.
Save the changes and open
index.html file in browser by double click or any web server. You should see Angular element in action.
And we done! Now you can use this Angular element in React.js, PHP, Vue.js and any other web framework.
Cool, isn’t it?
Since Angular Element is fairly new, the size of bundle file is bit higher. For simple hello-world example, it takes 442 KB on my pc. As Angular’s new version comes in future, we can expect size optimization soon.
You can find complete source code for this tutorial on my GitHub repository.\
Live example of plain HTML website using Angular (v6) component can be found here:
I will try to create more examples of Angular Element soon with more features.