Create Your First Angular Library - Nir Kaufman

[@ciprianionutiacob7883]

I think it's worth mentioning that you can do ng build magic-lib --watch=true and that will watch for changes in lib and automatically update the application.

[@tawandakanyangarara9248]

Dude you are a champion ✊🏿

[@boris_js]

I did the same for a remote app in my machine through npm link. This command works whenever i make changes in my lib, it reloads my remote app but does not reflect the latest lib changes. I have to ng serve everytime on the remote app to reflect the changes. Any suggestion on this

[@user779hjg45]

Thank you!

[@quilagameplay3161]

very usefull indeed

[@elazarzadiki3059]

use npm link on both your dist/your-library folder and your root folder, then ng build your-library --watch and ng serve, changes will be updated automatically.

[@programmercouple]

Till date, I use this video every time I want to create a new Angular Library

[@EliRabinovitz]

First time I've seen someone program like me. Define names once, copy paste after. Thanks for a great tutorial

[@doron99]

אלוף! תענוג כמה ידע, תודה רבה!

[@MikeBritton]

This is the best Angular Library Development video out there right now (03/10/2021). Nice work

[@nirkaufman101]

Thanks!

[@paolatellez293]

Explanation is to the point, very clear and helpful. Thank you Nir Kaufman.

[@abhimalvekr127]

After watching this super explanation, I am a fan of Nir Kaufman!

[@rembautimes8808]

Great talk Nir. Was watching your video while waiting for some noodle 🍜 to be delivered.

[@SahanSerasinghe]

Thanks Nir. Awesome presentation!!! This is exactly what I was looking for

[@jasonwilliams_escapeimagery]

An excellent talk. Very informative.

[@mohammedaminaimeur6892]

Amazing video, so clear and straight forward, I would've loved to see the rest of it though :(

[@franco1g]

Ditto. I'd like to see the install and consumption

[@adeptairsoft6460]

Great tutorial! Thank you 👍

[@ip2pi]

Great tutorial, nicely explained (+ learned some new capabilities in angular :) ) Toda !!

[@antoniofcable]

Very nice explanation. Congratulations. Very useful for me. This is what I was looking for.

[@nirkaufman101]

Thanks!

[@aram5642]

Would be cool to watch a video on setting entire CI github pipeline too :) BTW. if we cared about the `nk-` prefix for the library, by the same token we should also use `nk-mark` class instead, to try to avoid naming clashes.

[@sakethpavan4901]

Great explanation!

[@dachd]

I like this man!

[@nirkaufman101]

Thank you for your feedback!

[@mdrizwanansari]

felt like 'Cisco Ramon' is teaching me

[@pablomoreno4495]

jajajaja!!! you have a point bro ! 🤣

[@prem101434]

We can use storybook to check the library right?.

[@SelimAbidin]

For those who have some problems. Make sure that you use NPM or Yarn. Not both together. If you are going to use another package manager, first remove package lock file.

[@pranavbhatia6637]

Really helpful video. Thanks!

[@brabenetz]

First at all: Thanks for the video! It helped me a lot! But at 13:30 "Import library as regular module" I see two problems: - Running the testbed app will change the content in the dist-folder (Maybe a newer problem which only exists since angular 9 with Ivy ) - Auto-Restart during development is also not available So I prefer the less realistic version to integrate the library directly from the src folder. What you think?

[@yasenbonev7879]

I don't remember where exactly I saw it, maybe the documentation, but if you're importing the source code of a library you're in for a hell of a ride, there is a reason why libraries are packaged with ng-packagr and applications are not. These difference will kill your brain cells.

[@brabenetz]

@@yasenbonev7879 At least one concrete point to your paragraph would be nice :) What is you source? what are the reason you speaking of? What you mean with "hell of a ride" or "will kill your brain cells". Your comment is really very blurry :)

[@ashishnamdeo6879]

Really nice explanation.....

[@nirkaufman101]

Happy to hear it :)

[@swatijoshi7614]

Hi Team, Great tutorial, nicely explained concepts and reasons :) Thank you. Do we have a further part after this video this seems some more part is missing?

[@sasagasparovic9351]

I want more tutorials from that guy :D

[@lupinasp]

Thanks Nir, great presentation! I've got an error in ViewEncapsulation part. If someone needs here's how to fix it (Angular 8): Change: import { ViewEncapsulation } from '@angular/compiler/src/core'; To: import { Component, OnInit, ViewChild, ElementRef, ViewEncapsulation } from '@angular/core';

[@akshaychavan6158]

Nice explanation, How to use that package in another application?

[@nirkaufman101]

Just npm install like any other package :)

[@jose-chin]

@@nirkaufman101 but that is after publish to npmjs.org right?

[@nirkaufman101]

@@jose-chin no need to publish to npm at all. All local. Use npm link

[@rajathvenkatesh3253]

I am looking to share services and make them as singletons to be used between my shell and micro front ends in angular. I use angular architects module federation! I have multi repo MFEs so NX share libraries would not be a good option. Any advise?

[@LongTran-nm3ne]

Hi sir. What to do next with .tgz file??

[@robertbryan6485]

Someone mind explaining why the library's component needed to have the view encapsulation set to none? Setting a component's view encapsulation to none here seems like a code smell to me.

[@manjaykumar-jb7yp]

How to use Primeng as a dependency in custom angular library which is on angular version 15?

[@arinmovsesian]

i cant create multiple library :( get this error (does not support the 'build' target)

[@nirkaufman101]

Drop me an email. show me some code :) I'll try to help

[@unnhao]

24:32 I want to know about this extra configuration, but I can't find which meetup talk this. :(

[@NicoDeathend]

I take a look quickly over this video kzbin.info/www/bejne/oanPdXmNmNyNmZY I think it may be, checkout minute 15:48

[@angulardeveloper331]

This is great! Very useful. Thanks man. Question: Let say in this new library I'd like to subscribe/emit new data to a behavior subject from app.service.ts, how do I do that? I tried it out by using: @Inject('AppService') private appService: any within the library, (because in AppService, it's injected to the root as @Injectable({providedIn: 'root'});, and I did put {provide: AppService, useValue: AppService } in AppModule), but I received an undefined error: Cannot read property 'subscribe' of undefined. Is there something I missed in dependency injection? I'll keep looking for an answer and come back here to post the solution if I found it. Thanks.

[@MattDuarte11]

This is dope!

[@zorglob007]

Nice video but i tried to make an angular library as a design system library and when i build the library, i don't have css or assets files include. Have you got any idea how to resolve this problem ?

[@nirkaufman101]

Shoot me an email: [e-mail]

[@BeautyHolicFamily8652]

Nice channel

[@subba18]

Can I build a prod app with many libraries like this for dynamic loading.. Will it work for say 50-70 libraries?

[@kampkrieger]

did it as you did, but it can't find the lib (magic-string). no clue what to do... What changed?

[@kwentinn]

great ! thanks mate !

[@nirkaufman101]

Thank you!

[@amitapatiyal3228]

Is there any way to add external script in library. The way we have in application

[@sachinpatil2253]

Have you find any solution to add external script.

[@arpitmalaiya2825]

While using icons in the library , i was unable to get them in the app in which i was using library. Can anyone help me with it?

[@msasoftware]

I was presented with an error message when compiling the library and resolved it at this point with the following: export class MagicStringComponent implements OnInit { @ViewChild ('content', {static: true}) content: ElementRef Angular "@ angular / cli": "~ 9.1.0",

[@ManojKumar-rc5ze]

Awesome ... Thanks for sharing this information

[@GalloFranco]

Someone find the complete talk?

[@daniela.parionac]

How to update an Angular library project? if I use ng update @angular/core@12 @angular/cli@12 --force, this command is updating my Angular main project but not the library project. Which is sub part of the main project, I want update library project, help me please

[@MrRorypam]

This is Great tutorial. But i feel that i am facing the issue in angular9. that is after importing and adding MagicStringModule inside the imports like below imports: [ BrowserModule, MagicStringModule ], I am finding below exception Inspection info: Reports any symbols that are declared, imported or exported by an Angular module that are not modules, components, directives or pipes or can’t be used in the context of the property. Please help in i this regards.

[@MrRorypam]

@Nir please reply on this

[@crazy_coder]

Can i use third party library in my angular library?

[@vinodkumar-yr4vd]

Have you find any solution to this?

[@ksaweryglab]

Thanks Nir for this very insightful video, BUT when I run yarn serve demo-app, then apply changes to the library, and then expect these changes to be visible in the app - I get the compiler errors telling me that the compiler cannot find library module - probably because when you ng build library - it will first remove the contents of the lib in dsit folder, triggerring the error, and then build it but at this stage the compiler that runs on the application is stuck on the error. So in my case I have to: - apply changes to library component - run ng build library - to populate the dist folder - stop and restart the ng serve demo-app --> something you don't have to do in your presentation So my question is - anyone else has similar problems to mine? I double checked and I import the library in app.module.ts in the same way Nir does.

[@ksaweryglab]

Ok, I have a workaround - actually working even better. I run two commands: ng build libraryName --watch=true ng serve demoAppName --port=4300 First command rebuilds the library into dist folder every time you change the component. Second command runs the demo app in default watch mode and refreshes (without errors) when the library is rebuilt. This setup is fucking awesome if I may say so myself. Thanks to @CiprianIonutIacob below for hinting that you can run ng build lib --watch=true. Thanks man!

[@B20C0]

cool?

[@prvinsharma]

It's a bad practice using ViewEncapsulation.None. It causes css class pollution. Worse the libs/components doing it actually adds to the global css namespace as and when visited. This can lead to tricky bugs. On similar grounds, hate the way CSS needs to be overridden for material libs in global styles.scss file.