Runtime Customizing for your Angular App - iJS New York 09/2023

ANGULARarchitects.io - Michael Egger-Zikes

By using Angular to create a software product, your frontend architecture uses logical layers implemented as @Injectable Services. The built-in Dependency Injection API allows rich customization based on factory functions. Your product can be shipped with default logic that fits for most customer integration scenarios.

I am going to share with you advanced options on how to lazy-load Services known at build time and we will investigate the usage of Module Federation to load type-compliant implementations from a different build process during runtime. Moreover, you will learn to exchange a root-level Service with a new implementation while your App is actively running.

This talk is important for everyone interested in customizing an Angular App at build- or runtime. This leads to a solid frontend architecture that can be modified easily when needed.

Transcript

1. Runtime Customizing Michael Egger-Zikes for your Angular App ANGULARarchitects.io
2. Runtime Customizing Services Functions Micro Apps Features Routing Dependency Injection What this talk is about JSON API Module Federation Michael Egger-Zikes (@MikeZks)
3. About Michael • Michael Egger-Zikes ANGULARarchitects.io • Focus on Angular • Trainings, Consultancy, Reviews • Conference Speaker Public: in-person or remote In-House: everywhere angulararchitects.io /en/angular-workshops Michael Egger-Zikes @MikeZks
4. Why do you need Runtime Customizing of your Angular App? ?
5. Reasons for Runtime Customizing • App ships with a feature set included in the main build process • App settings can modify the runtime behavior • Customizing is more than changing themes or known settings • Runtime Customizing allows to hook into the currently running code Michael Egger-Zikes (@MikeZks)
6. Technology stack • Angular and the Build Monolith • Webpack Module Federation • Angular Routing • Angular Dependency Injection • New, custom Dynamic APIs Michael Egger-Zikes (@MikeZks)
7. Module Federation • Often connected with Micro Frontends only • API allows the integration of any exported JavaScript implementation • Defines what shall be exposed • Defines what shall be shared • Allows the integration of new code into a running Angular App Michael Egger-Zikes (@MikeZks)
8. Challenges • App needs to be customized w/o a Rebuild • New features may be deployed while the Shell is running • App needs to be customized w/o a Browser Reload • Root-level Services shall be exchanged at runtime • Routed views may be exchanged on any hierarchal level • Switch between Default and Plugin behavior needs to work Michael Egger-Zikes (@MikeZks)
9. Services Functions Features Supported Runtime APIs Micro Apps Michael Egger-Zikes (@MikeZks)
10. Service Discovery Module Federation Load Config Customizing Custom Code Types Module Federation Key JSON API Dynamic UI Widgets Toggles Michael Egger-Zikes (@MikeZks)
11. DEMO Shell JSON Config
12. Services • Load Services at Runtime • Exchange Services w/o Browser Reload • Exchange even root-level Services • Custom Services can be switched on & off Michael Egger-Zikes (@MikeZks)
13. Environment Injector Platform, Root, Routes-Array, NgModule Element Injector Component HTML Element (Directive) Angular Dependency Injection Michael Egger-Zikes (@MikeZks)
14. Lazy Loading Known at Shell Build-time Separate Bundle Angular supported Module Federation Different Build Process Different Deployment Time Community supported Lazy Loading or Module Federation? Michael Egger-Zikes (@MikeZks)
15. DEMO Custom Services Dynamic Provider
16. Functions • Load Functions at Runtime • Switch between Default implementation & Plugin logic at Runtime • Reactive Forms Validation Function as example • Wrapping Function: concept works for any other Function as well Michael Egger-Zikes (@MikeZks)
17. DEMO Custom Functions Function Wrapper
18. Micro Apps • Module Federation Single Version approach • Exposed Routes array • Like Angular Lazy Loading, but from separate Build process • Allows full integration into Angular’s Dependency Injection tree Michael Egger-Zikes (@MikeZks)
19. Features • Routed Use-Cases as Smart Components with Child Components • Can be added into present Lazy Loaded Routes • Integrates into the correct level of the Dependency Injection tree • Custom Features can be switched on & off Michael Egger-Zikes (@MikeZks)
20. DEMO Micro App Custom Features
21. ! • Default implemention • Runtime Customizing where needed • Module Federation integrates code from separate Build process at Runtime • Configuration with JSON/Backend • Exchange logic w/o Rebuild • Exchange logic w/o Reload Key takeaways
22. [web] ANGULARarchitects.io [twitter] Michael Egger-Zikes (@MikeZks) [repo] https://github.com/mikezks/ijs-nyc-customizing Contact • Slides • Code Remote Workshops: Public & tailored to your company angulararchitects.io/angular-workshops