Angular Production - Build, Test & Deploy a Full Stack Application using Nx - Part I

hello everyone this is dripo here and today we're going to build an angular project and make it ready for production using angular nx this is going to be an intermediate level workshop and we're going to learn many new things throughout this course quickly before we start i should introduce myself i'm actually working at vermic as a full stack web developer i usually use angular as the front-end framework and that is why we're here now the first thing we should know is what is nx well it is a framework that helps us develop test build and scale multiple angular applications using modern tools like chest cypress ngrx and much more so it basically takes all of angular framework's core and the cli and provides a much more modern experience with better linting testing faster cli etc okay now let's talk about the more important stuff which is why we should use nx and what can we gain from it so let's put it this way when we're dealing with angular the angular cli generates our angular code nx on the other hand sits on top of the angular cli and when it generates a project an angular project it does it with some additional functionalities more importantly it actually follows the concept of a mono repo meaning multiple projects can actually be organized and grouped together in whatever way we find to be most logically consistent so it allows us to generate more than one application and organize it in a way that you can start to share code across those applications now what is really interesting is that not only you can run an angular application from nx but you can run a react app using this mono repo pattern so you can have an angular and react app sitting side by side next to each other now in my case i'm going to use this feature to have both angular and node projects together but before we proceed with nx let's talk a bit about a very important topic which is data modeling let's say you start a new project whatever it is and you don't know where to begin the first thing you need to do is to understand the data model for the domain that you're working in this way it becomes very easy for you to know what the rest of the application is going to look like for example let's say we have a user model which will have first name last name and an active boolean so when we look at this model we have a very good idea of what the ui is going to look like for this particular model for instance we would have two input fields for the first name and last name and a radio button for the active attribute not only that for the rest api we know that we're going to have an endpoint for slash users and a user's slash id which is a get method that returns a single user by id and a delete endpoint which follows the same concept and so on and so forth the point is if you understand the data model you're going to understand the shape of your application from the ui all the way down to the api so you can stack your features side by side correctly moreover if you're using ngrx you're going to know what your actions reduces effects and selectors are going to look like now here's a situation that most front-end developers encountered in their projects especially when they're working with a team there's always this hard dependency on the backend team to produce the api that you're going to consume so the front-end team is done and the back-end team is not which is going to be a blocker if you have an agreement on the data model you can go ahead and mock out the api because the model is the same and you're able to finish your feature and when the api is ready you can switch back and use that with no trouble so let us see how this is done in practice so i'm going to generate an application completely from scratch and build it out so how we do is from the command line first make sure the angular cli is installed in your computer and let's run mpx create nx workspace and then give our workspace a name for example angular production so what this command does is actually install annex tooling for you and it gives you many options you can choose many workspaces such as react next.js etc but what we're going for today is angular plus nest which allows us to prepare a full stack application so let's give the app a name select our stylesheet which is sas for the nxcloud this is actually an optimization by nx for production but we're not going to choose that option for now now as you can see here nx will parse all of this into one large command and we'll start installing all the necessary packages if you don't want to go through answering all these questions you can simply run mpx create nx workspace and concatenate it with double dash and you precise the option that you want to add for example preset then equals and you choose your preset which is in this case angular dash nest now this way we already have an entire angular nest application ready to go so let's go into the project directory and run npm start let's hop into the browser and we can see the home page of nx being displayed with a message equal to null now this message is actually being retrieved from the nest api which in our case it doesn't exist what is happening here is the angular application is trying to reach out to the nest api but doesn't seem to find it well it is actually very simple all we did here is run the front-end application by running ng-serve but we didn't actually run our nest application so let's see how we can actually adjust our package.json file in order to run more than one application you can streamline multiple commands at the same time to make it easier let's shut down our angular application and let's install a package called concurrently which will allow us to run multiple servers at the same time now let's go to our root directory and open up the package.json file and let's tweak this so we can run the angular application in parallel with the nest application so what i'll do here is create some custom commands one of them is going to be called serv column api which is equal to nxrun api column serve this will run the nest api and the second one is serve colon web which is equal to ng serve the last command is serve column o which is equal to concurrently and we put each command declared previously between a backslash and double quotes so now let's save this and go back into our command line and execute npm run serve column r all right so now from a single command we are able to run the client and server into separate tabs and yeah as you can see here we have our message displayed in our angular application which is returned to us from the local host 3333 slash api hello you can find this endpoint in the controller file of the nest application okay so let's talk a bit about our file structure that exists within this application just to lay the foundation of how things are going to be organized so as you can see nx separates the apps from the libs so think of something that the user interacts with or something to be consumed in the service area that goes in the apps directory so we have our zonkify app here where we find all our default angular code it is as if you run ng-new in the angular cli alongside with that we notice that we have the end-to-end songify so not only do we get an angular application but you also get cyprus integrated into this monorepo which is very important and because we have our api we'll find the nest application right there now for the libs directory it is where we'll find our shareable codes across our multiple applications so we can start adding libraries via nx libs so i'm going to add angular material and ngrx first let's install our packages we'll start by typing mpxnx add at angular material it should ask us if we want to proceed we say yes obviously and for the rest of prompt we can just hit enter to choose the default values for ngrx let's run mpxnx ads at ngrx slash store alright now we can generate some libs by running mpx and x generate lib let's call this one material dash dash style equals scss let's also generate another lib called core dash state which handles the state of our application more on that later and last a lib called core dash data let's set the writing for these two libs in case we need them later so now if we go back to our code we notice that we have a new lib called core data now this is usually used to communicate with the server so we'll define our data models and use this library for server communication so now that our libs are set up let's go ahead and make our data model so let's have to api-interfaces typescript file which is under the libs directory we can already see our message model that the default nest application is using this model file allows us to share the data model between the front end and back end or another application so you can use these interfaces especially when you're dealing with typescript we can make a base entity so export interface base entity and within it we have the id which is string or null so pretty much everything that comes through this is going to have an id now we add our model named song which extends base entity and inside it we will have title and description of type string now let's go ahead and generate a service in the call data lib so run mpx nx generate service which is going to be under services songs and we'll call it song service dash dash project equals core dash data and there you go now you can see that in the core data we have set up a service for our data model so let's talk a bit about the config files so in our angular.json in the projects property here we can find all our apps libs that we have in our workspace and if we add a lib or app it will be pushed to this array now in the nx.json we also will find the list of our projects in addition to that you'll be able to understand the relation between these projects for instance the songify end to end is naturally dependent on the songify project now if we go down to the ts.config.base we'll find in the path properties some aliases now this allows us to essentially import things and instead of having to type the long paths of the libs we can use these aliases and this is why for example if we go to our component.typescript we already know that it's using the nest api we can see that it's using the message data model from api-interfaces and it's doing that using the alias of the path now let's make use of our created material lib now you probably already guessed that this is going to be used for the angular material library that we installed earlier now if you have worked with angular material before or even priming you already know that it has a lot of modules so instead of having to import everything across different components we can create a module which we already did and inside it we import everything and export it at the same time so it's like a bridge for all the components of your application so i already prepared a module.typescript file that does this for me i actually found this in stack overflow so shout out to the guy who made this i'll provide the link from stack overflow down below i actually removed the imports array since this module is only for exporting modules so we can just leave the xbox array that allows us to use all these modules in our apps now all we have to do is head to the app.module.typescript and import the material module using the alias that we discussed earlier and let's do the same thing for the rest of the libs and add them to the imports array let's also add the default routing to our app module so we run mpx nx generate module app dash routing dash dash flat dash m equals app.module.typescript okay so everything is set up let's go ahead and build our components so let's run mpxnx generate component songs dash m appmodule.typescript dash dash style equals scss and we do the same thing for the home component and for songs list and songs details we're going to generate them under the songs component directory now we can see that in our app we have our home component and our songs component which is the container component inside it will have the other two components now before we start i'm going to use a lot of templates and styles from the material library so we're not going to write all the codes in this video because that would take us very long so you can take all the templates with me in parallel from my get up repo and we're going to go through every one of them together so to be able to understand the structure and workflow of our app i'm going to start by the most specific components and then go up to their parents until we reach our app components which routes between both home and songs components so we obviously have the songs list component which will be a material card so it has a title and the content is going to be a materialist item that loops through the songs that we declare in our typescript file so the songs object is going to be retrieved from the parent component which in our case we have two parent components calling this songs list component but either way we just declare it as an input property and the type is song array imported from the api dash interfaces so inside the list item we're going to have a span of the song title and also a button which will only be shown if the property read only is equal to false so this property is also going to be retrieved from a parent component specifically the home component so we declare it in the typescript as an input property and initialize it to false now for the click events every time we select an item from the list we're going to emit the song object to the parent component the same case if we click on the delete button so let's go ahead and declare the output properties in our typescript file okay as i said we're going to have two parents calling the songs list component the first one is the songs component so the selector is going to have the input directive and we pass to it the songs object array which is going to be initialized in the ng on init lifehook so we set the object to the mock songs declared at the top now if you face this kind of compilation error saying that the property has no initializer this is actually caused by the strict class initialization that is applied to typescript files to fix this all you have to do is head to the tsconfig.json of the songify app and remove both compiler and angular compiler options because we don't actually need them now for the output listeners we're going to listen on both selected and deleted event emitters and the first method is going to set the selected song property to the emitted object from the songs list child it is noted that this selected song is initially set to the empty song object declared at the top for the other listener we're going to do the same thing except this time we're going to remove the emitted song object from our songs list using the built-in filter function and of course set the selected song to the empty song now the other child is going to be the songs details component which is also a material card having the title edit song if we have a song passed to us from the parents so in the typescript the song is going to be an input property of set song function that sets both the current song property and the song title used for string interpolation for the rest of the card we're going to have a form with submit event which will emit the modified or created song by the saved output property declared in the typescript file the inputs are going to be mapped to the current song with ng model and we obviously have two buttons one is of type submit and the other is cancel which will reset the form and trigger the cancelled event emitter let's not forget to import the forms module in the app.module.typescript in order for angular to recognize the ng model directive now if we go back to the songs component to see the output listeners of the song's details we can see that the saved listener will call the save song function which will have two cases if the song emitted has an id we are in the edit case so we will just call the update song function which will map all the songs array look for the desired song having the id and assign it to the emitted song object after that we obviously reset the form details meaning we set the selected song to an empty song now in the case of creating we have a new instance of song with no id so we're going to call the create song function which will generate an id randomly by this kit random id function and for the rest of the attributes we're going to get them from the emitted object and last for the cancelled listener we're going to call the reset song details which will simply set the selected song to the empty object this will automatically clear out the input property passed to the details component which will eventually clear out the forum now we move on to the next parent of the songs list component which is the home component so we pass to the input directive the song's object which is initialized in the typescript file with the same values as the mock songs object we also pass the read-only input property because this time we want the songs list to have the read-only property set to true so we won't be able to see the delete button in each item meaning we only have the list of the songs without modification all that's left for us now is to construct the app component which will have a material toolbar at the top with two buttons the first one is going to toggle the side navigation and the second one is just for the account profile now for the sidenav we'll have the logo icon which takes us to the root path meaning the home component and then we have two navigation items let's add the logo and the assets folder again you can find this picture in my getup repo so let's remove this hello api call because we don't need it anymore and let's declare a links array containing information about each nav item link so each time we have a path and a title and also an icon for the list item now in the template all we do is loop through this array and call the router link each time with the specific link and for the icon we output the link icon for the container section we'll have router outlet which will load either the home component or the songs components depending on the route that we are on below that we'll have a list of banners which is going to be a static set of pictures so we declare an index in the typescript that will allow us to render multiple images and each time the path of the image is going to change its index so we would have banner1.jpg then banner2.jpg and so on and of course let's go ahead and put the bonus images in the assets folder and yeah that's our whole components workflow now let's set the routing so let's head to the app routing module.typescript and declare our paths array so we declare the constant routes which will have three paths the first one is home so path is empty and will render the home components the second one is slash songs which will render the songs component now any other path is just going to redirect us to the empty path declared previously so it will render the home component let's import the router module in order to set it to the root routing having the routes declared at the top and then export it right away let's delete the app component styling provided by the cli and let's finish this off by applying the global styles to all of our components i'm going to take the styles from my github repo and paste it in the styles.scss file let's add this last class to the root selector in the index.html in order to apply the material typography and there you go let's do npm run start and this is our template so you can see that if we choose the home navigation we only have our songs list components being displayed with the list of songs from the mock array and if we choose the songs path we will have both songs list and songs details components next to each other with the ability to select every song and modify it in this form and you can even delete it which will remove it from the array now up to this point we've managed to create a basic angular application using input and output properties event binding interpolation etc so if you want to continue with me from this point you can go ahead and download the source code from the branch that i'm going to commit my code into so you don't have to write all the boilerplate code you just have to understand the workflow of the components which i think is very simple so all you have to do is go to the link in the description click on the code button and download the zip file and you have all the code and you're all set now you might have noticed that our list of songs is static declared in typescript file which is not really practical in a real application because all of the modification will disappear as soon as you change the routes or reload the components so what we're going to see in the upcoming section is how to make this a bit more dynamic for that we're going to use json server and this is going to allow us to remove the hard-coded data within our components so let's go back to the command line and run npm install json-server let's make a folder under the root directory we'll call it server and inside it we make a file named db.json so inside this file let's go ahead and define our songs object just like the one we defined in our components now let's update our package.json file by adding one more command we're going to name it serv command json and the value is going to be json-server server slash db.json let's now head to the terminal again and execute npm run serve comma jason and open locus 3000 and you can see that our song's endpoint is there and when we access it you're going to see the list that we declared in the db.json file and we can even access a single song by adding slash and the id of the song so this is actually the fastest way to get up and running with the restful api now let's go ahead and consume this so let's head to the songs.service.typescript in the core data lib in the constructor we're going to inject the http client at the same time need to add the http client module to the import array of the slip so let's head to the core data module.typescript and add it now we can import the http client from angular common http and we can start declaring our restful methods we'll start off with a method called all which will return all the songs so return this.http.get and we give the method a generic type of song array and the url is going to be a constant that we declare at the top we call it endpoint which has a value of localhost 3000 songs now the find by id method is going to be the same concept except the type is going to be a single song and for the url we're going to add slash id at the end which is the id provided in the method parameter for the create method we're going to call songs as a post method and provide the body which is the song object passed in as a parameter the update is going to be almost the same but instead of calling songs as a post method we're going to call it as a put method and we concatenate it with song id so it will update the specific song having the id passed in as a parameter let's add the delete method which pretty much calls the delete endpoint slash song id of the specific song okay so this is great this is the usual stuff that every angular developer should know but what happens when you have another application other than the songify app in your workspace and you want to use the service so now we are actually going to see how to pull this off thanks to the lib feature so let's head to the terminal and generate another angular application into the code so we run ng generate app client for example dash dash style equals scss and let's not set routing for this app to keep it simple so dash dash routing equals false you'll see that it's generating a client application and a client's end-to-end application so we can run mpx nx run client comma serve dash dash port 4300 to prevent us from running into port conflict because remember we have the songifi app running in the default port which is 4200 we can see that our new client app is up and running from our workspace let's close it for now and hop back to our code and let's add a new command in the package.json file just like the other ones we call it serv karma client which is going to be an x1 client comma serve dash dash paul 4300 and let's run this command and we obviously get the same result okay so let's open our client app and let's clean it so we remove the default templating and styling provided by the cli in the html file let's type some random stuff so now what we want to do is use the service that we declared in our core data lib in this client app so let's inject the song service in the constructor now here it might not find the service as it's not actually imported in the call data module so let's head to the index.typescript file of the lib where you'll find all the exports that you might need elsewhere and add the export of the service now head back to the app module of the client app and let's add the core data module to the imports array now you can see that we can import the service from the lib using the alias but we get a compilation error which is fine we don't have to worry about this because this happens sometimes with the angular cli when we modify the modules file so just run the app again and you're going to be fine let's declare a variable called songs dollar the dollar is a naming convention meaning this variable is actually an observable and this is of type song ray and as you can see here we get the no initializer error so let's go remove the strict properties in the ets config file just like we did in the songify app now let's implement the on init live hook and inside the ng on init function let's initialize the observable which is filled in from the all methods in the songs service now all we have to do is display the songs list in the html template so let's make a p tag and with string interpolation we're going to pipe the observable so async pipe because it's asynchronous meaning we don't get this list right away and let's also pipe the observable to the json pipe to display the whole list as it is in the json server let's make sure that both the client server and the json server are both running and let's check our browser and there you go we can see that we have our list that we get from our lib and specifically from the json server let's also not forget to use this service in our songify app so let's head to the home.component.typescript and replace the mock songs with the observable just like we did in the client app let's do the same thing for the songs component so we add another variable holding the observable and we use it as the value of the input directive in the template file now obviously the crud operations that we do here are all applied to the static array that exists so this won't have any effect anymore because we are using our song service but we will fix this later on now if we open localhost 4200 which is the songify app we can see in the homepage that we still get our songs and same thing if we go to the songs tab so you can see here that we have two separate applications in this mono repo that are both using the same service which is the song service so you can notice this kind of abstraction from your applications components meaning you don't have any specific information about each components in the service located in the core data lib that way you reuse its feature across your applications with no trouble okay let's try another thing that is very common in large projects let's say you want to use a component across multiple applications for example we have this material toolbar which is currently present in our songify application and we want to use it in our client application so how do we proceed in doing so well you might have guessed all we need to do is create this toolbar as a lib in order to use it in our apps so let's go to the terminal and run mpx nx generate lib ui dash toolbar dash style equals scss now let's generate the toolbar component inside this lib so we run mpxnx generate component let's put it inside a folder called toolbar and we give the component the same name as the folder dash dash project equal ui toolbar dash dash style equals scss so now what we're going to do is within our code we need to extract the toolbar tag from our app component present in the songify app and paste it inside the toolbar component and then from here we are going to change this sidenav toggle to an output now you might wonder why we are doing this well this toolbar is actually not related to any of our apps so if we leave this click event to trigger the material sidenav toggle it will get confused because it doesn't have a side nav alongside with it so the solution for this is to make an output that will emit this event to the parent components which in our case are going to be both app components of songify and client and there we can listen on this event and fire the sidenav toggle from there now here since we are using the toolbar tag provided by material we need to import the material module to this lib in order for the component to recognize it let's also export the toolbar component in order for it to be used by our apps and i think the lib is ready all you have to do now is head to the app component of the songify app remove the material toolbar and replace it with the selector of the lib component let's also add the output listener that will trigger the sidenav toggle of material side navigation let's obviously not forget to add the ui toolbar module to our app module let's also head to the client app and do the same thing this time we don't have to actually listen on the side nav emitter because we don't have a side nav in the clients app at the moment but anyway we head to the app module of this app and add the toolbar module let's also add the material styles that we use in our main app and also the material fonts in the index.html because in this app we didn't actually install material like we did in the other app that is why we are adding it manually and there you go if we head to our client app we can see that the toolbar is there and also if we head to the songify app we can still see the toolbar working as well as it is triggering the sidenav toggle so you can see that we managed to use a component across multiple applications this is very useful in enterprise applications where you could use multiple apps and you want all of them to use the same kind of templates styles etc so this allows you to do so without the need to write the same code again in each application let's commit our code to a new branch again i'll pause the branches link down below if you want to continue with me from this point so all you have to do is just download it from the github page okay so what i'm going to do now is integrate nest into the mix so let's talk about it for a second for anyone who is not familiar with this framework so we already saw how to mock an api with json server but you would never actually use json server to do anything real it's just a fake rest api and a placeholder until you have a real server in place now nest on the other hand is an out of the box application architecture it is highly testable scalable loosely coupled and maintainable and the most important part is that it uses typescript so it's a reactive framework meaning we can have rxjs it manages dependency injections so you can see already that this is almost angular so if you're comfortable with angular you're going to know how to work with nest so here's an example of a controller in sjs seems familiar well here's also a service in nest even a module here we have the decorator at module instead of ng module one more thing with nest you have the ability to add swag authentication with passport graphql support socket io etc so without further ado let's hop into the code and let's generate some stuff alright so from the command line let's install a package called mapped types of nest.js which is an addition to the type system of typescript that allows us to create new types from existing ones and using methods like object.freeze to prevent us from modifying properties of an object now let's generate the nest api for our data model so we run mpx nx generate at nest js schematics colon resource which is the architecture of an sjs api we will call the module songs dash type rest to choose the restful methods you can also choose graphql if you want and we add dash dash crud true and we generate this under our api app so dash dash source root apps api src so let's see what this does in our api app we have a songs folder and within it we have our module and we have a controller which contains all the endpoints we have the get post etc all the rest methods which routes the verbs to these particular functions which if you look in your service is doing some logic so in a few seconds i was able to generate a full working crowds api using these schematics inside nx which is very powerful let's hop into our api app module and let's import the songs module that we just created after that let's execute npm run serve call and all and we see in the console specifically the routes explorer our songs are out this means that the nest.js is mapping through the songs api that we just generated now if we go to our songify app obviously here we are returning the list of songs from our json server not from our nest api but if we go to localhost 3333 which is the nest api we navigate to the endpoint api songs we can see that it returns us this string saying that this action returns the list of songs which is the response of the method find all that the controller calls which is located in the service file so what we're going to try now is forget about our json server completely so let's shut it down now on the songs service of our core data lib we are going to change this end point so instead of it pointing to the json server we're now going to point to the nest api so we change the port and we add slash api songs now since we don't have any data that we're pulling from our api it's actually returning a string in this service let's change this so we declare an array of type song so again here you can see that i'm using the same data model on the back end as well as the front end so let's define our songs in here now in the find all service of the backend let's return that array and let's see what happens on our songify app so as you can see here we are not getting the list of songs in our application so something is wrong let's check the console and we can see that we get a communication error specifically the course policy error so the back end is having some trouble to communicate with the front-end server we can fix this by simply going to the main.typescript of the api app and we enable the cross origin resource sharing now we go back to our app and there you go we can see our songs list and everything seems to be working fine now before we continue i just want to point out one thing sometimes people get confused as to why we are using a service in the lib and a service in the nest api well the service in the lib is just a frontend service that just points to the backend controller so in that controller you could simply return everything that you need but it is always better to separate the routing of the views done by the controller from the logic that we're going to do whether it's returning something from the database or doing some operations it's always good to keep all that stuff in the service area of the backend server okay so what we're going to do now is work on the rest of the crud operations before we begin i'm going to install an additional package called uuid that will allow us to generate random ids that we're going to use for our newly created song objects anyway we start with the find one method which will simply return a single song having the id passed as a parameter so we use the find method that takes the arrow function returning a boolean now here since our id type is string not a number let's modify the parameter to type string now in the create function we're simply going to push to the songs array the song object passed as a parameter from our http request and assign an id to it from the uuid library which we import at the top and then return that object to the controller now for the update and remove we're going to use the same functions that we used in our songs components so we map the songs array and modify the specific one in the update and we use the filter function to filter out the song that we want to delete so now we go back to the controller and we change the signature of the functions because here we are not going to use the data transfer object just to keep it simple let's remove the plus signs from the other function parameters and let's replace this patch decorator by put method that we import from the nest js now the crud api is ready and all that's left for us to do is go to our songify app and replace the static crud operations in the songs components by the calls to the api through our middleman which is the core datalib service we already treated the find all method so let's start with the delete song method so basically what we're going to do here is simply call the delete method and subscribe to it and now in the arrow function we're just going to reassign our songs observable to the updated value of the songs list in our backend service so we just call the find all method again and for the update and create song we're going to do the same thing except we change the methods that we call in each time let's head to our songify app and see if our crowd api is working so you can see that if we modify a song it will instantly get updated on all our components and even if we reload the page we can still see the changes and same thing if we delete or create a new song now we arrive at the last part of the nest api section this is my favorite part by the way so what we're going to do is install swagger so we run npm install at nest js swagger at 4 and also swagger ui express once this is done we head to our main.typescript file of our backend application and we're going to type some code so let's declare a new method we call it configure swagger which takes the app as a parameter and then inside the callback function we're going to add options which contains the title description and version of the api and then we build it and let's finish this off by creating the document by the swagger module and set it up as the dock api for our backend application let's import both the document builder and swagger module from sjs swagger now let's apply this method to our app so in the bootstrap method we just call the configure swagger and we pass the app to it and let's run api call and serve to start our backend server and there you go we have our api dock we can access all of our rest endpoints that we worked on so now you pretty much understand how to build apis which when you're building production applications you are going to need to consume an api faster than the backend team can produce it so you take that pressure off the back-end team when they're probably overloaded so we basically arrive at the main goal which is removing that dependency from the back-end team as long as you have consensus on the data model that you're working with let's commit our code as always so you guys are able to pull the branch that contains the most recent changes that we've been working on this has been a long journey and we have covered many topics such as learning basic nx commands generating multiple apps using libraries like angular material sharing them across our apps also sharing components with their workflow inputs and outputs services mock-in apis with json server and sjs but we are only halfway done we still have a lot to discover such as reactive angular and state management facades and jrx testing building and deploying on the cloud etc so if you enjoyed this part of the session make sure you leave your feedback down below in the comment section and subscribe for more videos to come

Channel: dreevo

Views: 1,783

Keywords: angular, nx, deploy, json, backend, data, model, production, ngrx, state, cypress, test, jest, github, component, material, service, rest, api, library, nest, typescript, song, monorepo, swagger, mock, angular11, angular12, angularjs, javascript, rxjs, fullstack, crud, cloud, build, frontend, style, template, module, dependency, injection, share, libs, core, cli, react, multiple, apps, cross, cors, policy, develop, conception, ui, input, output, event, emitter, subject, json-server, nestjs, routing, router, exports, config, package, html, scss, js, ts, node, npm, ci

Id: j38ufd8Q86w

Length: 45min 42sec (2742 seconds)

Published: Thu Aug 12 2021