Web Component-based Micro Frontends with Angular

Accelerate your frontend teams with web component-based micro frontends with Angular!

From routing over translations, theming and overlays to the production deployment: We show you all the steps to split your frontend monolith into a platform and multiple micro frontend applications.

With the example of a train booking application, we guide you through all the required code changes to achieve the same user experience in your microfrontends like in a monolithic application. But with a blazingly fast development experience!

The full source code is available on GitHub.

Both the starting point of a monolithic application:

And the journey destination of a carved out microfrontend:

Check out the blogs of the creators Konstantin Tieber and Fabian Böller:

00:00 Introduction of speakers
02:30 Presentation of example app
04:13 Desired target state
08:32 Why micro frontends?
18:31 The code of the example app
20:10 Step 1: Extract separate microfrontend app
26:06 Step 2: Expose microfrontend as web component
39:33 Step 3: Propagate route changes to micro frontend
44:37 Step 4: Improve local development experience
55:07 Step 5: Load translations in microfrontend
1:02:16 Step 6: Propagate language changes to micro frontend
1:06:10 Step 7: Why theming already works
1:08:20 Step 8: Deploy to Netlify
1:21:02 Step 9: Develop a new page in the micro frontend
1:27:51 Step 10: Propagate route changes to platform
1:36:22 Overview of microfrontend and platform interaction
1:37:10 Disable microfrontend interaction with window url
1:38:52 About toasters and modals
1:41:09 Conclusion

[georgeb]

40:36 - route should be full - as its in the root application
41:16 - component @Input to communicate between routers
41:57 - each route change, will trigger a router navigation inside the webcomponent
42:51 - [microfrontendDirective] - subscribe to route url
43:26 - set it as a route property on the custom element
44:30 - first Milestone met - microfrontend is using customInput
1:31:09 - inside constructor registerOutgoingRouting()
1:32:25 - registerOutgoingRouting()
1:31:55 - RoutesRecognized is the final url
1:33:16 - RouterEvent interface
1:33:34 - HostListener
1:34:11 - navigateToUrl
1:35:58 - Diagram on how the router interaction works for the user

[zoecarlibur]

Very insightful and helpful, Thanks for the upload!

[illusionist]

Great tutorial and amazing solution for webcomponents in Anagular. What i tried was adding another feature in the same project and registerd that as a webcomponent. So now in a single JS i have two custom elements defined that have their own routes. Now when i integarte these two elements in shell app it work fine untill i navigate to another element. For example when i refresh the app and go to booking element it works finr but when i go to other element it loads the element but the navigation within that element just doesnt work, the route change however is visible on the address bar, the component doesnt load.

[edulgl]

This is a cool approach, simple to understand, but I believe there's something missing because you shouldn't need to create a directive in order to pass data into the web component (42:55). If the host platform is angular based, you would normally pass the data to the web component using the bracket syntax for inputs and it should re-render the component (issue #40155 on the angular repo talks a bit about this).

I've replicated this approach in a personal repo and I also cannot set inputs to the web component on the templates directly, the only way is to get a reference to the dom element and set the property manually (as is done in the directive). But on the ng conf workshop about microfrontends there's a web component example that uses the angular-extensions/elements library to load the web components and the components inputs work correctly, without the need of a directive.

I'm still unsure what exactly is causing this issue because the approach from the angular-extensions library is very similar to this one.

[qstef]

Very great and helpful video!
What about lazy loading modules inside the web component and image assets directly inside the html?
As I'm trying out this method everything works fine outside of the fact that lazy loaded modules inside the web components tries to load from the"platform/parent" component, where of course they can't find the other JS files and same goes for assets that are loaded directly inside the html with a path like "assets/icons/img"

[arsalino]

I do not understand the need for the mf wrapper in the second step "expose mf as a web component" and also using modules.
Why not work with standalone components and use the main.ts to call createCustomElement and define the custom element?
Thank you.

[Zoloomn]

How about module-federation? Have you guys used it in angular?