How to build webcomponentjs v0 polyfill and include in angular

1) git clone repository
2) check out v0 branch
3) install gulp globally

  1. npm install -g gulp

4) build webcomponentjs manually

  1.  npm install
  2.  gulp build

5) Find the generate js files in dist/ folder
6) Copy webcomponents.min.js to assets folder of angular project
7) import webcomponents.min.js to polyfill.ts

  1. import "./assets/webcomponents.min";

Create custom element in angular 6

1) Create Angular Project

ng new <project name> --prefix custom --style=scss --skip-tests

2) Use schematics to add angular element support

ng add @angular/elements

3) Use angular-cli to generate new component and specify encapsulation is ViewEncapsulation.Native
4) Assume the custom element uses Bootstrap 4 for styling. Then, import Bootstrap Sass in scss file of the component.

$icon-font-path: "../../../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap/scss/bootstrap";

5) app.module.ts does not bootstrap AppComponent

  1. @NgModule({
  2.   declarations: [AppComponent],
  3.   imports: [
  4.     BrowserModule,
  5.     FormsModule,
  6.     HttpClientModule,
  7.     NgbModule.forRoot(),
  8.     TimeZoneModule
  9.   ],
  10.   providers: [],
  11.   bootstrap: []
  12. })
  13. export class AppModule {
  14.   constructor(private injector: Injector) {}
  16.   ngDoBootstrap() {
  17.     const timeConverterElement = createCustomElement(InputTimeFormComponent, {
  18.       injector: this.injector
  19.     });
  20.     customElements.define("time-converter", timeConverterElement);
  21.   }
  22. }

6) Build a nodeJS script to concatenate runtime.js, polyfill.js, script.js, main.js into time-converter.js. The time-converter.js can be used in other JS Frameworks and static website.

  2. const fs = require("fs-extra");
  3. const concat = require("concat");
  4. (async function build() {
  5.   const files = [
  6.     "./dist/ng-time-converter/runtime.js",
  7.     "./dist/ng-time-converter/polyfills.js",
  8.     "./dist/ng-time-converter/scripts.js",
  9.     "./dist/ng-time-converter/main.js"
  10.   ];
  11.   await fs.ensureDir("elements");
  12.   await fs.emptyDir("elements");
  13.   await concat(files, "elements/time-converter.js");
  14.   await fs.copyFile(
  15.     "./dist/ng-time-converter/styles.css",
  16.     "elements/styles.css"
  17.   );
  18.   await fs.copy("./dist/ng-time-converter/assets/", "elements/assets/");
  19.   await fs.copyFile("./src/demo.html", "elements/index.html");
  20.   await fs.copyFile("CNAME", "elements/CNAME");
  21. })();

Articles I want to read





React Native

Projects built in May, 2018


CSS Grid


Angular Reactive Form Articles

Angular Reactive Form

Reactive Forms Form Array Dynamic Fields

Angular Reactive Form
Reactive Form (Stackblitz)

Angular 2 Reactive Form


Reactive Form and Formarrayname

Build dynamic reactive form

Projects built in April, 2018

Angular 5

Build a Todo App with Angular 5 and Ngrx 5. Ngrx 5 is an open source state management library powered by RxJS.
So far, I used ngrx/store to define a store that stores todo, course and instructor entities. Ngrx entity generates entity state that is an object with mandatory ids and entities properties. As their names implied, ids hold an array of object ids and entities is a mapping of id to object. If you want the entity state to have custom attributes, they are initialized in getInitialState function of Adapter class.

loading: false

Ngrx effect, on the other hand, observes some actions, causes side effects and returns the result actions to reducer function. Reducer function accepts the result action, processes the payload and updates the store with new state. Ngrx effect class is a good candidate to make HTTP requests to backend, extract response data, construct payload and provide resultant action.

Furthermore, todo and learnings are designed as lazy loaded modules to reduce initial load time and they only get loaded when navigating to route of the module.

Projects built in March, 2018