DEV Community

Cover image for Using Angular component in Non-Angular App
Maulik
Maulik

Posted on

Using Angular component in Non-Angular App

We all are mostly aware of the component-based approach and we create components in certain technologies that work within that technology environment. Like angular component works only in angular and Component created with Vue work only in Vue.

But what if I want to use a component I have created with angular on other platforms?

Let's start with What is web components and then do this magic with angular.

Web Components

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

<script type="module" src="./js/my-element.js"></script>
...
<my-element></my-element>
Enter fullscreen mode Exit fullscreen mode

Using a custom element is pretty simple just like above code and you also can find how to create in javascript in this article

This article is about creating such a web component using angular so that we can later use that element anywhere by just importing a single file so let's create one.

  • Step-1 Create an angular project

    ng new web-components

  • Step-2 Add element library

    ng add @angular/elements

  • Step-3 Create web component inside the created directory

    ng generate component my-element

  • Step-4 Write code in component

    I will create a simple counter component having two buttons for increment and decrement of the counter.

  • Step-5 Open app.module.ts file and do following
    Import following

import { Injector } from '@angular/core';
import {createCustomElement} from '@angular/elements';
Enter fullscreen mode Exit fullscreen mode

Remove the declaration of AppComponent, also remove it from bootstrap.
Remove the app.component.ts and related HTML, CSS and spec.ts file and it's import

  • Add your component as an entry component inside @NgModule({})
entryComponents: [MyElementComponent]
Enter fullscreen mode Exit fullscreen mode
  • inject Injector in AppModule class and define a custom element
export class AppModule { 
  constructor(private injector: Injector) {}
  ngDoBootstrap() {
    const el = createCustomElement(MyElementComponent, { injector: this.injector });
    customElements.define('my-element', el);
  }
Enter fullscreen mode Exit fullscreen mode
  • Step-6 Write some code in your component...
  • Step-7 Build the project

    ng build --prod --output-hashing none

  • Step-8 Bundle the files generated in dist
    Multiple files get generated in dist folder including main.js, pollyfill.js runtime.js and scripts.js. In newer versions, two types of files get generated (with es2015 and es5).
    To concat files into a single file,
    first, install required dependency for concatenation

    npm install fs-extra concat

create a js file in the main folder and include the following code. I am naming it as bundle.js

const fs = require('fs-extra');
const concat = require('concat');
(async function build() {
    const files = [
        './dist/web-components/runtime-es5.js',
        './dist/web-components/polyfills-es5.js',
        './dist/web-components/scripts-es5.js',
        './dist/web-components/main-es5.js',
    ]
    await fs.ensureDir('elements')
    await concat(files, 'elements/my-element.js');
    await fs.copyFile('./dist/web-components/styles.css', 'elements/styles.css')    
})()
Enter fullscreen mode Exit fullscreen mode
  • Step-9 Run the following code to concat all files > node bundle.js

New folder named elements will be created and you can now use that element by importing the generated file and rendering the element that you have mentioned while creating custom element in app.module.ts

<script src="my-element.js" ></script>
<h4>Element below is created in angular</h4>
<my-element></my-element>
Enter fullscreen mode Exit fullscreen mode
  • Step-10 Now run that HTML file in the browser and you will see that the component created in angular now working on a simple HTML page Here is the codepen demo

Here is the angular code

GitHub logo Maulikdes / web-components

This project is a sample for creating angular web-elements

Discussion (0)