Angular Library: Learn How To Create And Use It In Your App

hello everybody welcome to another video from code shots with profanize this is the first video of a series where we'll see how to use libraries in angular either using a monorepo or a polyrepo we will start with the basics and in this video we will see how to create a library and use it in our application so let's get started this is a default application that i have just created using the cli and it will go to the browser the only thing that we see is the default upcom.html file and what we want to do now is to create a library right so let's do this the command that google use is the ng generate library and we have to define the name of the library let's say my lib the library has been created and now let's go to the explorer and spend a minute here to see what this command created for us the first thing that we are noticing is this project directory let's open this and we can see that we have my lib which is the name of the library that we have just created and inside src elib we have some files we have a unit test we have the component a module a service unit test and a service these are the default files that came automatically with the generation of the library what is very interesting here though is this file the public api so what this file is all about so the library that you have just created is meant to be used by our angular application or by multiple applications right so these applications are the consumers and the public api is the user layer which defines what is available to the consumers of the library and what we can see here is that the consumers will get the service the component and the module nice so the question now is how can i use this public api let's now go to our application which is this one and let's focus in the ts config file let's open this and what we can see is that automatically we have this path section here which creates an alias with the name my lib and this points to the compiled version of our library so let's build our library ng build what are you going to build my lib we have to define the name of the library nice so now we have this directory this and inside here we have my lib and the ts config json my lib which is the alias points to this directory ok so how can i use this now what i'm going to do is the following i will go to the my application src app up modules and in the imports import the module that exists in our library so let's go to our library and we can see that we have here the mylib module and this is the name so i will copy this and let's go back to app module and i will just paste it here and as you can see we can import my lib module from module my lib this is the alias that exists here in the ts config paths let's go again back to the library and we have also this component right leave my lib is the selector name so i will close everything now i have just copied the selector name and i will go to the app component html i will select everything and just use the selector here let's go to the browser and this is what we have my lib works this is how we use a component that lives in a library in our application how about now if i'm going to do any change here my library works and i will have it like this is a change let's go back to the browser reload and we won't see anything why is this happening the reason is that in the ts config here we depend on the compiled version of the library this means that we have to recompile our library so let's do this ng build my lib and of course this is not efficient enough right so how can we do this how can we during the development do any change in the library and use this change in our application we can simply use the option watch this means that any change that we will do in our component codeshots with profanize any change will recombine the library and also update our application and if we go back to the browser we can see that here is a change called source with profanize and this is how we create a library and use it in our component 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: 1,228

Keywords: Angular library, angular, angular course, angular for beginners, angular library, angular library development, angular library tutorial, angular training, angular tutorial, angular tutorial for beginners, learn angular

Id: hIEbJkP1M5E

Length: 5min 58sec (358 seconds)

Published: Wed Sep 22 2021