Getting Started With Angular and Nrwl Nx - Preview

hello and welcome to my course getting started with angular and neural annex my name is Bill G Singh and I am going to be your instructor for this course I am a freelance full stack web and mobile application developer I am also an instructor and a occasionally write blog and create YouTube videos my personal website is bulgy Singh dot in and you can follow me on pretty much every social network with the username embassy saying so what we are going to be learning in this course we will start by talking about what is NX and how we can create applications with NX and how we can add new libraries with NX and how we can use ng rx for state management in our application and how we can build our applications that we create with NX for production we will also see how we can convert our existing angular CLI application to NX workspace so what are some of the prerequisites for this course you need to have a basic understanding of angle fundamentals as well as type script fundamentals so without further ado let's get started so what is NX and next stands for novel extensions for angular it has been created by a company called novel and they are the team of X colors and they were also part of the angular core team and X is not the replacement of angular CLI these are just extensions of angular CLI that adds some capability to our existing angular projects with an X we can create workspaces to many other applications and we can also create applications and libraries with it so why an X so if you want to create multiple applications or let's say multiple angular applications that share some data or some state then we can make use of NX also NX is useful building very large enterprise angular applications because NX provides up opinionate structure similar to the angular CLI project so it makes it very easy to work with enterprise large applications and X is a mono repo so every application and every library in our code sets in only one repository and annex helps with the architecture of our application and annex applications are very easier to scale in this video we will take a look at how we can set up our development environment before we start working with NX so first we need to have no GS installed on our system and then we need to have a command line and I will be using hyper in my case but you can use Windows Mac or Linux default command line if you like and then we need to have a code editor and I will be using vs code in this course we also need to have angular CLI installed on our system and we will also be using angular console to work with angular CLI in a graphical fashion and we also need to have novel and X schematics installed on our system now to install node.js we can head over to node.js to toe our G and then download either the LTS long-term support or the current version and we will be using LTS version in our case and then if you like you can download that terminal that I was talking about hyper and you can head over to hyper dot is or you can also use default Windows Mac or Linux command line to download Visual Studio code you can head over to code dot video studio dot-com and then download it for your specific platform and now to download and install the angular CLI you can head over to angular dot IO and then from your command line you can type NPM install dash G at angular CLI and to download angular console you can go over to angular consult comm and then download it for your platform of your choice whether you are on Windows or Linux and last we need to have an ex installed on our system so you can go over to Nara Ville dot IO and then you can click on get started guide and here first you will see you have to install the angular CLI globally and at last we can install novel schematics globally on our system so on our command line first we can install angular CLI so we can type NPM install - G at angular slash CLI and after this is installed we can install novel schematics so we can type NPM install - G at novel - schematics in this video we will take a look at how we can create a new NX workspace so we can open the command line in the directory of our choice and then we can type create NX workspace and after that we have to pass our workspace name and in my case I will be using NXT and that is a next tutorial so now we can press ENTER and it will create the new workspace for us and install the dependency squared now after the workspace is created we can change the directory to our newly created workspace and then we can open the project over the folder inside our editor which is vs code in my case so here on the left hand side we can see the file structure of our NX workspace so here first we have apps where we will put our applications and then we have lips rectory and here we will put our libraries and then we have this node modules folder where all our dependencies related to the work space are installed also if you see closely the NX workspace for the structure is very similar to our angles here project and if we can put it side by side and you can see the difference now here on the left-hand side we have our annex works with project and on the right-hand side we have our angle CLA project and if I laughs at you can see the project structure is very similar and we have all these TS lint foil TS config and angular JSON file and all the similar files but what is different is we have this source directory here inside of our root in the angle CLA project but in our annex workspace first we will have to create an application and then we actually have to create the lives or actually we can put our application inside of Apps entirely but we shouldn't do that and we will see it in the coming videos so now we can maximize the screen of ours and let's first see how we can open this project of ours inside of angle console so here inside of angular console we have this getting started page and here we have two options either we can create a workspace that we have already done or we can open the workspace so we will use this option and then we have to choose the directory and we will go to our desktop and here we can select our project so this is a one I am using NXT and now we can click open and here you can see currently we are seeing it blank but when we create new applications it will appear here and then we can generate the code for these applications in this section we will take a look at how we can create new applications inside of our annex workspace so here inside of our angular console we are currently in the NXT project and we are in the projects tab so we can go to the generate code tab and then we can click on the application and here what we can do is can pass the application name so that can act as a standalone application so I will create first the admin application and then I won't put anything in directory and then I can click on option fields and here I want to enable the routing and for the style I want to use a CSS and if you prefer CSS you can just skip that and all looks fine to me and now we can click on generate and also before doing that you can see in the bottom we are already getting which files it will generate so that is very helpful so let's click on generate and then it will generate a new application so here inside of our vs code if we expand the apps tab and here we can see we have our admin application and we will also have that admin e to e folder here also if you expand this admin folder you can see this is very similar to our angular CLI project source folder so then we can actually close this for now and then if we open angular dot JSON file we can see under our projects object we have at that admin object and then we have this admin e to e folder or the project over here so what we can do is if you want to change the configuration related to our project we will change it here so for example if you want to change the source route so instead of Apps admin source so we can change it to the code in our application so in that case we have to change this source to code so I want to just set so this is just an option and then the next file it changed is an X dot jason and in here we have this project array or the object again and here we have added this admin and admin e to e so this will act as a short name and we will see when we further develop our application and how we can use it and now to run our application we can open the terminal inside the vs code or you can click on terminal and then new terminal and here we can do ng serve and then we have to pass a project name in our case the project name is Edwin so now this will build the project and I can actually close that and if you want to see the project name we can actually use this name or we can also see the name here inside our angular dot Jason so now if we open our terminal again and we can see our project has been built and then we can open our product by following this URL so we can go to our browser and then we can type localhost 4200 and then this should show our admin application in this video we will take a look at how we can add ng rx2 over NX workspace application and the RX is a state management library for angular and if you are using NX workspace you are probably familiar with ng rx and here in the angular console you can see we have created that admin application and now to add ng rx to this application we can click on generate code tab here and under the novice schematics we can click on and gr X and here we have to provide the name and I will use the name app also in the bottom you can see the command it will generate or run and then for the directory this won't matter much because we will add the ng rx to the root of our project and for the module so we will select app module tortillas inside of our admin directory or the admin application and now we can click on optional fields and first we will select a root here and then we select only empty route and the other parameters looks okay and now in the bottom you can also see the command it will run and the files it will generate so now we can go ahead and click generate and then it will create these files and add ng rx setup to our admin application now after it is finished we can go to our editor and let's close the terminal for now and then we can click on our source control directory to see the files it has changed and it has operated our three files so the package or JSON file and it has added an TRX store and ng rx entity and it has also operated package locked or JSON and then our app module so if we open up module dot ES file so this is under admin source app and app module OTS and here on the right we can see the generator command actually added the imports here for us and then the setup for the ng rx is done automatically and now as our application is already running and we can go to our browser and here we can open the developer console and inside of the developer console we can click on our redux tab so that won't be visible by default you first have to install the extension called redux dev tools and then after it is installed you can click on the red X tab here and then here you can see we have already set up our and gr X in this application or in this workspace in this video we will take a look at how we can generate another application inside our NX workspace so inside our angle console and then under generate code tab we can click on application again and then we can pass the name in this case I want to use client and I would pass a directory here and for the optional fails let's see I want to select the routing and then for style I want to use a CSS and all else looks okay to me so we can click generate here so now this will go ahead and then generate a new application now after it is finished creating the application we can go back and then we can add an grx to our application so for the name I will again use app and also the state directory won't do much in our case so because this is a root and then we want to select app module inside our collide directory or client application and for the optional fields I will first select root and then I will select only empty root and then we can click on generate so this will also set up at grx for our client application now after he finished then we can go to our code editor and then see the files created or updated so first we can go to our apps and here we can see we have our client application and client e to e or end-to-end so this is very similar to over admin application and also if we go to our angular dot JSON and we will actually close that and then you can see the client has been added inside of our angle of Jason and similarly client a to e also if we go to an extra Jason and again we have client and client e to be added here as we have also added ng our extra over client application so if you go to client source and app and then go to app module dot T yes we can see we have these imports here and then we also have this set of four and grx for our client application here in this video we will take a how we can run multiple applications inside our NX workspace at the same time so first if we collapse this and then we will open the terminal here we can see we are already running our admin application and if I open the new terminal here and to run the new application so if we go here we can see we have this client application also if you go to angular dot JSON we can see we have admin and the client application now to run the client application we can do ng serve and then that application name so that will be client so now this will go ahead and then build the application so here we are seeing we are getting port 42 is already in use so what we can do is we can go ng serve client and then we can do port equal to 40 201 so this will also work now this will go ahead and then build our application and then it will run on port 4200 now that it is finished so we can go to our browser and here we can see our admin application is already running and now if we go to localhost 4201 and here we can see our client application is running so now both applications are running at the same time and we can work on each one of them simultaneously but most of the time we will work with only one application now here in the editor we can see we have run this command and these collide and then we have to specify the port we can also specify the default ports that our application uses so if I actually close this terminal and then I go to our actually first let's go to admin application and here inside of our server object we can pass support here and then let's set the port to 40 go for 200 here actually I think it should go inside of the options so let's add it there all right and let's actually copy that and let's go back to our client application and again inside of our serve options we have to add this port but here we will use support 4201 so if we want to use another port we can specify it here so what I want to use 4201 now if we open our terminal and let's maybe kill the terminals and let's open it again and now if I do ng serve admin and now this will build the project and in another tab I can do ng serve client and this will build the client project for us and we can already see we didn't specify the port here and it is already taking that 4201 port and if we go to the first tab and that admin application is taking them for the 200 port and here in the browser we can see our admin application and that light application are running fine in this section we will take a look at how we can create lives inside of an X workspace in the NX workspace application most of our application logic sits in the lips so let's see how we can get started with lips so inside of angle console currently we can see we have two applications admin and the client application and now we will see how we can add a live or library to our admin application so if we click on generate code and then we can click on library and for the library name I want to use dashboard and for the directory inside of our lips directory I want to create admin so our live will be directly under lips and then admin and then dashboard and then after that in the optional fields we want to select routing and again we have to select the parent module ok so currently this is no showing in a select problem maybe there is something wrong and if it doesn't show up then you have to add it manually but it should probably or most probably should show as a drop-down in your case and then we can type our admin module path so then we can they then app and inside of F we have our app dot module dot ts file and then after that we can click generate and then it will create a new library inside of our lives directory after it is finished we can head over to our editor and now if we open our lives directory and under admin we have that dashboard library so here we can also see this is very similar to our abstract eree and the one thing that it changed here is that under the source directory we have that lives directory and here we can add our modules and components and also we have this index dot TS and it is also called barrel where we can export our modules from here similarly if you go to our apps and then we open admin and under source in the app module we can see we have imported that admin dashboard routes and then we are specifying the route route here and the router module dot for route and when we go to our admin application slash admin dashboard it should show in the admin dashboard routes for us in this video we will take a look at how we can create a component inside of our dashboard library that we have just created so currently we are in the projects tab in the angular console and on the bottom we can see we have this admin - for library so we can click generate component here and the component we want to generate is dashboard view so that will be responsible for showing us the dashboard template and then we have to select the project so we have already selected that when we click generate component and for the module we want to select our lives admin and then admin dashboard module tortillas and we don't want to export that and in the optional fields we can select if you want Inland style template and for the style extension I want to use a CSS and yes we want to generate the spec file all right so this seems okay and in the bottom we can see it will create a component inside our lives admin dashboard source live and then dashboard view so now we can go ahead and click generate and then it will generate this component and it will also update our admin dashboard module inside our dashboard live now here in our editor if we click on source control and we can see we have these four files created and then this one file called admin dashboard module updater so now if we see inside of our lives admin dashboard source live we have this - for view component with the four files component or HTML component or a CSS then our spec file for testing and then the typescript file for of component and now if we go to our admin dashboard module duteous so we can see we have also updated it with here in the declarations array and now first what we need to do is we have to specify the route path so what we can do is we can specify the path here and then we have to specify the component and the component we we'll be using is dashboard view alright and make sure to add this import statement if you are using vs code it should add it men or automatically so now if we go to our dashboard view component we can see we are getting here dashboard view works and the last thing we want to do is we want to import our admin dashboard module to our app module inside of our admin application so here in the apps admin and then source app then app module here inside of our imports array we can add dashboard dashboard admin dashboard module right so here we can see if we go to admin dashboard then it should open or use our admin dashboard routes and if we go to admin dashboard routes in the library we are specifying our routes for the application and now let's run the application so we will run our admin application so we can do ng serve and then admin so now it will build our application and then we can run it and now our application is running on port 4200 so in our browser we can type localhost and then for 4200 and first it should show our admin application so this Phi the route path and now if we go to our admin dashboard and on the bottom we can see we are getting dashboard view works and similarly if you go back and we are not getting it in our root page we will only be getting it when we go to our admin dashboard routes so the routing works

Channel: Baljeet Singh

Views: 14,611

Keywords: angular, nx, nrwl, apps, libs, monorepo, ngrx, code-sharing, angular-console

Id: dEbXjUH5N8c

Length: 28min 44sec (1724 seconds)

Published: Wed Nov 21 2018