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!
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.
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.
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.
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 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)
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 ?
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
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
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?
✖ 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.
Love the fact that you took 5 minutes to explain Angular libraries. That was really well explained and to the point. Thank you!
Thanks for your feedback. Glad you liked it!
Thank you for shaing, I've commented on this video in the past but I always come back for a quick refresher!!
You are so welcome!
Great video. Keep making videos on Angular.❤
Dear Profanis. Great piece of communication work and what a brilliant tutorial. Thank you.
Thanks for your feedback Bjarte. Glad you liked it!
Quick, but really good explanations.
Thx Fanis!
Glad you liked it!
Very well explained. Thank you!
Thanks Man !! Great Tutorial !!
Thanks! Glad it helped!
Thanks Profanis, your explanation is very clear and easy to understand..keep it up the good work.. =)
Thanks for your warm feedback. Glad you liked it!
Great explanation Profanis!
Thanks for your feedback Miguel. Glad you liked it!
Awesome video, very well explained and it's less than 6 minutes!! 😀
Thanks for your feedback! Glad you find it useful :)
Nicely presented!
Thank you!
Glad you liked it!
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!
Thanks for the feedback and your suggestion. That's a good idea actually :)
Very well explained. Thank you.
Thanks for your feedback! Glad you liked it!
Really liked this video... Thankyou!!😊
So glad!
Thank you, very nice tutorial
Thanks for your feedback. Glad you liked it!
Thank you so much, it's greatest!
Thanks for your feedback. Glad you liked it :)
Great explanation. Thanks
Great explanation.
Great material I highly recommend
great prof..
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.
Thanks a lot for your feedback and the suggestion :)
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.
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.
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.
@@CodeShotsWithProfanis Is it possible to use a global CSS to be use by the libraries and the applications?
@@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)
What a clear explanation!
Do we ever need to run npm install in the library before we build it?
As soon as the library it's part of your application, I do find the reason to run npm i in the library itself
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 ?
what tool do you use for design on screen?
My OS is kubuntu and this is a built-in feature which called "mouse marker"
Thanks. How does watch mode work with multiple libs?
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
how can I have that colorful terminal ?
I am using oh-my-bash with the theme "brainy"
Cool thank you
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 :)
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
Hello sir, is it possible to use the lib without building it
You can define in the paths of the tsConfig the public_api of the library you want to use.
Thanks for this useful video, how we can publish this on npm?
This will be one of the next videos. Stay tuned ;)
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?
Nice one but what about dependencies? For instance the library uses angular material.
I will cover this in one of my next videos
Stay tuned ;)
how to create external library
very nice....
Thanks a lot
✖ 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.