Nx After Dark: Extracting features into workspace libraries

hey welcome to nx after dark it's still daytime in denmark but my family is sick so i'm spending time now rather than in the evening what i isn't what i normally do for public uh tech contributions so i just had um i just filled them up with cold water got something for myself as well very nice and i hope you're all doing all right as well going to be continuing this project here it is started it's known github and we took two of heroes tutorial the router tutorial because it has the most features i think from angular io and we converted it in the previous episode to an nx workspace as we can see here the nx json file we were following this migration guide from angular cli first one is the automatic one but there's actually a manual one as well if you have more than one project in your angular workspace which is right here and i think that's kind of saying create a new one new workspace with the create nx workspace command and then moving over you're copying over all your files let's see updating your unit test configuration okay so it's still using the same angular builders hmm we deleted protractor we're using karma for now linting yeah we removed the ts lens as well okay and you might be wondering what now what can we do now that we have nx well several things and uh what we will be focusing on right now is taking this application with all these features and splitting them into workspace libraries and there are several conventional types of libraries and we can um you can even create our own types of libraries and they will sort of be the architectural boundaries in our application and other projects and well the first thing is how do you split it up well we could start by saying what's the different it's called pages or areas of the applications or domains whatever so there's crisis center there's heroes there's an admin if you log in there's an admin uh that didn't work well oh probably not probably don't have it running yeah that was the cause so this is our app right it's the only project we have right now in this workspace is a very classical angular cli style application so now it's running so let's check to refresh here so we can see that now we're logging in so there's a few this is the admin page or whatever we want to call it so crisis heroes admin login there's a contact as well seems like it's an auxiliary route yeah it is it's here in the pop-up router outlet there's the compose route and even inside of here there's like several parts of this page whatever i want to call it so let's start with let's say the heroes we want to split that out from the app and inside of this app we see that it's already it's split by folders here so there's kind of a just a contact there's admin probably some route guards routing things the login is here or the login crisis center so heroes is what we're interested in splitting out into a separate library a workspace library so this is where the first thing from nx is going to help us if we're using here the nx console extension for vs code using the generate command so here we have all these schematics the angular ones or they're called generators in nx so let's look for the library there's the angular schematic the library schematic will produce a kind of an npm package library which you can use in your application projects but it's really for building yeah for building a library we're interested in just logical splitting of our code there's also other options like incremental build and so on but for now it's just a workspace library for kind of keeping a part of our application in a separate space of our workspace so we're going to have this we're using the now old nx angular library generator and here's the different options so it's going to be called heroes well that would be our first thought here under some that is strange anyways um this is where in if we're following the conventions of nx we should have a type prefix here heroes and what's the type of this library first let's extract this feature library and we could even call it the heroes page yeah let's do that actually and then we could use a grouping folder and i think we might just do that actually because we'll have more than one library per page uh eventually maybe not right now but soon so i actually have a grouping folder called heroes and since everything inside of that folder is heroes i can remove it from here and just called the feature library of the page the heroes page i don't want to create a buildable library and that's if we want to use incremental build or it should be buildable and publishable if we want to ship it to npm or some some other package registry but this is just going to be a workspace library uh it will add linting with eslint or no no linting hmm do we want to add that yeah maybe no but right now actually so is there prefix to the components and so on let's see if there's some already the prefix is app so that should be the default for the workspace maybe so let's go with none and we don't want it to be publishable because we don't want to ship it as a separate package to a package registry or for i don't know microfrontends or whatever we don't want routing for now we're going to add that ourself all these other options oh oh so this is something new in annex nx version 12 something standalone config so we can have a project json file rather than having an entry in workspace json interesting interesting now i don't want to do that right now something interesting to look into for sure okay so this is where we're going to have tags and this is where we can add tags to our our projects and you can use whatever there are some conventional ones for example scope this is heroes in our case because we're in side of the heroes grouping folder and we can have a type it's a feature library so it's the type of feature and we could add whatever let's say platform web or something but these are the two definitely the two conventional ones and what these are used for are the workspace linting rules for enforcing architectural boundaries through the workspace linting we don't have linting right now but let's keep let's at least give it some thought here and we can use these tags later unit test runner right now we're actually using karma so let's keep using that for now well there weren't any tests so maybe just this better okay so it's interesting this era here and down here we see our nx console extension doing dry runs every time i add something to these parameters and here are all the parameters so i can actually click this button to get the copy to clipboard going into my terminal here shutting down this mg serve so let's paste this the next generate normal angular library the name is feature page that's the library name it's in the heroes directory no linter tags are scope heroes and type feature the unit test runner is karma so this definitely looks correct so let's see if there is actually an issue going to close down this dry run and run it ourselves cannot find projects libs heroes feature base okay so why is it trying to look for projects that's the default in an angular cli workspace but with nx we have two main folders instead that app that is abs and lips okay so i think we need actually a configuration here in the nx json file and maybe there's also something in the workspace.json file which was previously angularjson projects is there yeah here it is new project root projects okay so trying to remember what this looks like in in like a new nx workspace i'm going to look it up i have ton of projects so let's find an nx one yes i trust the offers which is myself yeah okay so the angle adjacent here does it have this what was it called new project root no this is a workspace generated using create nx workspace doesn't have this okay what about in nx json there might be no okay then i guess it's just using the default um so it's expecting abs and lips but you can configure that to use other names other root folders this taskrunner one i definitely want that as well if it's not already in my project after migrating i'm going to steal that config yeah that's not in here so i need that that will make that will add computation caching actually local computation caching there's also one using nx cloud so this will speed up my my commands if the source code hasn't changed and then i'll delete this setting new project root add computation caching and here remove angular cli setting this is messing with the generators i think that is the thing let's try to change something here then i should do a dry run and again let's see if it succeeds yeah looking better so i can copy this command or i can press run if i copy it i can go in and inspect it here and see if everything is still like i prefer or if i would like to change something but this is indeed what i would like and i have a clear git status right now so if i'm running this should be able to inspect the changes they're also listed here we're updating two three files here and we're creating this new library and all the changes are listed over here right okay let's inspect the changes in the nx json file now we have another project here the heroes feature page with these tags scope of heroes that's our grouping folder our domain or page whatever we like to call it bounded context and it's a library of the type features it's a feature library which is why we have this prefix in its name so scope type name we could have called it heroes page but it's already in the heroes scope and grouping folder so the page feature should be the top level page okay that was the nx let's look at package.json if anything changed in here oh okay so it's also running ngcc after every install okay and what else oh it's adding normal angular package no it's just reorganizing them apparently sorting them in here same thing why is it specifically or explicitly adding the angular language service that shouldn't be shouldn't be necessary oh whatever maybe it is in nx i don't think so but let's just leave this managing the packages let's leave that to nx for now okay i'm happy with that next change yeah so here it's adding the path mapping to our root typescript configuration so now it's adding this we can use this import path from our application which we're going to do exactly that in a minute so if we use at two of heroes for slash the the scope which is heroes also the name of the grouping folder and then this feature page library if we import that from our application we will actually be importing from libs heroes feature page source index t as the barrel file and let's look at what's inside of there so this is the generated things it's exporting from lib heroes feature page module there you go this is an angular module but nothing in it except for this common module import which i actually prefer just to start with nothing and so this will be the only thing we really need to export from this library for now so this is what we'll be able to import from the application and we'll do that we'll connect them shortly in our workspace json file we now have a have another project the heroes feature page project it's a library project this is the root folder but there's also a source root so any change inside of this folder will be detected by nx which will invalidate the computation cache the prefix of this no that shouldn't be true of heroes should just be app because we have existing components we don't want to rename them right now prefix should really i mean this will affect this the schematics or the generators but we should also be able to set a a default in the workspace [Music] uh yeah let's let's i'm going to delete it i think that should be possible okay we will have a test target using the executor of angular dev kit built angular with karma karma [Music] builder main ts config karma config okay so there's one for the project there's also a ts config for the test in this project and there's a main test file used by karma for this project yeah what else what's this change oh for the generators i'm going to move this up higher up because as well projects is where most changes will will be so i prefer to having the other options higher up yeah so let's actually move these also so the projects will be in the bottom default cli default content collection generators printer non-unit test runner karma and that sounding good component prefix app and we could look at oh there's actually this is strange because there is no normal angular component however there is a schematics angular component you could look up these parameter names and set the defaults for them by like doing it this way right angular component has all these and there is a like which yeah this one should be good to add as well in my opinion the display block true so we can set our defaults here just like we're used to with angular cli except it shouldn't be called generators now it should be called or sorry it should be called generators not instead of schematics but the configuration is is the same yeah other changes there's some package changes picked up by yarn karma this is the project file so that is right here it is extending the karma config file in the root of our workspace so it's only changing the project specific settings it's kind of inheriting or extending reusing all the other settings that are inside of here maybe maybe yeah it's a function yeah okay it's a function that returns this default um settings that we have here yeah so it's getting the shared settings and it's extending it here they are spread out in this object and then adding for the istanbul code coverage recorder also reusing from the base config there's common settings these ones so i guess it's changing the directory setting yeah this is it okay that looks good as well and then every project is generated with a readme file and so let's delete all of this and say this is the heroes heroes page feature but yeah it's just the heroes page and now there are three typescript configurations here there's the base one for this project it's extending the one in the root called ts config base json so this one it's getting all the settings from there but merging it with these ones and this is where we see this solution style type configuration because it's referencing these two other configurations one for the code inside of this library which includes everything except for the test main file and the spec test suites and one for the tests which is including the main test file for karma and every spec test suite file and all the typescript definition files and it's adding the typescript types for jasmine and for node.js because this is running on karma so this is extending this config which is extending the root config and then it's adding these options right here that could be a little different from what we're seeing for the tests based on our test runner yeah so we're happy with those as well and now we have the barrel file the index ts file we already saw that that is everything that's exported here will be visible when for example the application is importing from this path name this import path so importing that will give access to everything that's exported here in this barrel file the index ts file so if we want to mix other files accessible from within this library we have we'll have to export them here in this file um because deep imports or importing other files that are inside of this library folder nx will actually prevent that through linting rules so this is the public api of this library this is listing everything you're supposed to import from outside of this library the main test file this is for jasmine it's setting up the angular testbed nothing special here for nx and now this heroes feature page module which is just an empty angular module for now very good so generate heroes page here we go very good let's just verify that we can still build our app and wait for a minute could take care of that browser's list thingy yeah copy this file or here from add project i think you might also have it in the root or is it just for the app anyways let's put it in here we're supporting the most recent version of chrome firefox two major revisions of edge the two latest version of safari and for mac os and for ios and the enterprise version of firefox and not internet explorer okay so let's try this again and see if we're getting still this deprecation message yeah so i just wanted to make you familiar with the structure of of a library like this one and workspace library okay now the that deprecation message is gone so configure answer support to affect the bundle of this application yeah so now we're familiar with the whatever we find inside of here um in this workspace library we have a karma configuration we have typescript convert the readme file and the source code which has this barrel file for the exports of this library this is the public api we have the main test file for karma in this project if you notice now we can run the tests for should be for this project as well okay let's check projects here it is it has a testing target yes so why is nx not picking that up linux console run i guess it's not updated did i break something by moving these things around i don't hope so i don't hope so test test test executor is this one working yeah this one is working so why is the page libraries test target not working is it missing some options main doesn't need polyfills ts config karma config assets doesn't need assets for library styles doesn't need styles doesn't need scripts so what's the problem here hmm sometimes you need to reload visual studio code if you have strange errors yeah now it's picking up both projects so let's try test heroes feature page and this is similar to the generators we can configure all the options here and we can choose to run or we can just copy the command and run it down here failed why is it failing though cannot find module karma coverage eastonville reporter so maybe that's not even installed let's see if it's in our package.json file it's not so that might be it yarn add a dev dependency of istanbul reporter oh thankless compatibility compiler every time oh it's even doing umd as well it's incredibly extra annoying right now but i think it's actually this this post install hooked by nx this um there is a setting here what is it called like it has this special name where it will only compile the first format out of these so it will look for each package does it support es2015 if yes compile this one only if no go through all the other ones here yeah but i don't remember the exact name could look it up let's try that cli think uh where's the ngcc uh is it an angular compiler or compiler cli yeah here it is main ibmgcc index i'm getting a little sidetracked right now i've found this before um i don't remember the specific file right now here options could be it oh these are those are not the names these are the options but they have different names when using ngcc through the the command line oh yeah i wrote about this in my my book that's scheduled for release and or publishing in a few weeks it's called accelerating angular development with ib so the option name is actually inside of there so i'll have to go back and look at my my own book for figuring this out there's also some options for optimizing ngcc so that you waste as little time as possible both locally and in the ci okay so anyways let's try this test command now for our library see if we can make it um work because this is the only target so the only command we can run for this library right now is test we didn't add linting it's not a buildable library so there's no build target okay so now it's running it's failing but only because it has zero tests and carman is not happy about zero tests so everything's good um add istangul great so that took 36 minutes mostly because i wanted to explain to you about the structure of a workspace library like like this one or any of the other types these are kind of the shared things you'll see when we're generating you you noticed right that there's only a single uh library generator for nx so the things about what's in the different types and so on um that's something we'll we'll have to add ourselves or create some custom generators for that or something for now we have our workspace library it's a feature library or page library so now we can start moving things out of the application project one thing to try to do in an angular or sorry nx workspace is making the application projects as tiny as possible and you can make it extremely tidy i have an article called tiny nx projects or something like that and which goes into detail about everything you can extract out of even the most simple application project now this is what we want to move out so i should be able to take as a starting point i'll take everything from here the heroes folder move it down to our new library folder in the libs like so and delete this heroes folder from the app and then we should identify which imports are broken so maybe we'll oh let's stage these changes here yeah it's renaming so that's nice for to get history move heroes um h into feature or page library of heroes as stuff and now heroes feature in the page library okay so let's try to identify the broken imports so i'll do a global search for heroes something okay this is the first thing in our app module now this import is broken but now we don't want to import the heroes module we want to import this where is it this heroes feature page module but maybe this should contain what's currently in the heroes module yeah looks like so yeah so um we'll take everything that we have here and copy it over here i'm keeping this name because this is the conventional nx name so i'm sticking with that um and making everything work again so now i'm hitting i'm on window so i'm hitting ctrl and then the dot the period so that i can import from angle comment i think i have extensions for this this ai is not artificial intelligence it's uh one of these extensions here what's the name of that automatic import yeah auto importer that's a pretty good one yeah so we could even do the control period and then do add all missing imports and then inspect them yeah that looks correct good so now i'll delete this heroes module and make this one is exported right from index ts so i should be able to import that i'm going to delete this old import and replace this with importing the heroes feature page module but this one is not good this one is not good so in this case i think i have to restart the cs server and running some stuff down here initializing the jsts language feature now i might get lucky no still not okay then i'll go into well i could go into ts config base json and find the name here or i could start doing like so import from tour of heroes hmm why is it not picking up on that should be able to do this and it's a little strange and unexpected i wonder what's broken i should be able to import this let's try to add it visit one of these reload vs code again thingies maybe let's try takes a minute no it's still very unhappy that is strange what if i do nx build oh oh oh oh okay so this project oh it is extending from let's see two levels up which is conflict based json yeah so it is extending from this file so it should have this import path should have access to that build target fail oh so it is actually going into this feature page so maybe it's because we have some issues inside of this library so we could um yeah we need to start figuring that out for example this message service that looks like it's a shared service and now we're going to have to extract that into a library because our libraries must not ever import from an application project so we have to think about our architecture now um yeah so yeah we're going to have to start fixing these um import errors let's see this one the hero detail component it's looking for the hero service yeah that's available hero also available what about the hero list component it's using hero hero service those are available that's a good start so this should be good the hero service yeah here we have an issue here we're looking to use this message service and the message service is probably used in multiple places or is it yeah it's used in the hero service and the crisis service and the crisis center is a different page in our application so they're going to have to share this service so we'll have to extract or generate a new library for this the messages for now so that we can access it from our library because this library cannot impart from the application project that would be a circular dependency and go against our architectural principles okay is there anything else we need to fix components are imported here and this one we have the component and list component detail component the routing module okay yeah okay so this is what we need to fix probably for now um what is a good commit message here um update import from import path yeah okay now we need to generate another our second workspace library and it's again being it's going to be library a workspace library and this would be messages and so remember we need here like the type prefix library type so what is the type of this one it's not a feature because feature is about features in the ui and this is not about components and or anything like that this is about the service and usually services belong either in util library if they're kind of stateless and but for something like this this is about yeah let's let's have a look at this message service to determine what it is this is definitely a state full service it's maintaining this state of messages that we can add by pushing into this array really ugly and clearing it by creating an empty array and storing that in the property so this is very stateful it's about application state it's not something that's stored in the server so it's a session state but still about state application state so i would put this in a data access library and what's the grouping folder for that let's put it in a shared folder because it's shared between features in our application these options we don't need the import path is automatically generated uh no linter what else yeah the tags so okay the scope is shared the type is beta access and let's what did we do yeah we added karma let's keep using karma for now okay so the dry run here is telling us this can be done and it'll create a shared folder with data access messages folder with the library and all these things inside of it and this is what we want so we could do the copy command or this time let's try running from here there we go and now see now we have three projects in our workspace and here in nx console we can see the different targets of our projects even with different configurations and we can run them from here or we can go to where that configuration or target is defined in our workspace config so helpful stuff here from the nx console which by the way is also it also works with angular cli without nx and here is the commands that are added by nx these commands do not work with only angular cli so something we can look into later because it's uh useful whenever we have multiple projects which is exactly what we're doing right now okay so it's a yeah we generated the library these are the files let's go inspect this new library in the shared folder the data access library for messages so the my file let's call that messages arena access that's fine oh open that so uh well we could yeah just generate messages data access library and we don't need a module but what do we need we need to extract this messages service message service so cop cut this and paste it down here we don't need a module for this because the provider is here it's a three-shakeable provider with the scope of the root module of this application so we can remove this module we don't need it and instead in our public api file barrel file this index ts we can export all symbols from lib message service so this class is exported from this file or this javascript module and we're re-exporting it here re-exporting in this barrel file which is the public api of this library so now we should be able to import this class from other projects um going to restart the ts server because that's something we i find we often have to do after nx updates these path mappings so we should be able to have this import path available now so in every well okay let's do refactor move message service so let's do a global search for import message service oh we already had that okay our hero service which had the issue see if we can do a fix no it's not smart enough right now so can we do it this way now tour of heroes yeah here we go and then auto complete control space there we go now we're able to import it and then we can inject it in the hero service and let's do the same in the crisis service which is also referring to this here we are um inside of the application project yes this is a bit strange i think it has to do with um with some of the um the typescript configurations of this project they weren't migrated to [Music] what's preferred with nx so we're going to have to compare that to that other project and i had generated for another purpose but let's see if actually you can build the application now waiting game so it worked but visual studio code is not happy so effector update imports there we go so to make uh vs code happy so that we don't get these uh whereas the crisis where's the crisis service it's here we don't like this error so there's something wrong with the typescript configurations so let's compare what we have here to this project that was actually this workspace that was actually generated with nx yeah so we see it has more configurations right so these two are not in our workspace so let's add them for starters going to paste them here ces config basin base json yeah that's working that path and here is this solution style type configuration where it's listing three different other configurations app spec and editor and the editor one is what's probably needed to to not mess this thing up and when we're going to maybe we should restart the service um the typescript service or server whatever um but let's also compare the other two configurations that we already had let's um open these up and compare them to what we had in the other workspace which was a real nx workspace from the from scratch let's try to compare them so spec this is ours this is the one generated from scratch with nx but it's using jest um karma we instead of this test setup file we have a main file just called test and we're importing the polyfills as well because karma is running in a browser or just is running in in node.js directly okay yeah okay here we need to change something so here we're ex we're extending the ts config file in this project directory we should do the same in our file everything else is similar but um a little different slight difference between chest which is using common js and node and jasmine and karma running in the browser so it's has to have these polyfills okay and the app config for this project let's compare those wow what is this what i have no idea that is strange but whatever okay again we need to extend this solution style configuration this and that might be it yeah yeah okay did that change this let's try to restart the ts server it's updating down here initializing and yeah now we don't have this issue and we could i think we can control click yeah to go into this parallel nice yeah so this was something that was not in that was this should have been done by the nx migration this is what's known as the solution style type configuration but there's one per project rather than one for the whole workspace and that is because nx allows us to run commands on a project by project basis sorry so this configuration is kind of importing the other three configurations but each one of those is this one is including the main file and everything referred imported from the main file and so on but it's a clue excluding all the test files and spec files and all of this the spec file is only including this this is the testing configuration for karma it's only including the spec files and the type definitions and finally the editor file it is this is for visual studio code it is allows us to allows it to be aware of this sorry for example this import here so visual studio code will work for all files whether it's actual components and services or whether it's testing files which and inspect yes right good yeah so um my great typescript configurations [Music] use solution style operation yeah better good very good pushing these changes to get up and now just spend an hour doing that and discussing all these things and working our way through the different problems and extracting this logic so now we have three projects and to see kind of the dependencies between them let's have a look at the nx commands that that are added now the dependency graph let's look at that it looks like so if we select everything [Music] we can see that now we have three projects our app project which has no tags our page feature library which is has the scope of heroes type of feature that depends on the shared data access library for messages but we can also see that there's a dependency between the app project and the data shared data access library that's because that crisis center service is still here in the application project so if we leave out this one by excluding you can see this dependency between the app project and the data access library here if we have everything we can kind of start to see the layers of our application visually and we can get get some more benefits like we can add workspace linting rules we can test on the project basis we can do um affected tests so that we run tests or linting or whatever for only the projects that are affected by changes in our current branch which is really nice when you have a big big project and we get computation caching so if nothing has changed in say this library inside of our branch or sorry since last time it was run i will get and like an immediate result back let's see if we can do actually do that um so let's say nx test and then well let's use this nice nx console test and then heroes feature page oh there is no tests right bang also it's using karma in the browser okay so it was actually running what if we do it again see if we have computation caching now no it doesn't look like it that's a little strange considering i would expect it to work because i have it in my nx json file here task runner options default now workspace task runner so cachable operation it should be cached now what about build an x build should default to this app project built for production yeah this is a little strange why is nx not caching this that's like that's the whole purpose of this runner um yeah because here we see the result of running that so when i run this command again it should oh here it was working right nx read the output from cache instead of running the command for one out of one tasks yeah so immediate feedback it's saying oh you changed nothing so here we go this is what's output to the console and is also caching the actual build files um the build output which is here in the disk folder or rather it's here apps two of heroes apps yeah framing let's delete this and then try to run build again and see if the files are also cached yeah did you notice that how quick that went whereas if we're skipping the nx cache let's delete this folder again and then do nx build but skip the nx cache it should start again even though it was already cached or kind of forcing it to rebuild the files and the output that we're seeing in the terminal which takes a good minute oh 16 seconds small application right ah yeah so running that again now should also now that's the new cache right in seconds it's saying right but still takes just a few milliseconds nice so now we have cached uh build outputs i think this is actually something that is being proposed or worked on for angular cli something like this something similar which would be great for people not using nx another thing that this can be helpful for is instead of having this default runner which is that the local one there's also an nx cloud runner where we can share these outputs both the terminal output and also the files that i put in inside of this list folder they can be shared um through uh through nx cloud or through you can also have a private on-premise nx cloud server so when i do the nx build here when my colleague opens up the project tomorrow and runs nx build he will get it immediately from the cloud rather than having to wait 16 seconds in this case and in our ci server our whatever github actions or azure devops or whatever we're using gitlab or jenkins or whatever they can also benefit from having this cache if we're using nx cloud as our task runner for nx but even here locally we can also get some benefit from it yeah that was a few different things let's see what we did so we extracted first this heroes page and we put just everything inside of here from that was previously in the heroes folder in the app so now we don't have the heroes folder up here anymore and um yeah some of the things might not belong here we didn't really consider that but that's something we can consider in the future because there's the concept of what belongs in the feature library what belongs in the data access library that we also have now what belongs in a ui library a utility library a testing library domain library type library or whatever you need so something like this for example the hero service that should be in a data access library it's about application state and not local not local stage well maybe local to this page right but still shared between components and might even be like it might be used in another part of the application i think it's only used here in the heroes page but across different components so this is something we might choose to extract into a data access library something we can consider at some point okay and to do this to extract this library we needed to extract or create this data access library for messages so that we can put in the message service here because this is reused between um both the hero service and the crisis service and remember we saw that a nice little dependency graph where we now have a visualization of the dependencies between our projects we have the square one which is an application and we have a feature library and we can even focus in on that which highlights it and all the projects that are related through dependencies which is everything right now right but um if we unfocus and do this one instead focus on that oh well it's the same yeah they're they're kind of all related right now yeah okay group by folder that's also a nice one so here we can see our grouping folders we have shared folder and the heroes folder which corresponds to exactly what we're seeing inside of the libs folder here shared and heroes these are called grouping folders so they contain other grouping folders or library or sorry projects right you can also have grouping folders and apps if we have a lot of apps application projects or end-to-end projects up here okay uh yeah this is an hour and 12 minutes let's see if i just have to see if i have to go to my family not right now but very soon so let's do one last thing let's extract that crisis center into a feature library because it has a lot of stuff and it also depended on that message so let's see if we can do that pretty fast um in the same way we did the page for heroes right let's take that challenge right now see if we can do it in five minutes generate library it should be called feature page it should be in the crisis center grouping folder and we need some [Music] tags scope as a center type feature karma sure running this generator there we go it's done let's go to read my file we'll say this is the crisis center page everything else should be good generate presses center page library and now let's take everything from inside of here this crisis center folder feature folder move it down here to crisis center feature page lib um yeah everything is renamed indicate history that's good so we retain the history of each file and now we have this this is the old module will take all its imports and declarations inside of this new feature module which is has a conventional name in nx so the scope the type and the name of the library this corresponds to crisis center feature page and then module that's how this this name is generated by nx okay now we just have some amazing imports so see if we can add all missing imports yeah this looks good so there's one here that might have a broken import or something but we should be able to delete this module now and we're going to need to import this one from our app module where's the crisis center is it then do we have an app routing module yeah oh what did i do app routing module presses center okay yeah so this has to be updated and we should have this module instead this feature module so now let's see if we can do sure of heroes no it hasn't detected it yet so i need to restart the typescript server the language server and after that is done now i should be able to say add tour of heroes crisis center feature page and should be able to detect this feature page mod good very nice very nice yeah so refactor update lazy import and now let's look into this component there's something wrong okay so it's relying on a dialogue service yeah so now we have to figure out that dialogue service dialog service who is using that only actually only the crisis detail um component but it's kind of outside of it's in this shared application root folder so i guess it's supposed to be a shared service right uh but it has to do with like a confirmation is it not used in tests oh it's because we don't have tests yeah so we could choose to add this only to this um crisis center feature but this is i mean that could be a good first step and then only extract it to a shared library when we need it but we're looking a bit more ahead here and saying this is a reusable service and it has to do with presentation it's a dialogue a user dialogue behind the scenes it's using window dot confirm which this is really bad code um but anyways yeah there's also to do here about that anyways uh this is about presentation so this could this is something that could fit nicely into a ui library so uh i think the five minutes are about up but let's do another five and and fix this issue um now generating a ui uh logs library and it's going to be the shared folder grouping folder i'm going to have a tags here text scope is shared type is ui i'm going to generate that good picking this dialogue service and well first let's see if everything is as expected ui dialogues dialogues ui yeah so generate shared dialogues ui library and now let's add this dialog service and paste it into our new shared library here so this is similar to this messages data access library where we don't need the angular module because the service is using a three shakable provider provided in roots so it's an application singleton service but we need to be able to import this from other libraries or projects so here in our public api or the barrel file we will re-export this dialogue service um there we go so now wherever was in the crisis detail component let's restart the ts server it's initializing there we go so now we should be able to say import from for heroes shared ui dialogues dialog service there we go and now it's happy is able to compile right so vector extract block service to shared linux ui library nice okay if everything's good we should be able to build the application now yeah that was another few minutes right and if everything is working now we we should be able to take another look at that dependency graph oh something wrong ah oh dear candy activate guard so that's another this route guard right so that's still up here in our app project this is another route guard that certainly this is uh this is a shared thing i don't know if it's activated in other it's only the crisis center feature but this is certainly intended to be shared so we need another library so this has to do with routing so i would also personally put this in data access is it about well this is not really this is not about security so it's not about author authentication and authorization this is about is there for example is there an unsaved state that should prevent the user from navigating away so this is about navigation and it's in the shared scope so scope is shared type is i'm getting a call from my wife my wife so i have to leave in just a sec uh navigation data access and we can see that we have generate uh share data access library and we will put this into this new library where is it here it is and this also has a tree shaker provider so again we don't need this library module as an entry point but we instead need to re-export from this route guard we start the typescript server because we introduced a new path mapping and now import from both heroes data access navigation yeah okay so it has both interface and this guard class but yeah we're oh maybe someone's importing that no no one's actually importing that okay yeah move and activate the active a card to our navigation data access it see if we can build now and um end this session very soon okay so just extracting these two pages or parts of our application into separate libraries the crisis center page the heroes page forced us to think about the architecture layers of of this application and what is shared between features or intended to be shared and which category is this shared in so we have something about presentation in a ui library about dialogues we have something about some services about navigation we have services about messages this is application state uh okay so this one about navigation i mean you could have it in a utility library but everything about routing and navigation and route guards things like that i usually tend to put in data access so decide on what makes sense for you and your team and your project now we're able to build so let's have another look at this dependency graph look at that we have a hierarchy we have layers we have grouping folders so now we're starting to see the structure of our our application the two of heroes app it has a feature crisis center with a page has heroes domain or feature page area whatever it has a heroes part of the application which has a page that page depends on messages so does the crisis center but the crisis center also depends on the ui dialogues and the navigation data access if we focus on let's try to do this focus here and see some of the projects disappeared right on focus select all we'll see everything if we focus on this one that everything out here is removed because there's no dependency chain between what's over here and what's over here so those features or pages are isolated from each other although they do have shared dependencies unless at least this one right so um and similar if we focus on this one i would expect these two to disappear from our graph because it's isolated from them it's imported by by this page library but there's no connection directly if we follow the arrows arrows right there's no connection pointing back to them so focus on this and the other shared libraries disappear so this is a good tool for keeping track of dependencies of course we should enforce that through lint rules but we removed the linter so that's something we can do at a later point what's also interesting is the affected command so we could do an affected dependency graph that would be if we created a new branch and change something inside of let's say this paid heroes page we can nx can calculate which projects are affected by that change so that would be of course this project but also every project that has a dependency on it so that would be the application if we changed a file inside of let's say this one every project listed right here would be affected by that change so we would need to run builds and test targets and turn targets for all these projects to make sure that we have covered whatever could be affected by a change in this data access messages library okay very good i'll push these changes to to github and shut this one down and that's it for today of nx before dark but on a sick family day so um that's why i'm doing it doing during the daytime today i hope you learned something there's a lot of interesting things we stumbled upon here the best thing is it caused us to think about consider really consider the layers of our application architecture layers and we can introduce lensing rules to enforce those boundaries these layers in our application and now we can start to make sense of what really belongs where maybe in another episode we'll continue continuing extracting pages and features out of this application and then we could dig a layer deeper and consider what we put into each of those pages what could be extracted into a separate feature what belongs in the ui library what belongs in a feature library what belongs in a data access library is there something that really belongs in a utility library what about a domain library is there something that is only about the domain of the application and the answer is yes so we could look into all of those interesting discussions in in other episodes um yeah i'll see if i get time for that and this is a series i do whenever i have some time on my hands and right now i'm well my family is sick so i'm staying home with them and then i'm yeah i just uh i felt like i wanted to share something on this topic because it's something that comes up again and again how do you migrate from angular cli to nx what can you do after migrating how do you split an application into libraries and we took a good um yeah this is a good starting point but there's a lot more to it right a lot of details a lot of options for what we can do with nx and we're just touching on the tip of the iceberg here so until next time i hope you have a pleasant weekend thank you abel for joining and thank you for good wishes for my family i hope they get well soon as well they probably will throughout the weekend and they'll be all good for monday same for me hopefully hopefully i don't catch anything from them yeah so until next time um have a good time and keep learning i hope that this inspired you to experiment or actually do a migration to nx yourself in your projects and hopefully i can show you some other tricks later bye for now

Channel: Lars Gyrup Brink Nielsen

Views: 89

Keywords:

Id: 7MtQXPIpUoc

Length: 93min 20sec (5600 seconds)

Published: Sat Sep 04 2021