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

[@drakZes]

Love the fact that you took 5 minutes to explain Angular libraries. That was really well explained and to the point. Thank you!

[@CodeShotsWithProfanis]

Thanks for your feedback. Glad you liked it!

[@miguelperezpalacios]

Thank you for shaing, I've commented on this video in the past but I always come back for a quick refresher!!

[@CodeShotsWithProfanis]

You are so welcome!

[@bjartemicheljensen8146]

Dear Profanis. Great piece of communication work and what a brilliant tutorial. Thank you.

[@CodeShotsWithProfanis]

Thanks for your feedback Bjarte. Glad you liked it!

[@Nabulio85]

Quick, but really good explanations. Thx Fanis!

[@CodeShotsWithProfanis]

Glad you liked it!

[@ShubhamSingh-bm4ig]

Great video. Keep making videos on Angular.❤

[@ramyabalasubramanian6916]

Very well explained. Thank you!

[@JaiGtz]

Thanks Profanis, your explanation is very clear and easy to understand..keep it up the good work.. =)

[@CodeShotsWithProfanis]

Thanks for your warm feedback. Glad you liked it!

[@edgardoni35]

Awesome video, very well explained and it's less than 6 minutes!! 😀

[@CodeShotsWithProfanis]

Thanks for your feedback! Glad you find it useful :)

[@ajaykharat9226]

Thanks Man !! Great Tutorial !!

[@CodeShotsWithProfanis]

Thanks! Glad it helped!

[@MiguelPerez-em8gs]

Great explanation Profanis!

[@CodeShotsWithProfanis]

Thanks for your feedback Miguel. Glad you liked it!

[@johnstypa2365]

Nicely presented!

[@CodeShotsWithProfanis]

Thank you! Glad you liked it!

[@octavian3033]

Very well explained. Thank you.

[@CodeShotsWithProfanis]

Thanks for your feedback! Glad you liked it!

[@binurajtech9663]

Really liked this video... Thankyou!!😊

[@CodeShotsWithProfanis]

So glad!

[@ANJANALAKMAL]

Great explanation. Thanks

[@hamzaakbar5321]

What about the npm plugin to use it in the app, Plugin his component like abc and we want to use that component selector in over app how it will possible ?

[@ahmetozturk5178]

Very nice! I would like to see also your approach how you would transform this library component into a webcomponent later. Thanks again for the great content! So clean and simple!

[@CodeShotsWithProfanis]

Thanks for the feedback and your suggestion. That's a good idea actually :)

[@julianosoder4405]

Thank you, very nice tutorial

[@CodeShotsWithProfanis]

Thanks for your feedback. Glad you liked it!

[@suman6476]

Great explanation.

[@damiankacprzak8322]

Great material I highly recommend

[@costagmc1]

great prof..

[@demidovmaxim1008]

Thank you so much, it's greatest!

[@CodeShotsWithProfanis]

Thanks for your feedback. Glad you liked it :)

[@peymanta8923]

Thanks. How does watch mode work with multiple libs?

[@CodeShotsWithProfanis]

You can set in different terminals a watch mode in each library. Say that you have the library "my-lib" and the library "another-lib" You should: ng build my-lib --watch ng build another-lib --watch

[@xavierl2216]

Hi, Do you have a sample where the service class is abstract because I do no see it working ? Thanks the video is simple and clear :)

[@CodeShotsWithProfanis]

So, if I got you correctly, you want in a library to create an abstraction and use this abstraction in your app. Right? If so, it's a good idea to create a video for

[@Applekendee]

Really good guide, I was able to set up my Angular Library, however what is the best approach to setup a common models. I will use it in the Library and in another workspace application.

[@CodeShotsWithProfanis]

In this case the models shouldn't be in the application but rather in the library. If however you are about to use the models from another library as well, then you can have the models in a completely separate library.

[@Applekendee]

@@CodeShotsWithProfanis Is it possible to use a global CSS to be use by the libraries and the applications?

[@CodeShotsWithProfanis]

@@Applekendee The global CSS should live in the library. Say that you have a custom UI library that has some re-usable components. In that library you can have the global CSS where it's gonna be referenced by itself and the application(s)

[@luusyphre]

Hi, I'm trying to import the my-lib into a separate project. So after creating the lib, I do "ng new test-app" and doing an npm install from the local path, I import MyLibModule from "my-proj/projects/my-lib/src/public-api" but when I put the tag into the html file, I get the error: "Cannot read properties of undefined (reading 'ɵcmp')" Any idea what I'm going wrong?

[@dotnetist]

how can I have that colorful terminal ?

[@CodeShotsWithProfanis]

I am using oh-my-bash with the theme "brainy"

[@dotnetist]

Cool thank you

[@sofiachaveshernandez2373]

What a clear explanation! Do we ever need to run npm install in the library before we build it?

[@CodeShotsWithProfanis]

As soon as the library it's part of your application, I do find the reason to run npm i in the library itself

[@dennis87ist]

what tool do you use for design on screen?

[@CodeShotsWithProfanis]

My OS is kubuntu and this is a built-in feature which called "mouse marker"

[@boyefrederic4716]

Hello sir, is it possible to use the lib without building it

[@CodeShotsWithProfanis]

You can define in the paths of the tsConfig the public_api of the library you want to use.

[@WesFanMan]

Nice work! I appreciate the effort and excellent content. I would like to suggest that when you are highlighting a screen area, use a yellow or white line. Red on black is very hard to see.

[@CodeShotsWithProfanis]

Thanks a lot for your feedback and the suggestion :)

[@matheusjordan6031]

Thanks for this useful video, how we can publish this on npm?

[@CodeShotsWithProfanis]

This will be one of the next videos. Stay tuned ;)

[@whoopigoldberg8121]

I see what you can also describe how to use the "paths" option from tsconfig. It's need to link our library code via import links and debug in realtime.

[@g-luu]

Nice one but what about dependencies? For instance the library uses angular material.

[@CodeShotsWithProfanis]

I will cover this in one of my next videos Stay tuned ;)

[@manishmunjal-jeenasikho]

how to create external library

[@thesweetvishu]

very nice....

[@CodeShotsWithProfanis]

Thanks a lot

[@saibhargavp5120]

✖ Generating FESM2020 ENOTSUP: operation not supported on socket, link 'D:\Sai\dummy-project\.angular\cache\15.2.10 g-packagr\tmp\c5e6e4e2' -> 'D:\Sa i\dummy-project\.angular\cache\15.2.10 g-packagr\content-v2\sha512\bc\a9\dc07ebc8b3870c72446c23744c06ec33dcfbd4161d1504b5bf6585 2498e31f5c3aad19c107ea3773c2d72e5cfaaff5cf14737326d7a3d661e0928fec3988' Getting the above error while running the 'ng build conv-lib' how to resolve it.