[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