Nx After Dark: Splitting the heroes domain into libraries

hello welcome to nx after dark um i was just tweeting about this episode so a few minutes ago we had one where we migrated a workspace to standalone project configurations and i guess this one i'm going to be splitting a junk library with the whole domain into multiple libraries we're going to create a shell library we're going to create a data access library domain library and some feature libraries or maybe not all of it right now but that's what we're going to start on and some time soon we should also start adding linting to all of our projects when we migrated from angular cli workspace to an nx workspace we uh i deleted everything that had to do with linting because it was using the deprecated and long time dead tslent which you should never be using these days so of course nx comes with support for building support for eslint and angular eslint so it's a matter of generating the root configuration and then you can add it to each project you're generating and i'm going to be manually adding them more for all the existing projects i guess so that's for another time and then once we have that we can start setting up using the tags that we already have and setting up module boundaries that is enforced by tools so that's very interesting and the nice benefit of using nx in the first place so let me find the screen and here's the project again i'm having a lot of issues with vs code extensions just crashing all over the place so let's first remove all this stuff and good okay so in a previous episode we already fit this with the let's see the crisis center has been split up into a data access library a domain library some features and a feature shell i'm going to delete this random folder uh so let's do the same for the heroes domain because right now we just have everything here which was moved from the original application project so it's just a junk library right now which is a good place to start oh gregory is telling me that angular schematics should work with standalone project configurations nice yeah okay thank you gregory again um yeah so we need to split this one junk library into multiple ones like we did with the crisis center so actually there won't be any there probably won't be any page library we'll start with the shell library so let's generate angular library it's the feature show it will be in the heroes directory it will let's see we'll have some tags it'll have the scope of heroes type is feature we're still using karma just because this started out as an angular workspace so uh there is there are migrations from karma to just i don't actually have any tests so it doesn't matter but i'm just keeping with karma because that's what it was born with this workspace uh i don't know maybe we'll switch to just later but i don't know don't want to do that now okay so gregory was saying that standalone config will be the default if every project is already using that see if that's all the case here do we have a project json yeah okay very good so that's kind of um intelligent intelligent default which is nice uh yeah so i'm going to be generating this feature shell library for the heroes domain here it is so this is the heroes shell and it's it i'll change the nx json oh i just added this project object again for some reason i don't want that uh yeah okay okay generate heroes shell hello christopher thank you for joining uh where are you at which country are you in in time zone it's pretty late here in denmark quarter past 11 p.m very dark so our feature shell let's see it generated a module we're going to keep that i always start by deleting metadata and only adding what we need so for a shell library we're going to need a gel component or actually i think we had another naming thing here yeah it was called the same it's called like heroes it'll be the heroes component and now we yeah we should it's because it's already existing in here right no okay oh this is the one with yeah we're going to have to solve this routing um somehow it's going to be interesting because they don't have the same prefix right they have four different prefixes that's a mess hmm yeah we can solve it we can solve it it's just not going to be very clean but it's possible uh but we don't have the right now we don't have this uh heroes component the which is the shell so we're going to add one ourselves here and these days i actually like to just do it in one file so creating a component it's called the heroes component but it's it's a shell component but we don't have to name it after the pattern um so selector what's our prefix here i have no idea app hero all right heroes then so just building this from scratch and i like doing single file components so this will definitely have a router outlet the minimum requirement for a shell component and then we need a scam single component angular module so we'll actually call it the hero scan to make this clear and we're going to need the router module or the router outlet director i'm going to declare one component the hero's component like so and we don't have to export it because this will be a routed component good so now inside here of our feature shell module for the heroes domain we can do let's see we're starting with usually we would start with um routes and it would have to have just a default round and then we would have the heroes component and to use that we would need to import router module for child routes and we would need to import our heroes scam like so and usually we also re-export the router module for shell modules i don't know we don't have to it's just a convention uh effectively what it does is uh a module importing this module that components that module is declaring uh they don't have to use import the router module themselves which is unnecessary if we're creating scams but yeah whatever doesn't i mean router module is going to be used no matter what and when we have all these shell components okay so this is the starting point and so where would we hook this up that would be in the probably in the app project here in the app routing module let's see if we already have um heroes oh we don't yeah we don't it's instead it's importing this heroes feature page module which means that nothing is lazy loaded which is a very bad practice uh because it'll bundle up the heroes domain all the features and routes for the main bundle which is definitely not what we want so it would be nice to fix this as well so yeah yeah we can let's start by going up there and lazy loading so yeah so normally it will be similar to here we would have just say heroes and i don't want to interfere with existing routes so i'll just do it with a set or a c for now and we will lazy load two of heroes um and now oh it's here great feature shell then mapping to the es module heroes feature shell module nice and here there is a custom feature to pre-load modules we don't want to add that all right so now they're connected and we have one component showing nothing by default so add shell component and lacy routes next step next yeah step get back to that routing uh thing later next up is splitting up splitting out the um let's see let's try the features one at a time we have two features in this domain the detail and the list so let's start by creating a detail feature library ah and now the extension host is dead again i'm very unhappy with the visual studio code extensions today whatever is messing things up okay creating a library it will be a feature library it will be called the tail it will be in the heroes directory and it will have some tags scope heroes type feature that we can use to set up architectural architectural boundaries and rules for that later wow it's just not my visual studio codes day to day so i'm going to have to reload everything and hopefully that keeps it running for some minutes and what did we get we got this feature detail library heroes detail teacher yeah why not all right it has a feature module always deleting this metadata um and now we can just make a commit so it'll be easier to see what we're adding sorry roll it back generate heroes detail feature so let's take not from here from the heroes junk library feature page we will take just this folder and move it into this new feature library paste it and then we start to see that it has some dependencies on let's see the hero servers the hero the main entity and yeah that's about it so uh let's ignore these broken imports for a moment and instead we will yeah so what's declaring this component now we we have to create a scam so i i will keep before i showed you that my preferred way currently which is a single file component with a scam and now i'm just for this one i'm keeping the existing structure just for now we can turn them all into single file components later and that will be fun heroes detail module ah declarations hero detail components and oh that's not a good auto import oh yeah it's complaining because of the broken imports all right this is going to be a routed feature as well so i'm not going to export it but i need to import modules for it the declarables using the declarable dependencies so if i take the well the template actually now i can start to see okay what do we need there's an ngf there's an async pipe so we definitely do need now this common module and what else do we see ng model that's the forms module the template driven one and anything else no okay so that should be it that's this is now the scam for the hero detail component and so let's see how we connect that to our feature module and we do that by importing hero detail module the relative import and this is going to be a routed feature so and we're going to add routes this is a very simple app right now it's from the angular 2 of heroes routing tutorial so currently it will have just one route default route actually so not a good guess how to import oh it's in the folder right hero detail like so all right so we need to import using the router module for child routes are passed and this detail module is exposed here in our public api the index ts barrel file so now we have a feature module for a routed feature with just one component inside of it because it's it's a simple app for now but this is going to be a scalable and maintainable approach for adding more to this feature later on um yeah good good good so we did what we extracted so it's a refactor commit extract hero detail component or move it to hero detail feature and i guess we could do one more thing we could now go to the shell and here we could add the first child route [Music] and yeah let's let's um we will correct it later we have to keep the existing routes that are already in the app but just this is something what we're sorry should be 12 children this is just we're starting to get there right so two of heroes here is feature detail and then module.yesmodule.heroes feature detail module now we have lazy loading on this level as well so that we're loading them in small chunks one at a time i mean right now they're very small chunks but in a fully fledged feature they will be larger and it would give us a good performance to do this laser load most of the things by default good so now they're also connected here let's do the next one let's now do the hero list so again we will generate an angular library we'll call it's a feature library and it's going to be the list feature inside the hero's domain so it's the hero list here in the heroes domain grouping folder i'm going to give it some tags scope is heroes i mean you can use whatever tags you want so scope might as well have been domain if that's what the terminology you're using in your team and organization scope is just a conventional tag name so i'm using it in this workspace and type and you can name it whatever you want what what matters is using them consistently and then setting up the the lint rules the workspace link rules which we will later so it's a feature library generate it and should show up right here great and this is the extension host is dead again sorry so the heroes hero list feature feature i'm going to restart the vs code man this is good getting out of hand okay so this is generate hero list feature and we saw that it got the standalone project configuration with the tags and the pro project properties and in workspace json we now have this where is it here this one entry oh uh let's use the forward slashes for um from compatibility and craiger has already fixed it or someone has at normal and it'll be in an upcoming release so looking forward to that and now extensions are dead again even though getting extension here so really annoying i don't want to use command line for everything so this will be an amend commit all right so we have this list feature library let's go in and grab from our junk library that we're going to empty out and delete let's grab this hero list component cut this folder move it in here by pasting and now again we have the issue that this doesn't have a module declaring it so i'm going to create a scam hero list module.ts this is module come on extensions i have to write everything by hand today apparently i do in the module i think i've done this a thousand times or tens of thousands of times actually uh okay this is the hero list module it is a scam so it's declaring one module or one component sorry so it's the hero list component and now we need to look into the imports hero list component has some broken imports as well we'll deal with them soon huh who added this to do did i do them what crazy all right um what's needed we need we have ng4 we have async pipe so we definitely need common module and what do we have the router link okay interesting so we need the router module for the router link directive and anything else no that's all that's used for this template all the declarable dependencies so now we have a functioning scam and we can use that in here in our future module we'll do the same as before where we say we have some routes and for now we just have one round default one and the component is this hero list component so to set that up we're going to register the route by importing router module for child and we need to import the hero list scam the hero list module and that's it that's it then we need to hook it up and hook it up in the our feature shell and so so if there's no parameters it'll be empty route path but it has to be a full path match otherwise we'll never get to this id one or we would have to reverse the order and we're going to load children lazy loading the two of heroes feature list dot then es module dot the feature module like so the same as before so now we're code splitting on the feature level lazy loading everything by default so that first time you click a link into this feature it'll be loaded and if you navigate to the other one the detail you'll get this chunk in a separate request is nx console broken hello brandon nice of you to to join no it's not nx console it's or maybe it is it's some extension in vs code i have the latest version of vs code and everything has been breaking all day uh today and maybe yesterday as well so it's the extension host crashing i i cannot figure out i tried to disable a few like the github co-pilot because i'm still on the waiting list and [Music] disabled style and because it seems to be throwing some errors but all the extensions are crashing so i don't know so no i'm not blaming nx console which i use a lot by the way no longer naming dot sfc um so there's the single file component i added that here here it is yeah sometimes i'm doing sfc for a single file component but then again component has a component uh well it also has a scam so i don't know trying to figure out what what works best um oh i should share my window for that yeah so yeah sometimes i'm doing that sfc for a single file component but why not just component might be just as good a good thing about having single file components is i don't really need this folder anymore so i could just move it up here i mean one more file could be added if i'm i'm adding a test suite which i should and we'll do that at some point um so yeah this is how i currently like to do things there's an upcoming rc for optional engine modules at least when it comes to declarable dependencies we'll have finally have proper standalone components and that will get rid of the need for scams but if we have broken our application into using scams it will be a much nicer experience creating standalone components because we have already taken into account the declarable dependencies which is what scams are all about and which is what standalone components will be all about so yeah looking forward to that but trying to manage expectations there's an rc then there will be a few weeks of comments and then who knows how long before we see that we see it in a version of angular i don't know maybe it'll be a year maybe less and then i'll be happy but been waiting for this this damn thing for i don't know three years at this point so i i don't have high expectations as to when it arrives uh i found some other things to be excited about and i wrote a book and it's being published within the next few days or a week at max right so it's called accelerating angular development with ib let's have a quick look if i can find it so there's a github repo open source and yes scam is a standalone component and module nice well standalone component and module doesn't make sense because the standalone component doesn't need the module that's the whole purpose so originally the abbreviation is single component angular module because it it's concerned with one component usually declaring it and and often exporting it as well and then importing at the declarable dependencies but with standalone component we don't need the modules for for components and linking declarable dependencies we'll be able to do something like state yeah i don't know what it's going to be called like dependencies or dabs or oh it was imports or something right yeah i saw i saw a design document somewhere i think it's going to be called imports and we'll be able to import other standalone components standalone pipes standalone directives and even modules will be able to import but that's funny as standalone component and module that's a nice uh acronym as well i like it and yeah this is the original uh term but it does it's also for directives it's also for pipes not just components but let's just call it all scam all right here is the repo for my new book i co-authored it with jacob and payson another dane it's called accelerating angular development with ivy it has this a nice green cover it's published unpacked it's available at amazon and a lot of bookstores i have a pinned tweet with tons of tweets about the book and the content where you can buy it things like that and when it will be available which is in a few days which i'm really excited about it's for experienced angular developers so uh if you're already familiar with angular this is a great book for you um it's not a how to write a component or a service and there are plenty of good books for that this one is you already know about all the concept like dependency injection and components and services and all of this so but what's the latest in ivy what other stable features that have been released since version 9 and up to covering up to version 12. and in this repo you'll see that we have here they are we have i think we have 12 or 13 different apps lots of them are feature apps so just a little code well actually this first one is is pretty there's some interesting stuff in there but otherwise it's something like here's how to do css custom properties with angular here's using css custom properties for internationalization here's using css custom properties for without angular just for scoping css rules things like that and then there's a real world app called angular academy and that's the second part of the book you'll be adding features uh with the things you learned in these four first chapters discovering new apis language syntax which is about a ton of angular iv features and three new language features in typescript that are also available with ivy the second one is boosting developer productivity through tooling configuration and convenience so we see a few examples here of which metadata properties are actually inheritable in iv because it changed between view engine and ivy and how is style bindings evaluated but there's also what's in this chapter other things this this is just where there's code available there's lots of inline code as well um third chapter is about css custom properties combining that with angular the new provider scope so both any provider scope and the platform provider scope they're discussed as as conceptually they're discussed and with examples you'll be using them in the second part to implement a feature or two features yourself yeah lots of fun stuff and here in the fourth chapter it's about the new angular components packages so the youtube player the google maps components the component harnesses and [Music] what else is in there the clipboard service and directive and a few other things second part is 50 pages of hands-on step-by-step instructions building features using what you learned third part is about developer tooling like the debugging apis and the angular compatibility compiler how to optimize that for speed understanding ahead of time compilation limitations and how to get around them using feature flags as a few examples here and what else like there's a chapter on migrating from view engine to ivy both what's the update process like in general which manual and automated migrations are there how do you review them which optional ones are there and how do you future proof your application for apis that are going to be deprecated or are already deprecated so staying on top of things and yeah just a lot of good stuff um it's the same price all around the world so um i wish there were separate prices for i don't know india asia africa but um the publisher decides it's pack publishing they own the book i just get royalties with jacob and but yeah i'm pretty happy with the result i hope you'll love it as well i learned a lot writing it um and and i i especially intentionally um chose topics that were well first of all stable features not experimental things and then also topics that are not documented very well or at all or in general just not covered very much or if at all in the community so 200 pages 12 chapters i hope you like it it's available for pre-order and it's going live in a few days so uh comments christopher just a reason to separate the list in detail okay let's let's discuss that next indirect store into its own library okay looking forward to the book yeah there's also the angular master podcast by derek there's a whole episode here number 13 where we spent half an hour discussing this book and then a few other things like technical writing and and working remote and things like that but mostly about the book and its content and structure and all that so go listen to that as well i can take the link here paste it in the youtube comments and you can listen to that when you feel like it good back to the app and you have a question here christopher is the reason to separate the list in detail into separate modules you would put them together in one feature especially if coupling with ngrx okay okay ngrx that's a data access concern so let's get a clean thing here going refactor move hero list component to row list feature right but we're starting with uh starting with uh here starting with you're asking about ngrx because we saw in both of these cases that now we have some some broken imports here we need a hero service and we need the hero the main entity so for that we're going to need two additional libraries a data access library for the service i don't think this tutorial is using ngrx but it's the same principle it's about state management and or maybe this is about http but it's the same it's kind of the same issue we need to solve so let's start by generating another library data access for the heroes domain and we just need one data access library for now i'm going to add some tags scope is heroes type this data access generating and the extensions crashed again what a wonderful day okay we got our library reload this thing again here's our new data access library heroes created access and this one doesn't need an angular module so getting rid of that and for now exporting just an empty module and then we'll commit generate heroes data x data access there we go so now let's go and find this hero service is here in our junk library feature page here it is and also the mock heroes are also used with that there's no actual backend in this tutorial moving them in here and then we're going to export from lib hero service so that the other libraries can import the hero service and we have one broken import remaining and we'll fix that after updating the imports from these components because now the hero service is in its own library data access library for this domain so to write import from two of heroes data access and it should be here there it is but that import is fixed let's also go to the detail component we have the same issue now that's solved so refactor move hero service to data access there we go and i'm just going to address this final issue here with the hero type um so for that we're going to be generating and i'll get back to your question uh christopher so this is going to be a domain library for the heroes domain and the main library is will have classes and interfaces and helpers for those methods maybe some would also call it maybe types or no inter interface says something i call them domain libraries and so tag scope is heroes type is domain and since we only have one domain library the full name will just be domain rather than main heroes for example oh so is it is it nx console breaking things i don't know i'm using it a lot so and it still seems to be running so i don't know what's causing all this okay so we got a domain library heroes domain and it doesn't need an angular module so we're doing an empty object export at first and then we're committing the generation of euros domain and now we can take from the junk library take this hero interface move it to the domain library and then export it from the public api hero so let's go and fix those imports importing from two of heroes heroes domain hero there it is and probably here as well and in list component and in the detail component there we go hopefully that's it all right move hero entity to domain all right so let's have a quick look here at um our libraries this one will be removed very soon once we finish the routing to preserve the existing routes then we'll have a shell library for this whole domain we'll have one data access library with the hero service we'll have one domain library with the hero entity and we'll have a detail feature and a list feature and you're asking christopher is there a reason to separate list and detail into separate modules you would put them together in one feature especially if coupling with ngrx the ngox part i'm solving it by moving the hero service which could just as easily be whatever in jericho and effects and all that or just component store a hero store but moving that into a separate library here a data access library so that it can be accessed from all the features in this domain that are going to need it um and i really don't want ngrx to influence how i split libraries because that's man ng modules and tying all that together with inject store and effects that's a real pain in a large repo so is the reason to separate the list in detail into separate modules or separate feature libraries yes i mean right now obviously it's just one component a simple one in each of them but we're imagining here that this is a okay the lighting now i'm losing the light as well so now it's really dark just a sec let me try to turn it on again nope i have a like the light in the ceiling just broke it's an old one um yeah so i have um like a standing light but it's controlled through an app and my phone is not here it's two levels up in this house so i don't want to wake up the family just for that so now it's going to be nx after dark in the dark okay so why are there separate modules okay well i thought you were asking about why are there in different separate features and the answer to that is because in real application they would be more than one component there will be more than one route in each of them so um i like to i find that to be a a good way of splitting features in libraries each section of the app is one feature library so right now it looks crazy because there's just one component but having those logical groups of this is one area of this page whatever you call a domain so that's a separate feature library it's good for logical grouping it's good for bundle size when we're lazy loading these separate features so and but you're also asking i thought you were asking about separate libraries but you are actually asking about separate modules all right well first of all there's this point that i like to have a scam a single component angular module which just deals with declarable dependencies so one component one module with declarable dependencies a single component angular module a scam that is this one and then there's the feature module which is the entry point to this whole library so this is the only thing that is exported publicly in the public api of this library so it's the it's the target of the lazy route in the feature shell and the concern the responsibility of this module is registering the routes for for this feature and there is just one right now in a real lab there would be more usually so yeah that that's why because i'm i'm building it like a real full feature app and not i'm imagining it's not a simple app as this tutorial is i'm i'm trying to show how i structure larger applications with nx but yeah it's it's always a balance of not splitting too granular but also not having two large projects because one of the the benefits of of nx is that we can split it into all these projects and then we get things like caching if we have incremental builds we'll get caching we'll get incremental builds but even when we just have testing and linting we will get a performance boost in our tool chain because we can cache the result of each video project and when we're using the effect nx affected command which i'm using a lot in in my ci and cd workflows yeah and other good things like that also yeah also the architectural boundaries right so we can say a shell library can only import feature libraries a feature library can only import ui and data access and utility libraries things like that which is what this the tags are for we still need to set up the workspace lint rules for so that we can use nx to say hey you're a feature library you cannot import i don't know maybe you can't import another feature library or or maybe especially something like the ui libraries cannot import a data access library data access library cannot import ui or feature libraries things like that that's something we need to set up with our workspace lend rules later on all right so that that was my explanation of course you can do whatever you like um i'm i'm using the nx conventions with these library types and i'm trying to find the balance that i see as a nice fit for many [Music] applications so let's bring back the screen here now we have all these libraries uh so and it's very similar to the crisis center right so what is left now in this junk library the page feature one turns out that it's all about the routing at this point and this is where usually or many times you will have just one prefix but here we have both heroes we have hero superheroes and superhero i don't know would probably have been easier if it was just hero or heroes right or superheroes or superhero but just one of them instead of four different ones so now we have an issue that we need to address because we want it to be lazy loaded all this but we want to we want we need these route definitions to be inside of our shell module actually so let's see how we could do that let's let's move them out from here and into our shell library so somehow these need to go down here for example here's the detail component that needs to have hero id and data animation hero as well yeah this data thing i think i want that inside of the feature library actually it belongs to that so let's see if we can make that work um oh it was which one was it superhero id is the detail component so we want this this thingy inside of the the detail module yeah and i think i think this will actually work it will even have the id parameter passed here even though it's not even listed inside of here i mean we could also do like so that might also work let's see yeah so that was one route now except of course we need superhero needs to be at the top level of the application route as well so this is an interesting issue let's go up to the app to the routing module um here right let's create a new route and we say path superhero id or no just let's just say superhero one of the path prefixes we need the same thing as we had down here we need to lazy load the feature shell of the heroes domain now we can remove this one that's the first one down let's let's be happy with that for now and this yeah this one is is actually ready to be deleted but first let's um move hero detail round to hero shell and the tail just just like so move here or detail around all right and let's actually remove this whole um it's called the feature page heroes or junk library we can finally delete that okay it's saying that the app project is still depending on it so let's see where that is where is it all right it was because it was not it was eagerly loaded before so let's get rid of that now hopefully we can delete it nice very good remove hero page feature nice that was the junk module where we stuffed everything in until we figured out how to split it into separate libraries so a few routes left to take care of here uh yeah let's take this one the redirect hmm i wonder if that worked if i did like so let's try that so to support also this hero route path to go back to our app routing module and now we need another one but with the hero prefix but we need to load the same module lazily so we could just copy paste or we could make it dry so load um heroes shell look heroes feature shell now that's in a separate function and we'll refer to that in these two rounds hopefully that will work hopefully angela the angular compiler is smart enough to do this i believe it is we'll see once we get it all figured out if it actually works all right so now we have i'm going to commit this support hero path hopefully uh we have two left they're referring to this hero list component so when we have a path of superheroes you want the hero list component but that is now from a lazy loaded feature so it'll be low children lazy import proof heroes list feature then the es module mapping to the feature list module and then we have this animation data that i'm going to try to move into this hero feature list module like so and then final thing is also supporting this redirect so and now we need to support these two route paths in our app routing module so heroes and superheroes heroes superheroes lobes to heroes feature shell nice support hero list routes and if i if it's my lucky day with code it will work let's see i have no idea uh but basically now everything's refactored into these five different libraries and well let's let's see let's start by building what is angular workspace dev dependency oh now what workspace oh i'll definitely delete this one and dependencies there we go all right waiting for the angular compatibility compiler and let's try to build the app production build see if there's compilation errors there we go you can see all of our lazy chunks as well very small ones nice the initial bundle is kilobytes and that's in development mode all right no compilation errors so let's try to serve it there we go okay moment of truth do the routes work no hero and then id says page not found and why is that no idea what this is all right something didn't work as planned um let's try heroes that route is working let's try super heroes those are working so hero is not the hero detail what about superhero no that's not working either okay let's look into those oh is the redirect working hero redirects to superhero does that work no that doesn't seem to work but like so hmm [Music] where did you go at there you are might need to restart in case the path prefix of hero should load the heroes feature shell same for superhero heroes superheroes but i mean oh oh so here is this this should be what list should be heroes and superheroes this one shouldn't be here anymore your posture routes working properly heroes superheroes they seem to be working before let's check again yeah so now when we enter heroes in the url we are hmm this there's some error message here from what from my development server so i don't know most of the things seem to be working except now this one isn't that's interesting superheroes no children [Music] make it full full match i had it working and i broke it one route oh oh so maybe it was this default route here one was that the one that made something work that's interesting i guess so hmm that says the hero is full one is working and it's not working all right all right so this is a strange use case how do we fix this [Music] trying random things right now that didn't work hmm yes maybe this is good enough right so hmm let's try this hmm okay okay so i wonder if this works ah it's gonna be first and maybe nope what if that's the only route what will happen does it even work nope yeah this is really inconvenient hmm i really don't know how i'm going to solve this what a tricky angular problem nope hmm if it says heroes was that a superhero i don't know nope nothing's working all right all right that's really annoying i don't know what to do about this actually this is really strange i mean does it have to what about this um inheritance strategy always that help anything by chance please it's it's directing to the list component it's not routing to the detail component still sorry click the wrong button all right uh id so what now nope and if we go to this app routing module restart i need luck now come on routes nope it's just not working man hero hero [Music] nope i have no idea how to solve this mess no idea i mean i could enable this debug or tracing thing but i don't think it would tell me anything useful really app component oh yeah okay superhero no it was unable to match superhero hmm this is this is really annoying i'm open to ideas how do we solve this mess without i mean we have to support the existing routes all right one idea is routing directly here to features detail one and the other one will up to the list and every one except me will be happy right come on angela it's time to behave your list oh man i didn't realize i had this id proper parameter here all the time maybe that's that could solve something i don't know let's see what all right i feel really stupid oh okay well that was half an hour of agony for man i had the id parameter here i mean i'd like to have the id parameter here but then it was actually defined in two places because it's the only thing setting apart the detail route from the list route strange but it was me messing up of course of course it was what can i do like this then i'll be perfectly happy we start just to check superhero 11 and hero 11. heroes superheroes okay all the routing all the rounds are working as expected right now so commit that i have one more thing that i'd like to try and it's doing a full of full for this one and everything else will go here and i will move this id parameter to where i originally wanted it that also worked let's make sure let's rebuild everything all right wow so yeah move round parameter to a detail feature whoa finally after all that just walking through mistakes but it was complicated because now we have this app routing module we have four different route paths or prefixes heroes will redirect to superheroes superheroes will lazy load the heroes feature shell and hero will redirect to superhero superhero also lazy load the heroes feature shell the heroes feature shell has two routes if there are no parameters it will direct to the it will lazy load the list if there are if there's uh well basically this matches everything else so even though there's not a parameter listed here everything else will go in here and it will become an id parameter which is loaded into our detail component here good so that was all the complicated routing and library wise we have data access library with the hero service a domain library with the hero entity a detail feature a list feature and a shell feature let's have a look at that man not again pressing extensions let's have a look at that dependency graph see how that looks looks like so and if we go to the heroes here it is this is what it looks like the hero service depends on the shared data access for messages the list feature depends on the data access which also the detail feature does they all depend on the hero's domain class the app only depends on the feature shell which depends on each of these routed features so this is typically how i do with nx workspaces and we can see that this is the whole workspace with all the features and yeah interesting enough there are no dependencies between crisis center and heroes but of course there are some shared dependencies down here and some data access libraries for navigation for messages for security ui for navigation ui for dialogues and then we have these two admin and off domains that we they're also just in basically junk libraries with everything that was original inside of this app which is now a really small project having dependencies to all these uh features yeah but this is typical of something what i would do in in an x workspace of course not this one is really simple but in real apps it will look something like this very good thank you for hanging in there thank you very to everyone who visited that was way more than i wanted to do but we succeeded in the end and uh yeah i knew it was going to be a little complicated to get those four different routes to work but we did the light broke the extensions broke all the time but he finished so that's it for today keep learning and i'll see you some other time

Channel: Lars Gyrup Brink Nielsen

Views: 102

Keywords: angular, nx

Id: 4p7QAqKVbn4

Length: 98min 45sec (5925 seconds)

Published: Thu Sep 30 2021