[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