Web Components with Angular: Beyond the basics

@ManfredSteyer Web Components with Angular: Beyond the basics Manfred Steyer
SOFTWAREarchitekt.at ManfredSteyer

@ManfredSteyer About me … • Manfred Steyer SOFTWAREarchitekt.at • Angular
Trainings and Consultancy • Google Developer Expert (GDE) • Angular Trusted Collaborator Page ▪ 2 Manfred Steyer Public: Vienna, Munich, Frankfurt In-House: Everywhere in Europe http://www.softwarearchitekt.at/workshops

@ManfredSteyer Contents • Motivation & Angular Elements 101 • Polyfills
• Dynamic & Lazy elements • External elements • Dealing with dependencies • Excluding Zone.js

@ManfredSteyer Motivation

@ManfredSteyer Web Components: Framework independent components

@ManfredSteyer Standards Templates HTML Imports Custom Elements Shadow DOM

@ManfredSteyer Some Possibilities … Widget Libraries CMS Integration Enriching existing
Apps Migrating Legacy Apps

@ManfredSteyer Angular Elements

@ManfredSteyer Angular Elements Wrap Angular Components Expose Custom Elements

@ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent]
}) export class AppModule { }

@ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent]
}) export class AppModule { constructor(private injector: Injector) { } }

@ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], bootstrap: [],
entryComponents: [DateComponent] }) export class AppModule { constructor(private injector: Injector) { const DateElement = createCustomElement( DateComponent, { injector: this.injector }); customElements.define('date-picker', DateElement); } }

@ManfredSteyer CUSTOM_ELEMENTS_SCHEMA @NgModule({ […], schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }) export
class MyModule {}

@ManfredSteyer DEMO

@ManfredSteyer Polyfills

@ManfredSteyer Distribution

@ManfredSteyer Polyfill

@ManfredSteyer Selected Polyfills • webcomponents-loader.js • Loads Polyfills on demand
• Custom Elements • Shadom DOM • Templates • native-shim.js • Needed for browsers that DO support polyfills … • … as long a we downlevel to ES5

@ManfredSteyer DEMO

@ManfredSteyer Dynamic and Lazy Elements

@ManfredSteyer Adding Custom Elements dynamically const tile = document.createElement('dashboard-tile');

@ManfredSteyer Adding Custom Elements dynamically const tile = document.createElement('dashboard-tile‘); tile['prop']
= 123; tile.setAttribute('class', 'col-lg-4 col-md-3 col-sm-2') tile.addEventListener([…])

@ManfredSteyer Adding Custom Elements dynamically const tile = document.createElement('dashboard-tile‘); tile['prop']
= 123; tile.setAttribute('class', 'col-lg-4 col-md-3 col-sm-2') tile.addEventListener([…]) content.appendChild(tile);

@ManfredSteyer Lazy Loading Register module in angular.json Load with with
NgModuleFactoryLoader

@ManfredSteyer Register in angular.json "lazyModules": [ "[…]/lazy-dashboard-tile.module.ts" ],

@ManfredSteyer Register in angular.json @Injectable({ providedIn: 'root' }) export class
LazyDashboardTileService { }

LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} }

LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise<void> { return this.loader.load(path).then(moduleFactory => { }); } }

LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise<void> { return this.loader.load(path).then(moduleFactory => { moduleFactory.create(this.injector); […] }); } }

@ManfredSteyer DEMO

@ManfredSteyer External Elements

@ManfredSteyer Project A Custom Element Custom Element Bundle Project B

@ManfredSteyer Register Custom Element when bootstrapping Compile application to self
contained bundle Load bundle into consumer 3 Steps

@ManfredSteyer Register when bootstrapping @NgModule({ […] bootstrap: [] }) export
class AppModule { }

@ManfredSteyer Register when bootstrapping @NgModule({ […] bootstrap: [] }) export
class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { } }

@ManfredSteyer Register when bootstrapping @NgModule({ […] bootstrap: [], }) export
class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { const externalTileCE = createCustomElement( ExternalDashboardTileComponent, { injector: this.injector }); customElements.define('external-dashboard-tile', externalTileCE); } }

@ManfredSteyer Compile to self-contained bundle

@ManfredSteyer ngx-build-plus: --single-bundle

@ManfredSteyer Load into consumer const script = document.createElement('script'); script.src =
'assets/external-dashboard-tile.bundle.js'; document.body.appendChild(script);

@ManfredSteyer DEMO

@ManfredSteyer Dealing with Dependencies

@ManfredSteyer Bundles Custom Element 1 Custom Element 2 Custom Element
3 Libraries: Angular, RxJS, … Libraries: Angular, RxJS, …

@ManfredSteyer Tree Shaking + Ivy (Angular 8.x) Custom Element 1
Custom Element 2 Custom Element 3

@ManfredSteyer

@ManfredSteyer Where Ivy can help ✓ Widgets based on @angular/core,
@angular/common  Libs like @angular/forms or @angular/router

@ManfredSteyer Sharing Libs Custom Element 1 Custom Element 2 Custom
Element 3 Libraries: Angular, RxJS, … UMD Drawbacks: Complexity, no isolation

@ManfredSteyer DEMO

@ManfredSteyer Excluding Zone.js

@ManfredSteyer How to exclude it? platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'})

@ManfredSteyer Consequences • Manual Change Detection • Change Detection via
Observables

@ManfredSteyer DEMO

@ManfredSteyer Summary Polyfills Adding dynamically Lazy loading Compiling and loading
external elements Dependencies Zone.js

@ManfredSteyer Contact and Downloads [mail] [email protected] [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer
d Slides & Examples Public and In-House http://www.softwarearchitekt.at/workshops

Web Components with Angular: Beyond the basics

Web Components with Angular: Beyond the basics

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript