Web Components with Angular Elements: beyond the Basics @iJS Munich 2019

Examples:
https://github.com/manfredsteyer/webcomponents-dashboard
https://github.com/manfredsteyer/standalone-elements.git

Angular Schulungen:
https://www.softwarearchitekt.at/angular-schulung/

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: Selected Cities In-House: Everywhere 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
19. @ManfredSteyer DEMO
20. @ManfredSteyer 2) Dynamic Elements
21. @ManfredSteyer Adding Custom Elements dynamically const tile = document.createElement('dashboard-tile');
22. @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([…])
23. @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
24. @ManfredSteyer DEMO
25. @ManfredSteyer 3) Lazy Elements
26. @ManfredSteyer Lazy Loading Register module in angular.json Load with with NgModuleFactoryLoader
27. @ManfredSteyer Register in angular.json "lazyModules": [ "[…]/lazy-dashboard-tile.module.ts" ],
28. @ManfredSteyer Lazy Loading @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService { }
29. @ManfredSteyer Lazy Loading @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} }
30. @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 => { }); } }
31. @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); […] }); } }
32. @ManfredSteyer DEMO
33. @ManfredSteyer 4) External Elements
34. @ManfredSteyer Project A Custom Element Custom Element Bundle Project B
35. @ManfredSteyer Register Custom Element when bootstrapping Compile application to self contained bundle Load bundle into consumer 3 Steps
36. @ManfredSteyer DEMO
37. @ManfredSteyer Compile to self-contained bundle
38. @ManfredSteyer ngx-build-plus: --single-bundle
39. @ManfredSteyer Load into consumer const script = document.createElement('script'); script.src = 'assets/external-dashboard-tile.bundle.js'; document.body.appendChild(script);
40. @ManfredSteyer DEMO
41. @ManfredSteyer 6) Dealing with Dependencies
42. @ManfredSteyer Bundles Custom Element 1 Custom Element 2 Custom Element 3 Libraries: Angular, RxJS, … Libraries: Angular, RxJS, …
43. @ManfredSteyer Angular Ivy Custom Element 1 Custom Element 2 Custom Element 3 Currently: No official Ivy/Elements Bridge Inofficial: See my blog (link comes later)
44. @ManfredSteyer Roadmap (details can change) • Ivy behind a flag - try it out! • Currently no Ivy/Elements-Bridge Angular 8 (Spring 2019) • Ivy by default • No breaking changes Angular 9 (Fall 2019)
45. @ManfredSteyer More on SOFTWAREarchitekt.at
46. @ManfredSteyer
47. @ManfredSteyer Where Ivy can help ✓ Widgets based on @angular/core, @angular/common  Libs like @angular/forms or @angular/router
48. @ManfredSteyer Sharing Libs Custom Element 1 Custom Element 2 Custom Element 3 Libraries: Angular, RxJS, … UMD Drawbacks: Complexity, no isolation
49. @ManfredSteyer More on SOFTWAREarchitekt.at
50. @ManfredSteyer Summary Dynamically Adding Lazy Loading External Elements Ivy for UI-based Code ngx-build-plus: Sharing Dependencies
51. @ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d http://softwarearchitekt.at/workshops Slides & Examples