Runtime Customizing Michael Egger-Zikes for your Angular App ANGULARarchitects.io 

Runtime Customizing Services Functions Micro Apps Features Routing Dependency Injection What this talk is about JSON API Module Federation Michael Egger-Zikes (@MikeZks) 

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 

Why do you need Runtime Customizing of your Angular App? ? 

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) 

Technology stack • Angular and the Build Monolith • Webpack Module Federation • Angular Routing • Angular Dependency Injection • New, custom Dynamic APIs Michael Egger-Zikes (@MikeZks) 

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) 

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) 

Services Functions Features Supported Runtime APIs Micro Apps Michael Egger-Zikes (@MikeZks) 

Service Discovery Module Federation Load Config Customizing Custom Code Types Module Federation Key JSON API Dynamic UI Widgets Toggles Michael Egger-Zikes (@MikeZks) 

DEMO Shell JSON Config 

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) 

Environment Injector Platform, Root, Routes-Array, NgModule Element Injector Component HTML Element (Directive) Angular Dependency Injection Michael Egger-Zikes (@MikeZks) 

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) 

DEMO Custom Services Dynamic Provider 

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) 

DEMO Custom Functions Function Wrapper 

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) 

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) 

DEMO Micro App Custom Features 

! • 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 

[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