Create Your First Angular Library - Nir Kaufman
Вставка
- Опубліковано 15 вер 2024
- This talk will guide you through the process of creating an Angular library from scratch using the Angular CLI. You will learn how to set up a project correctly, how to configure your library, and how to generate a sample project to test it.
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.
Dude you are a champion ✊🏿
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
Thank you!
very usefull indeed
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.
Till date, I use this video every time I want to create a new Angular Library
Explanation is to the point, very clear and helpful. Thank you Nir Kaufman.
First time I've seen someone program like me. Define names once, copy paste after. Thanks for a great tutorial
This is the best Angular Library Development video out there right now (03/10/2021). Nice work
Thanks!
After watching this super explanation, I am a fan of Nir Kaufman!
Thanks Nir. Awesome presentation!!! This is exactly what I was looking for
Great talk Nir. Was watching your video while waiting for some noodle 🍜 to be delivered.
An excellent talk. Very informative.
Amazing video, so clear and straight forward, I would've loved to see the rest of it though :(
Ditto. I'd like to see the install and consumption
Great explanation!
Great tutorial, nicely explained (+ learned some new capabilities in angular :) ) Toda !!
Very nice explanation. Congratulations. Very useful for me. This is what I was looking for.
Thanks!
אלוף! תענוג כמה ידע, תודה רבה!
Great tutorial! Thank you 👍
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.
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.
I like this man!
Thank you for your feedback!
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';
Really nice explanation.....
Happy to hear it :)
This is dope!
felt like 'Cisco Ramon' is teaching me
jajajaja!!! you have a point bro ! 🤣
Really helpful video. Thanks!
We can use storybook to check the library right?.
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?
Nice channel
I want more tutorials from that guy :D
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?
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.
@@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 :)
great ! thanks mate !
Thank you!
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.
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?
i cant create multiple library :(
get this error (does not support the 'build' target)
Drop me an email. show me some code :) I'll try to help
How to use Primeng as a dependency in custom angular library which is on angular version 15?
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",
Awesome ... Thanks for sharing this information
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 ?
Shoot me an email: nirkaufman@gmai.com
did it as you did, but it can't find the lib (magic-string). no clue what to do... What changed?
Nice explanation,
How to use that package in another application?
Just npm install like any other package :)
@@nirkaufman101 but that is after publish to npmjs.org right?
@@jose-chin no need to publish to npm at all. All local. Use npm link
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.
24:32 I want to know about this extra configuration, but I can't find which meetup talk this. :(
I take a look quickly over this video ua-cam.com/video/kxlDFWcwZc4/v-deo.html I think it may be, checkout minute 15:48
Hi sir. What to do next with .tgz file??
Can I build a prod app with many libraries like this for dynamic loading.. Will it work for say 50-70 libraries?
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
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?
Is there any way to add external script in library. The way we have in application
Have you find any solution to add external script.
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.
@Nir please reply on this
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.
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!
Someone find the complete talk?
Can i use third party library in my angular library?
Have you find any solution to this?
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.
cool?