Angular Libraries Adding Secondary EntryPoints

hey hey everyone so uh this is second part of the angular library stream which which i was doing so in last week we uh not last week i think uh two weeks ago we we discussed about how to how you can create angular libraries using nx and angular workspace and hey called phobia hi thanks for joining and today we will continue with the same uh we'll see how you can add secondary entry points but of course before we move ahead and see how you can add secondary points we will talk about why you need a secondary entry points so uh yep let's go ahead and do that so what i'm going to do is i'm going to continue with the same repository which i had created and it's available on github as we saw last time so in case you want to check it out you can just go to my github repository or just go to my github account you will be able to find this one so let's see what we had done so far so we created a project we created uh sorry this is an uh library this is a library so we added an employee library to this project and then we use this library inside our application so which is this one app component and if you see if you go to app module we are using employee module here so what we will do now is let's add one more module to our uh library project and we will not use it so i'll just structure a little bit uh using more yarn ripple now i'm just using angular monorepo and for another uh example yeah it's an angular monorepo and another one which we have is nx monorepo so yeah so let's go ahead and do that i will just create another module so here so integrated terminal so i'll just say ngm and i will call it as department and it should create its own folder and put all the files there okay and inside department or let's add a component so ngc and a department component hey vasanthai thanks for joining so okay so that's it so we have this department component and employee component and now in public api i'm going to expose both so i'll say okay this is dot slash lib slash department slash module and i'll also add component department company so once this is done uh the next thing which we have to do is we have to go ahead and add uh sorry build this library before we can go ahead and use it so i'll just say ng build and employee which is my name of my library so let's build it and done so now the library is built and i can go to a module and you can see i can now also access department module but we don't want to so the scenario is let's say we have a library we which exposes employee module and as well as department module but we are just using employee module that's it we are not using department module so the expectation is department module code should not be available inside app that's what we want to achieve because not everyone is going to use everything right this is the concept of tree tree shakeable i mean making your library is tree shakable so in case you have used angular material so in case you have used angular material you may be aware of imports like angular material slash table slash cdk slash uh some other module right so input or form module so what they actually what they have done is they have made their entire library three shakeable so in case someone just uses table they don't have to actually uh go ahead and include everything else i mean all other controls right so that's the advantage you should get by creating a treasure cable library so let's go and build this which is already done so what we are going to do is we are now have to check what's included in my application so what are the ways we actually need to use some a tool which is available and i'm going to use one which is source map explorer and i had written one small utility on top of source map explorer to be used with angular so let's go back and see that so here uh mgx builder source map analyzer so this utility i had written for myself so in case i want to uh use or i want to actually see what's included in my application i can just go ahead and do that so we have to just run this ng ad so let's go ahead and do this ngat ngx builders analyze and then we can run this command i have to just make sure that i am adding def loading false because differential loading is not enabled in angular 11 and above so it will fail i mean well it is getting built i just received this and i'm sure you can see so github just send this to me i think they sent it to many many uh developers out there so this is how your 1500 commits look like on a 3d steel so it is printed on a steel so it is 3d printed printed by a 3d printer so it's it's actually a lot heavier than it looks like okay so then so uh now the the uh this particular library or uh it is added so it's only for your uh just to figure out okay what's included in your package don't worry it's it's it's nothing which will increase your bundle size so it's just a utility and used will be evenly used on local let's go ahead and make this i think i shouldn't go ahead and make it uh false by default now because most of the application which i have okay there's there's a catch because there are a few which are still using differential loading so i cannot do that but yeah so let's go oh yeah this is one this is the one analyze so you can see there is an option which is analyzed which got added here and i have to just add the stiff loading and i'll just say okay this is false okay so once this is done you have we have to just run this command so let's go ahead and do that i will just add it and add it to package.json just to make it analyze and you can say ngrun uh your application application name so this is how it is so application name angularly demo and then your builder name so builder name is analyze it should be okay so once this is done now i can just run npm run analyze to my application and it will actually uh build my application in production mode with source map enabled and it will also go ahead and open up a page on my machine which will contain the information what is included in my application right now yeah actually it's it's it's a lot heavier than it looks like i mean so it's it looks really small but actually it's heavy quite heavy okay so let's see uh it's creating the application bundles right now that's actually building the application you can also go to skyline skyline.github.com i think and you can see your 3d graph okay so here we are so i'm sure this is really small but let me just zoom in so this is the entire application this is how it looks like and you have it's this is main bundle and it includes your angular router common platform browser right now it's really hard to see the the library angular library because it's it's really small it is really tiny so let's go ahead and see if it is available here um operators okay let's go back to main operator subscriber common.js good modules it becomes really difficult to see okay let's just let let's just add something let's add something in in the code so it becomes a little bit big to actually see it here right now it's it's hardly visible because the code hardly contains anything so let's see in main if i can see it no es 2015 this is internal operator subscriber this is observables no this is not what i'm looking at rxjs and then this is related to angular i think yep this is angular node modules angular and i think it should not be okay it's really small so so we have this is let's say i mean uh this is let's see this is your 200 kb file and the combine is 238 kb and let's see if we can show you here probably i think if i see my main.js file it should be available so just a hack which i am doing right now because in case you have a big library of course everything will be available visible in in the in the this report which we have seen but as of now let's let's go ahead and see the bundles right so i can just go back to src and employee department and i will look for department component okay so this main.js that should not be okay so here we have employee employee and this let's see if we have department um [Music] uh okay so this department is included here inside my build and it should be available inside the final bundle i think but somehow it's not visible run time it does not contain anything map okay what about here employee okay so lib employee yep so here it is lib hyphen employee and employee works employee service cannot enable broad mode what about department so it's not included is it controlled okay so my department is still not available here because you probably we are using it from local so i think that's the problem that's probably the scenario but here we can see actually in our library we have so department and this employee is also available here what we can do is we can actually make it we can add secondary entry points so while importing or while importing anything so i'll just go back to angular app module here so uh while importing right so we have employee module from employee which is which goes to this public api and public api contains this exports so it has a single entry point and now i can make some changes so in case i want to access department i have to say employee slash department so this is what secondary entry point means so let's go ahead and make some changes to the library which we have here so uh first thing which we have to do is we have to go ahead and disable these the uh primary entry point which is if i go to dsconfig.spec.json it should be here in paths not spec but ds configuration so it should be available in here in path so you can see employee which refers to dist employee and slash employee because this is where the final bundle will be generated so dst employee and inside this okay it i'm not sure why there are two but i think this is the one dst employee so just remove this let's hope this will not cause any issues which it should not and here let's verify the put path for application that's fine and build and okay looks good to me i'm not sure from where we had this dst employee slash employee and uh what we are going to do is we are going to disable the primary entry point so i'll say okay the dst slash employee ah so employee slash star so it will say okay i cannot export or i cannot import anything from employee directly so it will disable that and then we are saying okay this is it should also targets to dst employee slash star so let's go ahead and build this library again okay done so now if i go to app module let's go ahead and see so we have employee and dst employee again now let's make make some changes to the library so in library what we have to do is there are two ways uh in case i want to make something like employee slash department and employee slash employee uh same example as of angular material right so in angular material you have angular slash material slash cdk angular slash material slash your table your input so multiple so something like that so we will follow the same structure but before we go ahead and do that let me show you how actually angular material does it so here because angular material does not use angular cli so they use basil you can go to angular slash components and see material okay so you can see they have actually structured each code inside each folder so auto complete batch button and this is how it is but important thing to see is this one ts library angular material and nested packages entry point name entry point and there is something which should be available here it is so you can see in angular material source code you will be able to see this config.pencil and this is where they have configured entry points so each folder actually represents an entry point so you have your imports like material slash dialogue material slash straight picker material slash date picker slash testing so these are entry points which ah which is done by using basil for angular material so let's do inside angular cli now and for angular cli now we are going to do is we are going to uh have employee and as well as employ slash department so here i will just go back and save this okay it was not saved let's build it again so just for demo purpose i will move this all files inside an employee folder so we have employee slash employee and employee slash department so let's go back to our library now here i will add few files so i have to add index.ts just close other files okay and then i can just do public hyphen api dot ts and then i can add a package.json so uh angular libraries they use something known as ng packages and that's what i am doing here so we will be using ng packager to configure it and let's go back so this extra package.json which we have here we will add a package ng package lib an entry file which is public iphone api or ts and here in public api we will export so remember the department export which we had added so i'll just make it available here and we'll remove slash department and from here as well so this is for department and then from index.ts we will export star from public api so this is something which i'll just show you why it is used and then we will move this all files so i'll just create another folder and i'll create is create it as employee and let's move all this inside employee and same so here i'll also add index.ts and then public hyphen api dot ts and then we have a package dot json in package.json we will do the same thing so i'll just copy this and this is something which is mentioned on the ng packager website as well in case you want to remember it so we will see okay export from public api and public api is right now empty so i'll add these two imports ah sorry not this two but there are four so we have employee lib employee component employee module employee service and what this employee is okay this is an interface so i'll just also export the interface okay looks good so far and this will become empty this and let's try to build the library now so i'll say okay ng build employee so it says okay compiling types through and you see oh and uh internal error failed to get symbol for entry point and okay so here we have to add two things export star from at the rate uh employee but employee slash okay what happens um okay so let's see employee and then see export star from employee cannot find module employers and corresponding type declaration so it's okay and public api i think i can just keep it empty let's see not saved mark it says okay lipstick it's slip slash employee uh and handled so yep he's right so lib slash let's see export star from nope not see doesn't work here but let's make it make it work so what we can do public api with hyphen api.ts hmm okay there is a reason so i think it's employee sla dsd slash employee so i'll just move this too this is live and there should be a file okay just move it inside src directly and this public api as well let's see what oh okay so i think this was my fault just mentioned in roman file so i'll say okay this is export star from public api and then i just moved this inside src directly and i'll just move public api outside as well and this public api i think this can be empty right now and this lib does not contain anything okay let's let's try to build now ng build employee ah yes so i'm trying to configure secondary entry points mark so it's like the same structure which our angular material has just to make our libraries researchable so that's what i'm trying to do so it says okay ng a public api not found employee src public api project angularly projects employee src it's there right so public hyphen api dot ts package.json public iphone api ts department and let's try to do this export star from why it is not working here dsd okay so what i will do here is i will just add a scope or so this is actually lib slash employee and similarly i think do i need to know so inside my package.json i'll just make it same okay this is my library name probably if i do this it should work export star from now okay i think it should do the trick public api package.json here so i'll just make the name of the library same so it's okay this is name of the because if i see building entry points and those employee demo this is this is what it is trying to do so this is that is the path i have just added this name space here to this package name now it should be fine so let's try to do it now still it should throw an error but let's see so okay it is trying to build lib slash employee now and uh okay so the next is this one done okay i'm not sure why path is not updated here but it should be cool and department okay let's and in package.json uh ng package we have to remove this src okay let's see so it says entry point is which is required by dustin doesn't exist okay let's remove this as of now i think i was referring to the wrong file anyways here so my public api does not doesn't exist inside src anymore is it ah okay still i'm inside the src folder so i'll just remove move it outside the employee that's what i wanted to do and lib i think this is okay now so public api is out inside okay so employee folder contains this this this and everything okay why it is not taking the updated paths okay probably i'll just restart my editor it should fix it you are saying there's a type of employee versus employee okay probably employee employee and then lib employee slash okay now we have this lib slash employee let's see but it is not accessing employee amp hello it's same right so i don't think so there is any typo here and the package is uh this is name the name is same let's see okay first let's try to do it without ah yeah that's that's good but it is not building right now so that's the problem let's see probably i just named it really confusing internal field hm what what is wrong with this so lib slash employee and then we have slash department slash employee let's try to do export star from employee slash okay so it is saying what else is there lib slash employee so dst only contains angular lip demo does not contain this code so okay let's do one thing let's remove this as of now because i think it is causing a lot of confusion so okay this should give me department folder but it is not okay so let's see again so ds in its contains public api public api contains this too this is package.json and it is inside employee folder is it and then file explorer okay looks correct let's do something package.json this is fine ng package public api uh dst employee this is also good public api dot ts i'll just remove this as of now because i think let's see what it does now so it is building entry point lib slash employee and it says okay again fail to get my god yeah i mean that's that's a way but i don't want to do that for a reason actually package public api so i can also do this export star from department slash index this is also something which we can do anything it should build okay now it failed in this public hyphen api dot ts oh my god can you believe it so it uh by default it looks for a file called by public hyphen api and i just made a mistake and i made it a typo and did it as publish somehow i'm not sure why employee and now the department should be available so let's see ng build employee so us typo can screw up your entire day thank god it was like just 10 10 minutes 10 15 minutes so now we have employee slash department so this is built and now this is also built so we have say two entry points to our code so our to our library you can say and you will be able to see it here so inside employee you will be you'll see department is something which is in separate folder and now if i go to my public go to my application so i can just go to my app again and here you can see by default employee is not allowed but i can do employee sorry i have given an namespace now so i can say employee slash department and from this i can use department module so this is this is what you can do and i think another one should be lib slash employee and this is because i removed all the code so here should i go ahead and add it again let's let's do it so public discard and this should be available inside here public api so let's move it inside another folder i will not call it as employee let's do something else i'll say emp just to avoid the same name and then it shouldn't matter but say emp and now i can just add my index.ts again small typo so i'll say okay this is the index.ts then public hyphen api dot ts and what else i need is a package.json so let's go ahead and add package.json here i can just package and in public api you can just add those imports which is available here and just remove the slip and export star from public api and src ng package public api and again here i will just say this from club slash emt let's verify again so before we build it public hyphen api and this is index.ts and package.json so i think this is lib slash emp and let's build it again so just to build employee now let's see now it should build employee slash department and employee slash emp two entry points yep and we have of course lib slash employee as well which is our main main library and now i can go to my project and so wherever once you publish it so we will be able to use it as lib slash employee slash and what we need is emp and from here i can just expose or take employee module and from here i can just take him department module hey vasim thanks for joining so we'll be live with wasim in few hours i think another two hours and we will be talking about the azure static web apps so in case you want to join us uh it will be live on both twitch and youtube so feel free to join wherever you want to okay so this is done so now we have two entry points employee slash department employee slash emp and once you publish it you can actually use it like this so you don't have to take everything so if you see uh you try to use lip slash employee it will not allow you to import anything the same way as material does so the only difference is of course material is using basil and i'm not using basil i'm trying to use ng packager so cool so this is how you do it using angular mono ripple and why i moved this so i have to still mention one thing one thing yeah so why i moved this outside employee i mean outside src because of because i wanted to keep my imports like this lib slash employee slash emp and lip slash employees department if it's inside src i have to mention src which actually mark was also mentioning that i should go ahead and yes so mark you can actually refer to one library which i built let me just share this because i'm uh i refer to this whenever i have to configure secondary entry points so this is one which i refer so here uh i don't want to do this and there is also one more reason without about not giving the the relative path here let's say i have some part of my library which is being used internally for example i have some kind of util which i want to access uh outside library as well as i want to actually use it inside the library as well this is where this imports come handy so let's do that so let's take an example i will create an util and this util contains a util.ts and again this three files right so i can say index dot ts and public hyphen api rts and our so this is package.json so i'll of course package.json remains same then public api which exports util and util is empty right now that's why it is complaining my vs code export star from dot slash public kfi and now here i'll just add some utility function so let's say uh probably an ad function this is the this exposes a fan function here so i'll say okay this is x function and else export and it takes two parameters as most of the add function does on the internet so number and comma i will say num2 which is again number and it returns a number cells okay this is returns num1 plus num2 no so we have this utility function which should be available once you do something or export something from util and let's try to use it inside employee so uh that's why i actually name it as this path it's full path so i'll say this is lib slash employee slash util and now i can use this util inside wherever i want to so i'll say okay this is import from employee slash util and this util function has add inside this so i'll say this is add engion init and we will call just add function with two parameters two comma five and that's it so this is of course a demo so let's try to build now employee again so we will have three entry points uh including util so we'll sell in department and then there should be employee and there should be a new till so you can see util is getting a util is actually built before employee because employee depends upon sorry emp depends upon util right so that's that's how you can access it directly here and if i try to give a relative path it will fail so uh this this is something which you have to keep in mind when working with secondary entry points so try to actually give this is this is the path which we have inside tsconfig.json and then slash folder that's why i kept everything inside employee so i can keep my imports clean otherwise of course lib slash employee slash src uh slash lib slash your folder name which will look really uh odd uh lips from src public so do we need to reference the public api so if you see let's let's do that okay so what i will do is i'll just export something from index.ts let's try this out probably the thing is ng packager needs this public api file so let's try to do index.ts probably we can avoid a file so let's write this now so we have department but as far as i remember ng packager directly references yeah i think yep this is possible because we remove public api in case you don't define it ng packager by default looks for public hyphen api that's why i follow the standard so in case you want to remove it remove it but just make sure that in package.json you have entry file as index.ts and it will still work okay so this is how we do it inside uh you are talking and talking about one in src folder let's see src this is empty no this is not needed anymore i just kept it because this does ts file exist here i can remove it so because this test.ts i have to change the path otherwise it will uh again fail probably should not because i'm not running any test but let me just for time for safety right so i can just remove this and then remove src dot leave folder entirely and it will work it is not needed because i have already moved all the files all the folders inside on top of the or root of the folder right or root of the library you can remove it you can delete okay so uh this is how you do it for angular monorepo but as we last time we saw for both i'll push this to that uh we'll see for nx as well so let's see nx has few advantages because we don't need to do all all the steps remain same in case you want to do it for publishable library but there is a hack in case you want to you don't want to do it for publisher library so let's see both probably and it okay so this is i have to update it probably i will do it later on but let's see another one which i had created for nx lib demo i think this should be the one yeah so uh to do public publicity this is an nx monorepo where we uh we have multiple libraries out there so i'll say okay libs to do shared and then to do util i think there was one for okay i think that is not merged yet so probably that's why go to repositories and next why i can see evenly to here because probably i have to do it pull this range pull from main ah okay so i got these three uh libraries which we saw last time so uh the way i created these three libraries was first one which i don't want to build because remember in when you go to nx nx dev tools you have some advantages when you create a buildable library or you can cache it so in case you have large application and you want to split it into or split your entire code base into multiple libraries the advantage which you get is the caching so you can actually build libraries cache it and then you can also enable the incremental build for your application i think it's really well documented on nx dev tools an extra dev uh getting started angular and there is a section for incremental build and this is what i was talking about so you can actually build libraries and then you can enable the incremental build for your application which saves a lot of time in case you haven't a big application which takes a lot of time to build they have created two builders angular webpack browser and uh angular ng packager lite so all the libraries should use this one ng packager lite and application should use angular webpack browser and for server purpose you should use angular web file server so this there are few changes of course you need to make inside your application otherwise everything remains same and now let's go ahead and see so first one was of course without any build process then we had to do shared which was i think let's see package.json [Music] okay so i think shared was something which we need to publish is it okay it's quite actually it's too weak so i just i'm trying to remember okay so this one was publishable an excellent demo to do shared and then to do common was something which was buildable i can build and use it locally so uh in nx what you can do is you can also do something like this which is also possible in case you don't want to build and publish it so let's take an example of to be util src lib and let's add one more file so i'll just say this is a a function probably not named let's not name it function a calculator dot ts and i can add some function here so let's export function and i'll just start num one which is type of number and num 2 which is again type of number and i can just say return 1 2 okay so not problem so this is this is there are two files calculator and util and if i go to let's see where we had used this one get status so you can see i am not i am not able to access another function because i have not imported it or it's not added into our on the public api file right so it's not exposed till right uh so i cannot access calc.ds but i can do something like this in in nx so i can go to ts config.json i'm not saying i'm not saying you should do it but i can do something like this i can just stop exporting uh start importing stop importing everything from lib slash util and here i can just say take src lib slash star so remember this so i am just stopping all the imports from to do util directly so i cannot say just go ahead and use an excellent slash demo hyphen demo slash to do util which we did here uh let's go back to the code base here so you can see it uh it is already giving me error that i cannot access it and then i can do something like this so it's kind of having secondary entry points but without doing anything i mean you don't have to build and publish it you can just make some changes to your paths so uh again let me show you what what are the changes which we made so we said okay two two slash util earlier it was flash to do till and then i can add it slash star so i'm just disabling the entry points or disabling everything uh which can be imported from to util and then similarly here i am saying go inside lib and look for all the files done so kind of you have secondary entry points so you uh of course when you try to move it inside a buildable library or publishable library this will fail this will not work but in case you don't want to have buildable or publishable library go ahead and use it i think should be easy to do it i mean so you can just use the function and you don't have to use even your index.ts i can just remove it it's not used anymore what is the reason to export all the secondary entry points from the root public api okay so uh we don't have to do anything we uh everything but what we can do is we can just add whatever needs to be used internally i just i think i was learning at that time so i added everything just to make sure that every everything builds but you don't have to and now let's go back to see how we can do it so for a buildable and publishable library the step remains same as we did for the angular libraries so we have to of course go ahead and add this one i can just go to slash share i can just stop the export from here and here also i can just do src slash star or i can just do shared slash star so based on how you want to keep your import so if remember if i say src slash star i have to uh while referring it internally i have to say lib slash to do shared slash src slash whatever entry points we have so i like to keep it clean so i think you should not include src in the path same for here so i cannot access any from anything from to do shared now so if i see to do shared mod let's see if i have used it anywhere yep here it is and it is already complaining about okay i cannot do this and i have to i can but i can do this src slash and then i can just access lip because uh remember in nx the one advantage which you get is you don't have to build everything you can just use it as it is so i can just go to uh now let's fix this imports so here to do i'm using 2d shared so i can go to to do shared i can just move this to do list outside same as we did for angular libraries so i can just say okay this is hey mr camp i see you can just move this to do shared to-do list and i'll just move this here index.ts i'll just remove it to do app lib let's remove this as well src setup i'll just move it outside as well so so to-do list and uh ng package src slash as we have only one file let's see if i can just do something like adding an index.js here and export start from component export star from module and then src rather than src i can do to do list okay so let's try to build to do shared i think it's unbuildable library to do shared here we can see source root and into build to do shared hmm so it says to do shared module which one i'm trying to build okay this okay cool let's see so it says cannot find module to-do list component okay i have to probably change some imports looks like this one okay so ah this is built now and i can see so you have ngex build to do shared let's try to use it now so i can just go back to the code which i had used here and to do shared slash why it is going to src because it does not contain anything lib any slip demo um demo to do shared okay i i think i have to add an index.ts or public api so i will just add index.ts here and then from here i'll say export star from uh nx lib shared slash to-do list and ng packager i can just change this to index.ts dot slash index and let's see now cool so uh entry point next to-do list which is required doesn't exist so we have to add one package.json so let's add that as well package dot json and then we can just add the same code which we added earlier so i'll just put that jesus now done so it will be added as a secondary entry point and did i made a mistake okay because of course public api does not exist so i have to change this to index.ts and let's see which file is not saved okay app module so almost same step same steps you have to do it for nx as well the only thing is you can do it without building your library so you don't have to mention dst slash whatever path which is available here and now once it is built i can go to google shared and slash index white is showing index let's see libs to-do list index.ts which is okay because i am exporting this probably that's why okay let's see if i can just keep it empty and package.json index.ts okay cool let's try with this because i don't want to change my path like this app module so i don't want to use this but i want to use to do utils so okay what's there so sources through building entry point failed to get symbol for entry point to do shared um see if i can make it just an empty file index.ts okay i think this range slash 2d utils a to-do list and that should build okay so done so we have from this to this and okay so to do shared nx slip demo to do shared let's see next slip to do shared slash let's go back to the path so to do shared slash to do slash slash start export star from total list ng package is this okay let's try with public python api dot ds oh let's add a public iphone api after this and let's move this to here package.json i'll just use public iphone api.es and let's just say export star from dot slash public api let's try with this now i don't think so there should be any problem with build but let's see how we can import it okay still to do shared slash this one so let's do one thing i'll just add a public hyphen api dot yes here and then use to move this index.ds in g package public hyphen api and let's see so it says probably this might be something to do with dsc folder but i doubt that to do shared so see libs dht lives and then we have common to do shared to-do list is available here so why it is not available because of this is really strange because it should not be like this i should be able to access the folder but to do shared slash to do list this is what i should be able to do slash iphone list okay so it is available but somehow the intellisense was not working so it goes to public api so i think this is good so you now have configured the secondary entry point inside nx library as well and this is the steps are similar so as as we saw you can actually in case of you something like util you can directly disable it from here you don't have to actually configure secondary entry point for buildable and publishable libraries the steps are same as of angular as we did for angular mono repo you can actually refer to uh our repository which is available here so let me just show you so this is uh ngx builders nzx bulma so when i was learning about secondary entry points this is i i did this project and i configured the secondary entry point so uh this is a good and good i would say in case you are trying to learn how to configure it you can just refer to this library on this package you will be able to figure out there are blog posts which i will suggest so there is one from thomas [Music] medium okay so let me just check if i'm entering his name properly oh it's stressing logs so you can refer to his blogs uh their faults and blog thus the best way to architect angular libraries this is also a good blog in case you are trying to trying to create your own library so i think goodness uh read this read this library and there was one from another friend of mine so you can also refer to what is that angular libraries uh kevin so another one is from kevin so in case you want to uh also i'll have a little bit idea about ng packager and how to do it and this this is a really good library a blog post in case uh you can also do this read this how to create a fully traditional liking library or there was one more kanji samurai and this is good and this is these are two great articles which i will suggest in case you want to go ahead and configure or make your angular libraries researchable so this is it for the day so this code will be available on github so in case you want to refer them i think the best is just refer the nzx builders nzx bulma and otherwise in case you want to see this code this is also available on my repository so you can just go back go to my repositories and nx and xlib demo so this is what you can refer to added and let's do a git push okay okay cool so uh you can refer ngx nx lib demo and another one was i think of with angular but it's okay you can for angular 1 you can refer to the nzx pulmonary i think that's that's good enough so uh this is it for today now and we will be live soon in few hours with wasim we'll be talking about azure static web apps so and the cli tool which you might have seen on in case you are using a static web as your static web apps you might have seen on twitter they recently released the cli for the same so we will be talking about it as well so see you in few hours in case you are available please join us on twitch or youtube wherever you want to

Channel: Tech Talks With Santosh

Views: 685

Keywords: Angular, Angular Libraries, Live Programming, Computer Programming

Id: FH3i0yKOi8U

Length: 75min 52sec (4552 seconds)

Published: Sun Apr 11 2021