Create Angular Component Library and Publish to NPM in 2022 - bonus - Nx

[@jae5577]

Awesome tutorial very clear and concise explanation. Please do more tutorials on Angular and React please

[@techtacious]

Thank you! I'll definitely be putting up more videos on Angular and React soon. Please stay tuned :).

[@dylanv.dmerwe5960]

Standalone components should also make this process much easier to understand :)

[@RenierVeiga-su4sd]

Best video on this topic. Would benefit from timestamps to segment the video.

[@techtacious]

Thank you! I'll make sure to add timestamps. Thanks for the suggestion!

[@armaandhir]

This is so useful, Thanks.

[@techtacious]

Glad you found it useful. Thanks for watching!

[@mostafavii]

It was so helpful, thanks

[@techtacious]

I'm glad I could help.

[@TVishnuvardhanReddy]

Can you create a video on using the angular component library in React application inside nx worksapce ? or please reply me with any reference video links Thank you

[@techtacious]

Hi there, you can't use Angular components in a React application.

[@matheusjordan6031]

Thank you !

[@techtacious]

Thanks for watching!

[@CrusaderMen]

Hi @Techtacious, Thank you for sharing your knowledge this is helpful!. I have a situation where I want to publish a library that depends on multiple libraries that not shared on npm. is it possible to do that without publishing every library? Thanks!

[@techtacious]

Hi, thanks for watching ! I believe you should still be able to publish the one library without needing to publish the non-npm libraries, as long as your npm library has access to the non-npm dependencies at build-time. The bundled package would have everything that it needs and wouldn't need to depend on NPM.

[@kenlnetherland]

Was there a build step in between somewhere? I had a mental disconnect going from the coding part to the "libs" folder.

[@sahajarora2162]

Hi, I'm not quite sure what part of the video you're talking about but to summarize what's happening: I've created a libs folder where I intend to store my libraries, in this case the component library. The library can be a regular angular app / package that contains components. If you create a fresh angular project for the component library, you will get a "build" script out of the box which you can run using the command "npm run build" to build the project (in this case the component library). I hope that helps.

[@kenlnetherland]

@rora2162Sorry for not getting back to this. I figured it out. It was my first packaged component so I was unaware of the conventions at the time. Was used to 'src/app' -> 'dist' convention

[@dylanv.dmerwe5960]

Bit stuck on where to actually start. You're starting from having a monorepo already available - how would you start from blank for someone who wants to create a component lib?

[@techtacious]

Hi Dylan, You can create an directory for your component library and then run npm init to initialize it as an npm package. Npm would ask you a bunch of questions to know more about the package that you're creating. Once answered, you should have a package.json file ready in the directory. You can then start adding the required node dependencies (such as angular) and also your component code. Once you have that, you can follow the video to see how the library can be published to npm.

[@ektasingh6635]

just a question once you have published it the lib folder that you created can be removed now from your solution right?

[@techtacious]

I'm not sure if I understand your question correctly but I'll try to answer. The lib folder is the source code for the npm package (library) and if you want to keep maintaining / updating the library version in npm, you'd need the source code :) .

[@tumultex]

is it possible to sell an angular component library with this method? If yes any advice on how? Cheers

[@techtacious]

Yes it is. One way to do that is to use npm authentication and provide access to only those who buy your library (from whatever platform you sell it at). Once a user purchases your library, you can provide them with an access token for npm.

[@tumultex]

@@techtacious thanks for your reply!

[@VinitNeogi]

Using this approach with Nx can we consume packaged version of lib1 from npm in lib2, where lib1 and lib2 are part of same monorepo

[@techtacious]

Hi Vinit, yes I don't see a problem with that. Once deployed to npm, a library is independent and can be consumed in any node project, regardless of that package being in the same monorepo as the library itself.

[@VinitNeogi]

@@techtacious thanks

[@LarryBuntus]

Since this doesn't come with a git repo, does it mean you are paying for the organization account?

[@techtacious]

Are you referring to Nx ? If so, then the answer is No. I am not paying to use the basic (plenty) features of Nx.

[@LarryBuntus]

@@techtacious no I mean Npm

[@ShubhamKale-j9s]

You are not publishing the library on npm, you are not installing it from the npm if i want to use my code in my single project then that is the sense to make that libraty

[@techtacious]

Not sure what you mean but if you watch the video, you'll realize that I am publishing the library to the npm registry. It is installable by any project (or sub-project) that's interested in utilizing the library. Thanks for your comment.