[Angular] Use ngx-build-plus to compile Angular Elements

We can treat Angular Element as each standlone lib and compile each Angular element spreatly. Tool we are using to compile Angular element is 'ngx-build-plus':

Install:

npm i --save ngx-build-plus

 

It modifies the angular.json to use ngx-build-plus to compile our Angular Element lib.

 

Generate a project with Angular CLI and only keep the app.module.ts and your component ts file:

// app.module.ts:

import { NgModule, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';

import { GreeterComponent } from './greeter.component';

@NgModule({
  declarations: [GreeterComponent],
  imports: [BrowserModule],
  providers: [],
  entryComponents: [GreeterComponent]
})
export class AppModule {
  constructor(injector: Injector) {
    const el = createCustomElement(GreeterComponent, { injector: injector });
    customElements.define('do-greet', el);
  }

  ngDoBootstrap() {}
}

component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  // selector: 'do-greet',
  template: `
    <div>
      Hi there!
    </div>
  `,
  styles: []
})
export class GreeterComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

 

Create a buildEl.sh file for build Angular Elemenet:

#!/bin/sh
ng build ngelements --prod --output-hashing=none --single-bundle true --keep-polyfills true
mv dist/ngelements/main.js demo/ngelements.js
mv dist/ngelements/polyfills.js demo

The build script will:

• output two files: main.js and polyfill.js. main.js contains Angular elemenet, polyfill is mainly used for testing demo app, normally production app has polyfill already. So we don't need to include ployfill inside main.js
• output files locates in 'dist' folder under root.
• We copy main.js and polyfill.js to demo folder for testing our Angular elements and rename main,js to ngelement.js.

Github, More