Angular Library: Use A Library In a Mono-Repo and Different Workspaces

hello everybody welcome to another video from code shots with profanize this is the second video of a series where we will see how to use libraries in angular either using a monorepo or a polyrepo in this video we will see how to create and use an angular library in a monorepo so let's get started but first let's see what we have in terms of application that we created in the previous video we have our app here and if we open the app up command html we see that we have a selector lib my lib and if we go to the projects my lib we have this component and here we can see that we have leave my lib and this is the template that we have code source with profanize and if we go to the browser we can see that this is what we currently have the question now is the following how can we create how can we have more than one angular applications that use the same library so let's go here in the terminal and i'm going to create one more application with the generator ntg application and i will name it users if we open now the projects what we can see that we have the library and also we have the new application with the name users let's run this new application and reserve the user's application and i want this to be in the port 4000 to 1. let's go to the browser this is the previous one and i will open a new tab in the new port and this is the new application the default page that we have from angular cli right and what we're going to do is to reuse the library both in this application and in the user's application and the steps are the same the same like we did in the previous video so i will open the user's src up module and inside here in the import we have to import the lead module so i will keep this open and i will go down in the other application in up module and we have to import this one my lib module so let's do this here imports my lead module and i want to import from this one my lib as soon as we have this now how to replace in the app component html let's select everything from here delete it and let's go back to my lib src lib into the component let's grab the selector i will close now this file and inside the appcomp.html i will use the selector leave my lib and now let's go to the browser to see what you have both in 4200 and in this one we have the code shots with profanize which is the component that we use from the library and how about now if i go to my library and i'm going to change this one i will just delete the exclamation marks and i will save and i will go back to the browser no more exclamation marks here and neither here nice so this is how we managed to use the same library in a monorepo let's close everything and see the following what do we mean when we say that we are going to have more than one applications in a monorepo what we mean is actually that we have our application in the same repository in the same git repository and this is what we have for this application and if we take a bit the structure of this application is the following what we have is the projects and here we have mylib which is our library and here we have the users which is another application and this one is the main application that we have right so have two different applications in the same repo like we saw previously these applications both of them are in the same angular workspace how about though it will have more than one applications in different workspaces let's have a look at this well what i did is the following that i moved the angular workspace under the directory with name client1 and now i'm going to create another application with nameclient2 and this is what we have we have client one and client two which means an angular workspace and another one so have two different angular workspaces and the goal for this video now is the following we would like to reuse this library from this workspace into this angular workspace let's give it a try we have client one and client two i will go to client one and specifically to the ts configuration and if you remember from the previous video this is what we had we had the paths and would like to go to the client tool and under the compiler options use the paths go to ts config and paste it here and here we have to define the exact path of the compiled library files and this of course is in the path with client one is the first step as soon as we have this now the second step is to go to the up module and you know what i will have on the left side the client one and on the right side i will have the client too so that we have this separation so let's go here into the app module and would like to check the up module of client 2 and this is it and i could grab my lib module and i will import it here my leave module and of course we have to have the es6 import as well the next step is to go to the app component into the html and have this selector and again i will go here into the client tool and i will search for upcomponent.html i will select everything from here and i will simply paste this selector and this is it the very first step now is to use the ng build my lib with a watch mode of course you have to be into the r application cd client one and the build mainly watch mode and now if you remember in the first workspace we have two different applications and in the other one we have one application so let's go again to the client one and we will have the ng serve and this is going to be the main application of client one and i will open one more terminal into client one and this is going to be the user's applications of the same workspace right so ngserv are going to have the users under the port 4201 and now let's go into another terminal into client2 and we will simply have the ng serve with port 4202 nice so we have compiled successfully from client2 and the same for client1 this one and this one so we need now to have three different applications up and running let's go to the browser to see what we have this is the first one this is the second one and let's also go to the third one nothing here and if i reload we have codeshot group of funnies and again here we have code with profanize it seems that we'd manage to use the same library in one application in one angular workspace but not in the other let's open the developer tools and go to the console to see what kind of error we have it says that cannot read properties of null reading binding start index there is a problem already reporting in in angular and according to mischo heavily it seems that the error indicates that somehow there are two copies of 5v in the application so we have to use this one in the paths to tell angular you know what if you if you are looking for angular this is the path so let's go to the ts config of client2 and inside the files we will use this i will kill the server and rerun let's go to the browser and voila we have it quotes google fun is in the second client in the client2 which is another workspace and if we now go in the first one everything seems to work fine how about now if we do any change in our library into the projects my lib src i will go to the mylip component in this one and i would like to change something i will add some exclamation marks here and i will go back again to the browser to see if everything works just fine and it seems that everything worked great this is the first application this is the second one and this is the users and this is the third one so that was it thanks for watching please let me know what you think in the comments below and do not forget to subscribe see you in the next video

Channel: Code Shots With Profanis

Views: 16,285

Keywords: Angular library, angular, angular course, angular for beginners, angular libraries, angular library, angular library tutorial, angular mono repo, angular training, angular tutorial, angular tutorial for beginners, learn angular, mono repo

Id: c08TyqtQQ4I

Length: 11min 51sec (711 seconds)

Published: Sat Oct 16 2021