Nx After Dark: Migrating an Angular CLI workspace to Nx

hello hello welcome to nx after dark it's not exactly after dark in denmark but i have a sick family today so i'm just spending whatever little time i have right now on sharing some stuff that i see coming up all the time so i'm going to be talking about nx of course it's in the context of angular and to take a project that you might be familiar with we're going to be using the oh hello shivam thank you for joining nice to have you i hope the audio is okay and everything else well i'm going to be taking the two of heroes tutorial and even the extended one the router tutorial because it has more features so it's going to be more interesting in the long run today we're just going to start out with kind of migrating an angular cli workspace to nx and see if there's some kind of issue there or if it's a smooth ride and then start making decisions on how to uh structure it from an architectural standpoint but that might not be today and i might be called out to take care of my my family so if that happens i'm going to end the stream pretty quickly but let's see how far we get so here we are going to be opening up the angular angular io website going to be finding this so there's uh there's the two of heroes here but that's kind of the basic one i'm going to be looking for the extended one with the routing features here it is the router tutorial two of heroes so here we can take a live example that will open it up in stack blitz or we can download it download it as a zip file which i have already done so let's take a look at what we've got there well the nice thing is er what we get down is everything we need it's a full workspace it seems let's check out we have the angular json file which is the workspace configuration it has let's see just one project it's an application project called angle io example so this was downloaded straight from the angle io website and it has package.json with all the dependencies here from angular and so on so from here we could use whatever package manager we feel comfortable with npm or yarn i prefer pnpm but the angular compatibility compiler is not really compatible with modern package layouts so then my second choice is yarn the first version because the second version is using plug and play which is another package layout not supported by angular compatibility compiler so i've run a yarn install let's just do it again to make sure everything's all right and that added this oh by the way we should initialize this repo so that we can put it on github here we go okay let's look what we have we have our yarn lock file because i installed with the on one we have our dependencies we have this one project and um yeah let's rename it to heroes app actually i'm just going to kind of clean up what we got here from out of the box let's see if there's something else i see tslint i don't want tslint that's deprecated it's actually end of life so it's worse than that and it's not even if you generate a new workspace with angular cli today there won't be any english is there a ts link there shouldn't be tslind but we'll remove that actually so here yarn remove gslint and codalyzer which is the angular specific rules and lint rules for ts lint today we should be using angular eslint and eslint but it's not built into angular cli so you'll have to add that later yourself of course nx has its own default setup with angular island out of the box so if we generated a new project or new workspace with nx it would come built in but i'm going to be removing some stuff here let's see there's probably also protractor that's also been deprecated protractor in itself and certainly the angular sport so let's move that as well yeah then we can delete this end-to-end testing project and delete the t ts link configuration okay starting to look better is there anything else here from that we don't want to have not angular and it's this in memory web api for development purposes so that you it's kind of setting up a fake back end and angular dependencies jasmine so jasmine and karma karma builds on top of of jasmine right but is a in browser test runner for the the jasmine framework so that's still supported and it's still a google project uh of course there are alternatives nx defaults to jest instead of karma for a unit test but you can also pick karma or jasmine let's keep that for now let's go through our angular configuration file here for the workspace see if there are configurations we need to remove there's test that's for karma there's lint so let's remove this lint okay let's remove the end to end target as well oh and this project here should now say tour of heroes app that's the default project so when we run ng-serve or ng-build it will look for this project by default oh here's another one i should probably do a search and replace for this book heroes app yeah so it was also used in this target commands for serving and for globalization uh yeah that might be it okay yes that's kind of sad but that's how things are there's no end time testing framework no linter bundled with angular today so kind of weird it's still in the two of your tutorial so this is more similar to what we have might have out of the box when generating a workspace with uh engine new something like this right except there's this in memory web api okay so we're on angular 12-1 i don't know there's probably 12-2 by this point but whatever [Music] let's stick to this one that came from the documentation for now okay so let's figure out how to migrate to an nx workspace let's go visit the nx.dev documentation and we're on angular look for migration from angular cli let's try to follow this guide and see if there's any issues here we having yeah the major version of angular cli must align with nx okay we're on angular 12 and nx 12 is also the latest and automatic migration from angular cli to nx only supports one project okay we have one project so pretty lucky uh well did i remove the end-to-end project let's make sure i deleted it but did i remove it from in here all right it was only a target uh yeah so nx i think nx will generate an end-to-end testing project as a separate project not a target which is kind of neat for different reasons but that's not the case for angular cli so we have just one project everything's fine and here use ng add and preserve your existing structure keep your existing file structure okay so it'll be familiar let's try that see what we get this will install the narwhal workspace package and we'll create this nx json configuration that we'll look into hello ineya or however you pronounce it thank you for joining i am working on this two of heroes where did it go here it is two of heroes router tutorial going to migrate it to an nx workspace because this is an angular cli workspace and then we'll start splitting splitting it into projects and grouping folders and workspace libraries and all that goodness later on maybe not today but at some point okay so we'll get the nx configuration file that will have an entry per project we just have this one project for now but we'll add more for sure and we that's also where we could set up some let's see is that where we set up the lensing rules for the workspace i think so um yeah we'll look into that at some point we'll get this decorate angular cli js file um that will enable us to still use ng serve and ng build rather than nx build and an excel so it will kind of reroute that ng command to nx instead but we'll have the nx features such as computation caching and parallelization things like that yeah and we should be able to use the same commands after migrating let's just make sure that oh hide your message again let's make sure that they are actually working so that we know what we'll be looking for okay so we should have ng build and it should actually be a production built by default since this is angle 12 but let's see there's the production configuration and this is the new uh setting in i think it's angular 12. it was introduced in default configuration production oh and now that ridiculous angular compatibility compiler which is the reason we can't easily use pnpm or yarn 2 with plug and play and takes a ridiculous amount of time this is a pretty fast hexa core i7 laptop there we go and it doesn't um respect the the budget bundle that's not nice let's see if we can do something about that at some point yeah okay so this command is working ng build and this is a production build let's try we deleted lint we deleted end to end so what do we have left test right hopefully there's a few tests there's also a and a two of heroes testing tutorial those tests might not be here probably not how many tests do we have in this project it's not good no no tests apparently okay zero of zero tests success okay well let's not worry about testing right now although that's extremely important but the command is working so we have test we have build and we should have serve as well and globalization but i don't want to get into that so these three targets serve build test they should also be working after our migration there we go should we make sure it's working yeah we should let's see our app here it is this is the two of heroes router tutorial so other than the heroes feature or page whatever we might call it there's an admin panel you can log in and then we have access to all these things there's a crisis center an active crisis and there's a contact form here looks like that's might be an auxiliary router outlet it's kind of interesting okay so a bit more advanced than the basic two of heroes which oh yeah it has this page here it also has the dashboard no that's a different dashboard okay so it doesn't have the dashboard from the basic tool heroes tutorial oh well okay i'm going to zoom in sorry for that there it is looks like so we're locked in the contact form yeah so this is the app we're going to migrate all good we're in a good state of things we can run our commands so now let's go for this update or migration commands right here so ng add using the angular cli it will add this package then we'll run some schematics that are built into the this package and for this command to keep our structure it could be interesting to see what's the alternative no i'll actually delete it because i prefer nx let's see the nx structure um so of course this is the where oh okay yes except this is the very basic structure focused just on one app so there's a source folder with the app folder and the main file and so on whereas with nx it will usually in the root of this workspace will have two folders apps folder and libs folder so that's what i'm hoping we'll get now yeah look at that apps and then our app project libs nothing in here except this get keep file just to keep this folder even though it doesn't contain any real files or useful files and then our the source directory is now empty so this will not be part of the git history anymore okay what else happened here yeah deleted all from the source file moved it into the app's two of heroes app folder and it added these tools folder as well this is there's a configuration for typescript and we can have it says schematics here but it should be in nx it's called generators and filters no sorry generator instead of schematic and executor is except for or instead of instead of the angular cli builders yeah but anyways this is where we can have some workspace generators or scripts or whatever inside of this tools folder nx has its own system it used to be based on the angular cli angular schematics and so on but less and less these days there's there's still a migration going on but now there's the nx dev kit rather than the angular depth kit and that doesn't in itself depend on angular schematics so it's a framework agnostic and tool chain agnostic well tied to the nx tool chain but can support whatever angular react next all of these things node.js okay something happened in the karma configuration interesting prettier was added recommended extensions the nx configuration the libs folder ts config base json yeah uh so nx is using the solution style uh typescript configurations which were introduced in angular intended zero but they were removed again in 10.1 of angular for people complaining rather than fixing the problem yeah so this is what annex is using is using solution style right no okay no this is just the base one they're all extending from let's see when we add a project if if the solution style is still here or maybe it also changed okay we have prettier now should add some more settings if you want to customize it to your team i have some preferred one as well and make sure to use the prettier extension for vs code we have this decorate angular cli that will be wrapping the ng command and forwarding it to nx instead what else changed angularjson was updated package.json okay okay that's it let's see what we have angularjson is something changed here yeah see here on these blue lines uh how is that change root root source oh it was the folder that changed yeah same here okay yeah and this okay so this is still using the angular workspace configuration schema version 1. nx does have its own workspace schema with version 2 where some of the things are renamed schematics is generators architect is targets or target what is it targets yeah i think it's just target targets or something and builders is executors those are there's also there's also like an something with the output there's some patterns you can use but other than that they're very similar and nx does support this angular schema for the workspace configuration so we can stick with this especially since some angular schematics expect this layout in our workspace configuration and nx is patching wherever it can but in some cases it's still you need to keep this angularjs and classic layout with the version one schema yeah okay we have the strict settings here for angular and for typescript as well and there's two there are two new options being introduced either in angular 12 2 or angular 13 i don't remember the names but i saw that there were two strict typescript options being added but they're not here seems okay good so actually it worked as expected i mean we still need to verify so let's try our commands again now we should be able to again run ng build no okay something's wrong here okay so nx the nx configuration should have an entry per uh per project okay a few things to change here the scope so this will be say we're in a typescript file here we're going to import from a library a workspace library so here the npm scope is what will be here so say i want a tour of heroes that's what i'm i'll be adding here rather than the two of your app and i can do something like a crisis center and whatever a feature of prices list or whatever we're going to figure out what we're going to how we're going to divide it and inside of here might be a feature module of some kind yeah okay so this is our preferred scope there's one thing here it's still the old master branch but today we're using the main branch instead and nx is not able to detect that yet so we have to configure that ourselves this is all right oh here projects yeah so it was expecting an end-to-end testing project it seems but we deleted that so remove that so inside of here this projects object there should be one entry in nx json for every entry in angularjson right so this two of heroes app has an entry and this is where we can add some nx tags to this project um something we'll definitely look into for now we'll leave it empty so now does ng build work yeah okay support was requested for i11 but that's deprecated in angular 12 interesting so where's this browser list where's that no there's no browser list where's that that file seems to be missing no it's not there okay okay so we can build this is a production build that's working now and you saw we were using the ng build command we should also be able to do the same with nx build now which will do exactly the same of compiling a production build of this project okay so something worked worth noticing here uh so the website the migration guide on nx devs told us that the automatic migration only supports one project in the angular cli workspace so we got lucky uh if you're migrating yourself uh you can't use this automated migration but it's still a matter of um adding this package here but then ng add might not work so instead we should do something like yarn add dab dependency then we need to create files like this ourselves the nx json and and uh but yeah these things i don't know i hope you can yeah probably i would try this anyways and see what's missing now you know what we're supposed to have in here should have this prettier file the decorate angular cli file the nx json file for sure and we should have this ts config base json and the tools folder and then yeah we'll have apps and libs for all our projects in this workspace so this is how it's supposed to look like oh it also added these recommended extensions for vs code nx console whatever i don't know some snippets for angular eslint and prettier all good to have okay so our command is working nx build and let's check out mg test with karma oh that stupid angular compatibility compiler man it's a pain there's karma running on chrome there's no tests so everything's good but it was running in watch mode i think it's is it like a single run or something like that nope watch falls and then it should finish rather than running in watch mode yeah there you go i think it failed i think that's because of zero tests uh don't know if there's a flag or parameter for karma for saying zero test is all right there is for jest so it's the same issue but i don't know if it's solved in karma yeah to fix that you'd have to add an actual test the unit test okay the command itself is working so i'm happy with that so we're just missing ng-serve running and let's see if we can connect yeah still working good so that was a successful migration to nx let's stage all these changes look what was it was a lot of renaming this application project adding a few files renaming this ts base cs config base json from ts config json wonder what happened in karma interesting looks like it has some template that it's applying okay so i will add these changes let's actually take this name here and upload this folder to a github account just give me a second i will just do this off screen for a second then you should be able to access this yourself in a minute public repo all right here it is this is my handle on github lazydk and you can find it under nx angular two of heroes so now i just need to push from my local gotta love github here we go and let's tweak some settings here i don't want a wiki don't want projects that's pretty much it oh yeah i don't want to pin the butt since this is just an educational project good oh sorry there it is so now you have access as well this is the nx layout and oh should have forgot to share my screen sorry here it is github lazy dk nx angular 2 of heroes with the nx layout of the apps folder with this project the libs folder which is empty right now and the nx configuration so you can see this is now an nx workspace rather than angular cli yeah yeah thanks for pointing it out shivam i was i'm not too good at managing screen sharing sorry okay so this was actually what i wanted to do just for now uh going to end this stream and i might start another one but i'll just have to think a minute about what would be the best next approach oh one last thing here let's remove this source folder there we go now it's all cleaned up and we have a workspace using nx i'm just thinking about this what if we wanted and because there's another option here and it's calling this workspace json let's just try that for fun so to upgrade this to well first of all it would still work just by renaming it it should at least nx build come on computer yeah so it's running so this is working with nx of course angular cli wouldn't work now but because we have this decorate angular cli patch it will even work now with the ng build command but as we can see here it's running nx cli under the hood okay but what if we wanted to use this nx specific schema for our workspace well first off this schema does not work i don't know if there is one for um for nx let's see if we can figure that out actually lib mr schema nope there's no schema not in this package anyways what about the workspace no no okay so we will delete this one then we'll say we're using version two which is the annex specific workspace configuration and would have to change a few things this would say generators instead of schematics this would say target or is it targets yeah targets some extension here probably the nx console um it's giving me a shortcut here and that's only working when it's called targets i guess that's the name and there's what else oh yeah so we're still using the angular builder nx has its own that you can use for incremental build uh what else oh right instead of builder it should say executor and is there anything about schematics no just this one should be called generators okay let's see if it's still working now ng build or nx build seems to be running and what's the reason for doing this well we can support uh tooling for other projects rather than only angular um might still work using the angular workspace configuration i'm not sure i think it does right now there are not too many changes between the nx workspace configuration and angular cli workspace configuration which was version one yeah so our commands are still working but this would of course not be this wouldn't work for just the angular cli but both layouts in the configuration for the workspace are supported by nx and test build server okay yeah i'm going to i'm actually going to do this upgrade workspace layout schema version two all good let's look at our nx console here we can serve our application we can build it we can run all these targets we can run a test target there's no end to end there's no lint right now we can also run all these generators both yeah here's the novel nx ones for angular storybook workspace which is non-angular specific and even the ones from the angular schematics here and there's not a specific one for nx nx supports the angular schematics as well here yeah let's push this change okay okay so that was it we migrated the angular cli workspace to nx and i'm going to end this stream and think about starting another one um in a few minutes maybe if i had time and we'll get to work trying to i think we're going to structure this application into multiple projects workspace libraries and so on and adding tags and project tags and workspace linting which would require a linter yeah so maybe we'll just start by i don't know yeah i'm trying to think of something okay see you some other time maybe in a few minutes if we're lucky bye

Channel: Lars Gyrup Brink Nielsen

Views: 173

Keywords:

Id: 5Z55XxZnFkE

Length: 40min 53sec (2453 seconds)

Published: Sat Sep 04 2021