Angular Elements!!!!!

Angular elements is most exciting feature of angular framework version 6.x, it had been in the talk since angular 6.x was released and why not? I mean you can use component which is built on angular on any web platform regardless it runs on angular or not. It is great feature, but it is still in early phase, we can’t use angular element outside the angular project. (Angular team still working on it to make it available on any web platform.) But in this article I will show, how we can manage angular element outside the angular environment. I.e. we will be using it on any web platform.

So let’s dive with process to create angular element step by step.

Configuration & Setup

First we will create a blank application using Angular Cli,

ng new angularElementDemoApp

after creating the application using cli, add following command,

ng add @angular/elements (it will work with angular 6.x framework & rxjs 6.x only)

ng add @angular/elements

Or run following command

npm install @angular/elements - -save

and for some browser compatibility ,download some polyfill packages.

npm install @webcomponents/custom-elements - -save

then also update polyfill.ts file as shown in image below,

polyfills.ts

if you are using ng add @angular/elements command it will automatically update the polyfills.ts file.

Create the component

Now create the component, but there is nothing special about component. I.e. we are not doing anything special about component. It is just a simple component having two buttons, one for increment the counter and the other for decrement the counter and one heading to display the counter.

Generate component using angular-cli,

ng g c demo-counter

And change demo-counter.component.html with following html,

It is just simple html with two buttons and one header as said above.

Also change demo-counter.component.ts file with following code,

It is simple code like when user press + button will increment counter by one and when user press — button will decrement counter by one. Nothing special about the component.

Now I want to use this component outside the angular application i.e. on any web platform. To do so first will register it as custom element.

Setting Up app.module.ts

As you can see by default, inside the app.module.ts, it will bootstrap to AppComponent, but in our case we don’t want to do such thing,

default app.module.ts

So in our case we will remove bootstrap array from @NgModule and add one method in AppModule class, the name of the method is ngDoBootstrap() which can be used to bootstrap manually.

And also inside AppModule we will create our customElement and register it.

So finally our updates app.module.ts will look like below,

The most important take away of above code is any component which is not called by its selector or through the router, they must be declared inside entryComponents.

customElements.define() is method of html5 and it has nothing to with angular, the first argument of define method is name you want to register for your component and second argument is component itself.

Now as we want to use the above created component outside the angular application,we will do the following adjustment to our production build.

Generate Production Build with Following Adjustment

Generate build

ng build- -prod- -output-hashing none- -build-optimizer false

so our production build inside the dist directory will look like following,

dist directory

It will generate 3 different js files, main.js,polyfills.js and runtime.js file. So to concat these three files to one single file we will add following packages to our application,

npm install fs-extra concat- -save-dev

and then create the file build-script.js as shown below on root level,

The above code will generate the single js file for build i.e. it will concat our three different js polyfills,main and runtime to one file with the name of demo-counter.js inside elements directory.

So now to generate single js file from build-script.js file, we need to adjust package.json file as shown below,

package.json

Then run following on command prompt,

node build-script.js,

So now all done, to use our angular component outside angular application means on any web platform write the below shown html code,

Create one html page and copy the element directory with demo-counter.js file where you create your html page.

In my case my folder structure will look like below,

Output

output

Source Code

Summary:

Therefore, we can conclude that to work with Angular Element, we need to perform following steps:

1. Install @angular/elements and @webpackcomponents/custom-elements
2. Create component
3. Register component in entryComponent in app.module.ts
4. Generate production build and generate single js file
5. Use it on html

I hope you find this post useful. Thanks for reading. If you like this post, please share it.