Angular 10 Library | Convert an existing application to library | Learn Angular part 7 | JS Cult

hey what's up everyone this is me arnab welcoming you to the seventh episode of learn angular in case you have arrived here for the first time in this series we are learning the basics of angular framework while building an e-commerce project in the previous session we have completed the payment gateway integration so today i have planned to introduce you all with angular library and in the next couple of episodes i'll dedicate for angular monorepo concept and progressive web applications respectively all right so what is an angular library on a very high level it is a collection of pre-compiled routes which include services components directives etc basically shared across different angular projects for reusability unlike an angular application library cannot run on its own until it is integrated with an application so these libraries can be used locally in your workspace or you can publish them as npm packages to share with other projects which are not present in your local system for example our project has add to cart functionality which is built using multiple component services etc now if we want to implement something similar in another project we can pack these components to a add to cart library and use it in other angular projects this is the most generic use of angular library but today we'll do something else but before getting to all this i have a problem for all of you so suppose you have an e-commerce product okay you own an e-commerce product and you got a customer for this product as well imagine it is xyz company now they have one condition that is uh the customization on top of the product will be done by their developer and not yours what that effectively means is you need to hand over your product source code to the client's team okay for them to continue the development in their local pc now if we do so obviously there in lies a thread of code theft right so we need to find a way to expose the product to the customer team so that they can use the product but cannot clone it or see the source code basically if you know the solution please comment down below so today we'll convert an existing angular 10 application into a angular library which can be reused in other projects without exposing the original source code first of all this is what we have developed till now [Music] let me login to the application [Music] great now i want to add a couple of pudding and one chocolate ice cream maybe fine [Music] so this is how the card screen looks after that now step one is to navigate to app folder here idm and product folders mainly contains our project feature so we'll convert these two modules into a shop library the core mainly contains generic project configuration and we should leave it to the application side now we need another workspace to which will create our shop library [Music] i don't want to create a default application right now therefore create application flag is false here [Music] with the help of angular cli utility command we will have a workspace inside which we can create our application and library now the next thing is to generate a shop library called shoplimp [Music] so as i mentioned after the library is generated we need to create an application and we'll copy this core folder inside that application but before doing so we'll copy this to folder into shop library [Music] all right [Music] then the next step is to copy the core folder contents into an application which we are about to create [Music] now [Music] a css for styling we need [Music] done [Music] before moving the core folder here let us remove the existing app components and modules from here first these are default files which will modify according to our need [Music] now we need to do a bunch of stuff first let's open the code base in vs code editor [Music] [Music] since the app module is inside core folder you need to fix this path in main ts first okay so that was easy now before going ahead we'll copy the app config service and pipes folder from this core folder into shoplife [Music] as they are very much specific to the library hence we can't expose it right basically we need to take out everything from the application which impacts the library next just copy the assets and environment folder into the newly created shop app [Music] only because we are trying to make a clone of our existing application so everything should remain same but it is up to the customer team to customize this replace everything [Music] now we have the same environment properties here as well since we don't have core folder inside our library i'm checking now if there is any import path which still refers to the files in core folder [Music] well here we can see couple of red lines but these are different issues i'll get back to them later in some time only so inside dashboard we need to change this app config path [Music] great it is resolved now so same goes for filter pipe as well [Music] since their location is modified now now heading towards the shop app for now i'm commenting these lazy loaded routes soon we'll replace them with the newly created micro front end just wait and see now as i was saying uh coming to the stripe js thing let's quickly add this dependency in our workspace [Music] simplest way for that is to use npm add so this command will add stripe js as a dependency into our project once that is done we will learn how to access environment variable from a library [Music] since you all know library is a completely standalone bunch of code and we can't directly import any specific environment here instead library or i should say environment should be provided by app module itself so if any other application uses the same library it is the responsibility of the application to provide the environment [Music] here by adding this at inject stripe key dependency we are expecting that its parent module will provide them an injection token with the same name that is stripe key just moving this load stripe call statement inside constructor now [Music] okay now the second part here i came to the app module to provide the stripe key value like we did for base url great now if everything works fine we'll receive the value for stripe key here inside card wrapper component awesome so the last step before we can test our application is to add the scripts and scss entry inside angularjson [Music] here we just need to modify the path as per our application location since we are inside shop app configuration it is safe to add the hard-coded values here now let's quickly build the library code [Music] great so the library is built successfully but we haven't exposed any of our code from the library therefore effectively it is still the same generic library boilerplate which cli provided us let's add these two modules one by one here in public api file unless we add our files here it won't be accessible from the application side the last import is for product component which we are explicitly importing in our app routing module file [Music] so this is where all these items will be used but before that let's rebuild the application library first you should explicitly provide the external module identifier by using this umd module ids this goes into the libraries package file section [Music] now that warning will be gone this is the dist content which we have got after successfully building the shop library under lib folder you will find all these files with dot d dot ts extension they basically hold the type information of these files the ts files are now converted into their javascript equivalent after application and minification process so this is how the login component looks after build [Music] similarly this is how the idm routing file looks finally as our library is up and running it is time to uncomment these routes [Music] okay i think this import is unused here let's remove it now we can get products component from our newly built library only for this only i have exposed this from the public api file if we open tas config base dot ts ts config base dot ts under paths key we can find this shop lib key which refers to the dist content of it so this is done by cli which generates these codes while generating the library itself we will use this key to refer our library from the application side same way as we have idm module exposed from the library side we can alter this import path with simply shoplib [Music] same goes for product module as well so ideally this should be enough to test the library code [Music] oh i forgot to include font awesome cdn path inside the index file so font awesome we are using for all the icons delete icon plus icon all the icons d1 is also up now as expected we have made a replica of our existing angular application here but this time we are using a library [Music] testing the payment part now [Music] and it's a success now if we open the stripe payment page for a final confirmation what do we see here let's check right right now it's 9 37 28 jan yeah so this is the payment i just now made of 870 rupees as everything seems in place it is time to delete this entire shoplift folder as a build version is functioning great from the dist folder now we arrived at the last stage of the session here here we'll pack this library and install it from a different workspace i think that's what i committed initially so this command will create a tarball version of the shoplib our library basically so here it goes these are the resultant tarball details this is a file which holds the entire library content and it can be installed from any other workspace to test this let's come out of this current workspace and create another new workspace [Music] now change directory to this new workspace [Music] so here we want to use the idm module for shoplib [Music] to achieve that we need to install our locally created shop library from the previous workspace the command remains same uh the way we install any npm package only difference here is uh we need to supply the tar file location path here along with this [Music] this is the file location basically this step will copy the library into the node modules folder of our current workspace [Music] all right now that we have successfully installed the local library we can alter this path with shop lib like we did before so this is just to confirm uh that we have added shoplib as a dependency to our project [Music] this is how it appears in packages [Music] as you can see it accepts our library without showing any error and with this final step it is time for me to wind up today's session of learn angular using npm publish command now this library can be shared globally as well so if you find my content helpful please hit the like button and subscribe to my channel thank you for watching

Channel: JS Cult

Views: 688

Keywords: javascript, js, typescript, OOJS, Arnab, Arnab Lahiri

Id: 8Lmjjnfljc4

Length: 23min 28sec (1408 seconds)

Published: Thu Jan 28 2021