How to Compile Angular Element Into Web Component w/ Webpack or Angular CLI?

Question

I built a simple Web Component via Angular using Pascal Precht\'s tutorial, which you can see working HERE. It auto-magically compiles in the on Stackblitz in the link, but not

Answer 1

From what I read the packaging specific for Angular Elements components for easy use outside Angular will come with Angular 7.

What you can do now is to create and angular application with the cli.

ng new YourAppName

Add the Angular Elements library with:

ng add @angular/elements

This adds also all required polyfills as described in the official Angular Documentation.

Then you change the AppModule to not be a bootstrap module but just register the custom elements. You remove the bootstrap from the NgModule and ad the components as entry components. Then register the components as custom elements in the ngDoBootstrap hook. I made both the default AppComponent and HelloComponent custom elements. This is how my app module looks like:

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

import { AppComponent } from './app.component';
import { HelloComponent } from '../hello/hello.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  entryComponents: [AppComponent, HelloComponent]
})
export class AppModule {
  constructor(private injector: Injector) {
  }

  ngDoBootstrap() {
    customElements.define('app-root', createCustomElement(AppComponent, {injector: this.injector}));
    customElements.define('hello-world', createCustomElement(HelloComponent, {injector: this.injector}));
  }
 }

Then you can use the elements in the index.html like elements for example like this:

If you build this with ng build --prod you get minimized packages that you could use also now in other html pages by including the package scripts as they get included by the compiler in the index.html file.

I have added my sample to GitHub. In the history you can see what I have changed from the initial cli application.