Routeception! How to use the Angular Router in Micro-Frontends | Kyle Cannon | ng-conf 2021

[Music] hello everyone i am kyle cannon and i work on internal tooling at playstation as a staff software engineer today i would like to share some unconventional ways to utilize the angular router with micro front-ends let's get started the reality is microfrontends may be something as simple as a login form or as complicated as a single page application in nature wouldn't it be nice to utilize the functionality provided by the angular router to employ functionality such as code splitting guards and named router outlets i have coined this the dreamstack which stands for dawnless routing engine allowing madness see the idea behind the dreamstack is to allow combining many single page applications as siblings on a page while ensuring each sibling application is not aware of one another this would allow each angular application that is loaded in as a sibling to have its own sandbox instance of the angular router however angular's router has a guard that prevents this from working out of the box so what if we trick the guard by utilizing angular's dependency injection system to our advantage see each time an element is created an element injector is created as well each element injector in return has access to the parent element injector the dependency injection system will walk up the tree until it finds the matching token and return the value if possible to short-circuit the dependency resolution to the router guard we need to create a new provider for the router token that sets the value as null we can do this by utilizing a static injector that sits between our new application and the host application on the left i have the application that i am going to load in called widget a each app registration needs a name and a bundle property that expects an ng module to be resolved as a promise after invoking the function this functions exactly like the low children in the angular router now to load the app registration we create a static injector that accepts a parent injector after loading the federated ng module bundle and compiling it we then pass in the static injector we created into the ng module factory crate method we can now create a provider token for the router with the value of null along with creating our own platform location that is decoupled from the browser's dom allowing for every application instance to have a router that is detached from the browser's window.location the next step is to make a pure pipe that utilizes the app loader's create ngmodule ref function which accepts the app registration and the parent injector from there we need to render our app module on the left so we create a structural directive that accepts the ng module ref as the value from there we extract the injector and the entry component from our mfv module instance this allows us to specify what component to render in a reusable and predictable way finally after inserting our new application we call a router dot initial navigation and detect changes on the component factory ref to bring it all together we build our app instance component we use our render app structural directive we just created push the app registration into our pipe that we just created and provide the app instance component injector as the parent injector on the pipe's argument finally we use ngrx push to unwrap the observable and now let's take a look so if we see here we have a series of tabs at the top each representing a separate shipped single page application with a remote entry point for module federation to combine them all together so to show how the routing works we can click that first route we can click that second route it's going to work we have ngrx store as well we're going to go over to our scorecard it's the same principle along with our tour of heroes that i brought in as well cool so i created this dream dashboard which basically combines all these single page applications together and we can make a dashboard out of it so if we needed to have two score scoreboards because we're doing let's say you know two baseball games great we can have the home score here and we can have the away score here uh doesn't matter we can have the first route changed on this one and we can change the second round on this one and it doesn't interfere with our url at the top which is fantastic so we want to create a counter that's not a problem either we can create that first route that second route same thing nothing changes can i confront that count as well each individual one has its own ngrx store as well so i'm getting a lot of stuff on here i'm just going to clear this up so what if we wanted to nest this well we can create a dashboard and a dashboard and a dashboard in a dashboard and we can have a counter here and we can have a counter here and a counter here and a tour of heroes here even though it's not going to look very well now we can navigate to arturo heroes here perfect we can change that second route here and we can change it up here to the first route and everything is just isolated as everyone knows five minute talks have a lot of content in a very short amount of time which is why the source code is available on github for you to take a look at at your own pace please feel free to reach out to me on twitter if you have any questions and i would like to give a special thanks to the following folks where if i didn't have their support this talk would have not been possible thank you

Channel: ng-conf

Views: 1,370

Rating: 4.6610169 out of 5

Keywords: angular, angularjs, javascript, ngconf, ng-conf, programming, angular conference, ng conference, angular javascript, angular tutorial, Javascript Tutorial, Programming Tutorial, Computer Programming, Google Angular, Google Programming

Id: fQrUGill9M0

Length: 5min 37sec (337 seconds)

Published: Fri Sep 17 2021