Angular library tutorial

[@BlackBoxTech]

Hello Everyone.. Please let me know if you want me to add any specific frontend tutorial..

[@BlackBoxTech]

Hi Felipe please check my channel it's already there

[@BlackBoxTech]

@Felipe Baptistella Vieira here is the link kzbin.info/www/bejne/ipK9Z2SKZqyLm7s

[@BlackBoxTech]

@Felipe Baptistella Vieira can you pls elaborate a bit. Do you want your library holds the scss files? You don't want your styles to be compiled to css?

[@BlackBoxTech]

@Felipe Baptistella Vieira you can create any folder and keep your css. Even you can create more components inside you library. Use ng g ‌c yourlibraryname then it will generate comonent inside your library. For scss you can have a main ex. Style.scss which will be connected to your main lib and in that scss file u can import other scss files. Is that something u wanted?

[@asmaamostafa6242]

hello, ser first thank you for this great tutorial. but I would like to ask where did you use this command npm install ./dist/weather/weather-0.0.1.tgz? what is the file path? i getting an error says " Refusing to install package with name "rewaa" under a package npm ERR! also called "rewaa". Did you name your project the same npm ERR! as the dependency you're installing?"

[@Vlad-nn5ht]

I found the solution from your video 2 days. Thank you very much!

[@mohamedibrahimm1944]

Good tutorial with a clear explanation in a short duration

[@NanoSpicer]

This must've been one of the simplest, complete and clear tutorials about Angular

[@Scottyis88]

Just what I needed to understand how to share components between projects.

[@hamzaakbar5321]

Very helpful you just made my life easy really appreciated Thank you so much do explaining in details

[@manojtm7057]

Clear Instructions , Nice walk through about the topic.

[@rajkumararora7366]

Good video. Recommendable for others due to its simplicity to understand. Thank you very much for your efforts.

[@scottfwalter]

Great video. I'm in the process of migrating our AngularJS component library to Angular and this was very helpful.

[@BlackBoxTech]

Thanks a lot!

[@srinathsathyanath7435]

Highly underrated channel 🔥

[@strxross]

Hey, great tutorial! Exactly what I was looking for in a short video, thanks :)

[@0711sandy]

Explanation is to the point.

[@BlackBoxTech]

Thanks a lot Sandeep

[@solenoden]

Thanks for the tutorial. It was super helpful, clear and to the point.

[@hfzkq]

Hello, that was very useful with great tips, thanks lot, plz continue

[@BlackBoxTech]

Thanks a lot for your kind words.

[@larryamisola]

Great tutorial! Very clear and helpful. Thanks for sharing this video. Looking forward for more Angular tutorials to come. I appreciate if you can share a tutorial about Angular workflow. Like incorporating husky, prettier and stylelint --scss inside this monorepo (Angular workspace). Thanks in advance.

[@BlackBoxTech]

Thanks Larry!!! I will surely create one on this line....

[@dhanshriautade7575]

Hey, Great Video !!!! very helpful

[@mjohnson2807]

Good video. Could I make a suggestion that you explain your reasoning behind why you do what you did. Why is just as important as how, especially when determining if I should be doing the same thing in my project.

[@BlackBoxTech]

Thanks a lot for the suggestion! It really help!!

[@oleersoy6547]

Really great video - Thanks!!

[@CodingAbroad]

Please could you produce a tutorial on how to make a library for a directive. For example:

[@div7012]

Thank you for sharing.

[@neeleshdubey5355]

Great bhai

[@wilderperozo2050]

Very useful your video, thanks

[@lucassilverio720]

great man! very thank you for that!!

[@easy-draw]

very usefull video rxn, 700 hundred like was from me :)

[@CodtachiYoutube]

THANKS, MAN, YOUR VIDEO WAS REALLY HELPFUL FOR ME...THANKS AGAIN. _^_

[@AnkurRai02]

Thanks for sharing this, I have a question, if I use angular material in my library component then how to automatically install material dependency in the consumer app

[@kievandres]

Thanks a lot!

[@itsimpl6257]

Very useful video and to the point. Just one suggestion is that you might wanna go little faster.

[@winnemucca-sk5392]

@BlackBoxTech why did you need to cd to dist folder before publishing?

[@srikkanthank]

Nice tutorial.. In Windows machines,, the command line is slightly different,, ng new weatherwidget --create-application=false

[@joelmatthias]

Wow, they're not lying when they say it's hot in Atlanta

[@ianaustria8868]

thanks, wonderful video. I just wanted to know how would I be able to use .npmrc instead of using --registry argument when using npm publish?

[@shravyanadig4514]

angular UI library nebular are there any tutorials ?

[@piyushsawalkar5961]

how to add external JS into our library?

[@sasoft8116]

good job

[@sathyarj5060]

can you use the component from the the library in any module(feature module) other then app module(root module)

[@BlackBoxTech]

Yes you can use that in other module as well

[@kisanpawar7144]

If we have multiple web components in our library? can we create the service and share

[@digitaldaridesatv1545]

Hi, Very good tutorial! I'm starting using this in my project and help me a lot. Now I'm struggling using a SERVICE from library. I can not use weather.service and also a new service I created on library. Do you have an example make a SERVICE in library? Thanks alot

[@BlackBoxTech]

Always think your library should be as much as dumb as possible and driven via inputs. So I would suggest to call the service from your main app and pass the result to your library. You can save number of calls from this

[@kisanpawar7144]

Where should i create global CSS in application

[@mailaraja]

I need to know about Angular 8 building a library with assets

[@罗磊-g5x]

Any news on this?

[@rahulvyas121]

HI, Nice video, can you let me know how we can use assets in library and use in project folder

[@BlackBoxTech]

Yes with new packgr its now possible to have assets within library

[@l.e.nichols9382]

If i had another library i wished to add beside weather could i just install it into the same project? so in your project you have "weather" and "weathertest" as your demo app that runs your weather libary. What if i want to make another library like "table" so i'd have two, "weather" and "table", is that possible? Will they be compiled into the dist folder together?

[@BlackBoxTech]

Yes that's correct you can use multiple!

[@dhanshriautade7575]

Hello my one question for you this library i will use another application also?

[@BlackBoxTech]

Yes its for the same purpose

[@bigbuck4966]

Is there any way we can publish this library to gitlab?

[@BlackBoxTech]

Yes you can if they support npm publish

[@l.e.nichols9382]

What was the private NPM repo you use? I need something that we can use organization wide and not available to the public.

[@BlackBoxTech]

it's called verdaccio but for Enterprise solution use something like Nexus or artifactory

[@l.e.nichols9382]

@@BlackBoxTech thanks!

[@ianaustria8868]

@@BlackBoxTech what do you think about github private repository? Would it simply be changing the --registry?

[@soumyajeetbai]

While creating the library i have added my assets folder after the build , in side the dist folder i am unable to find my assets folder and if i want to use my angular library inside my application project i am unable to get the images . Please help any suggestion. How to add the assets folder images and use it

[@BlackBoxTech]

don't add anything in dist folder as it will always overwrite after a build. keep your assets in your assets folder only and in angular.json file make the config so that after build it will be inside your dist

[@TamalKundu]

Hi, Thanks for this awesome video. But I would like to know that how do I upload an angular package to NPM . So that I can use it from anywhere. Even anybody can use it like other NPM package. And which will add directly, not "file:/dist" type. Thanks once again.

[@BlackBoxTech]

Hi Tamal this is same as I shown in the video execpt you need to login through your terminal using npm login

[@TamalKundu]

@@BlackBoxTech thanks. Let me try..

[@ferhadothman2376]

Hi, when I use variables inside the component like: name: string; or @Input() id: string; I'm getting three warnings: WARNING: Condition always false [0:77,8] WARNING: Dropping unreachable code [0:79,8] WARNING: Dropping side-effect-free statement [0:77,8] I tested it in a blank project. Have you any Idea for those Warnings?

[@BlackBoxTech]

If you can share the code in GitHub I can look at it.

[@kisanpawar7144]

@@BlackBoxTech Where should create global CSS and use