A Deep Look into Angular Elements @AngularInDepth 2019, Kiev

Source Code: https://github.com/manfredsteyer/angular-elements-ngconf-2019

Transcript

1. @ManfredSteyer Web Components with Angular Elements: Beyond the Basics Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
2. @ManfredSteyer
3. @ManfredSteyer [Igor Minar, Angular Connect 2018 Keynote]
4. @ManfredSteyer
5. @ManfredSteyer Angular Elements
6. @ManfredSteyer Web Components: Framework independent components
7. @ManfredSteyer Custom Elements: Framework independent components
8. @ManfredSteyer Possibilities Component Libraries Enriching existing Apps CMS- Integration Dynamic Loading
9. @ManfredSteyer Contents • Basics • Dynamically adding elements • Lazy loading elements • External elements • Dealing with dependencies
10. @ManfredSteyer About me … • Manfred Steyer SOFTWAREarchitekt.at • Angular Trainings and Consultancy • Google Developer Expert (GDE) • Angular Trusted Collaborator Page ▪ 10 Manfred Steyer Public: Vienna, Munich, Frankfurt In-House: Everywhere in Europe http://www.softwarearchitekt.at/workshops
11. @ManfredSteyer 1) Basics
12. @ManfredSteyer Angular Elements Wrap Angular Components Expose Custom Elements
13. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent] }) export class AppModule { }
14. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent] }) export class AppModule { }
15. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent] }) export class AppModule { constructor(private injector: Injector) { } }
16. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent] }) export class AppModule { constructor(private injector: Injector) { const DateElement = createCustomElement( DateComponent, { injector: this.injector }); customElements.define('date-picker', DateElement); } }
17. @ManfredSteyer
18. @ManfredSteyer 2) Dynamic Elements
19. @ManfredSteyer Adding Custom Elements dynamically const tile = document.createElement('dashboard-tile');
20. @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([…])
21. @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); Angular uses Domino to simulate document for SSR
22. @ManfredSteyer DEMO
23. @ManfredSteyer 3) Lazy Elements
24. @ManfredSteyer Lazy Loading Register module in angular.json Load with with NgModuleFactoryLoader
25. @ManfredSteyer Register in angular.json "lazyModules": [ "[…]/lazy-dashboard-tile.module.ts" ],
26. @ManfredSteyer Lazy Loading @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService { }
27. @ManfredSteyer Lazy Loading @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} }
28. @ManfredSteyer Lazy Loading @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise<void> { return this.loader.load(path).then(moduleFactory => { }); } }
29. @ManfredSteyer Lazy Loading @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise<void> { return this.loader.load(path).then(moduleFactory => { moduleFactory.create(this.injector); […] }); } }
30. @ManfredSteyer DEMO
31. @ManfredSteyer 4) External Elements
32. @ManfredSteyer Project A Custom Element Custom Element Bundle Project B
33. @ManfredSteyer Register Custom Element when bootstrapping Compile application to self contained bundle Load bundle into consumer 3 Steps
34. @ManfredSteyer Compile to self-contained bundle
35. @ManfredSteyer ngx-build-plus: --single-bundle
36. @ManfredSteyer Load into consumer const script = document.createElement('script'); script.src = 'assets/external-dashboard-tile.bundle.js'; document.body.appendChild(script);
37. @ManfredSteyer DEMO
38. @ManfredSteyer 6) Dealing with Dependencies
39. @ManfredSteyer Bundles Custom Element 1 Custom Element 2 Custom Element 3 Libraries: Angular, RxJS, … Libraries: Angular, RxJS, …
40. @ManfredSteyer Tree Shaking + Ivy (Angular 8.x) Custom Element 1 Custom Element 2 Custom Element 3 Currently: No official Ivy Elements Bridge Inofficial: See my blog (link comes later)
41. @ManfredSteyer
42. @ManfredSteyer Where Ivy can help ✓ Widgets based on @angular/core, @angular/common  Libs like @angular/forms or @angular/router
43. @ManfredSteyer Sharing Libs Custom Element 1 Custom Element 2 Custom Element 3 Libraries: Angular, RxJS, … UMD Drawbacks: Complexity, no isolation
44. @ManfredSteyer More on SOFTWAREarchitekt.at • Angular Elements, Part I to V • Web Components with Angular Ivy in 6 Steps
45. @ManfredSteyer Summary Dynamically Adding Lazy Loading External Elements Ivy for UI-based Code ngx-build-plus: Sharing Dependencies
46. @ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d http://softwarearchitekt.at/workshops Slides & Examples