Angular Library: Use A Library In a Mono-Repo and Different Workspaces

The best way to Architect Your Angular Libraries | Tomas Trajan | angularday 2021

Мама ударила дочь #shorts #iribaby

UFC 302: Пресс-конференция

Пробую торты

Уличная «клубника в шоколаде» #дмитрийшилов #шилов #raddy #шилошутки

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

Code Shots With Profanis

Подписаться 8 тыс.

Просмотров 40 тыс.

50% 1

Видео Поделиться Скачать Добавить в

In this video, you will see how to create an #angular #library, and how to use it in your application.
Useful commands:
- Create a library: ng generate library my-lib
- Build a library is: ng build my-lib --watch
✨ Code: github.com/profanis/codeShots...
✨ For more info regarding Angular Libraries: angular.io/guide/creating-lib...
******************************************************
Let's connect
******************************************************
Twitter: / prodromouf
LinkedIn: / prodromouf
#angular #angularlibrary #library #angulartutorial

Опубликовано:

21 сен 2021

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 63

@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!

@ShubhamSingh-bm4ig 2 месяца назад

Great video. Keep making videos on Angular.❤

@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!

@Nabulio85 10 месяцев назад

Quick, but really good explanations. Thx Fanis!

@CodeShotsWithProfanis 10 месяцев назад

Glad you liked it!

@bjartemicheljensen8146 2 года назад

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

@CodeShotsWithProfanis 2 года назад

Thanks for your feedback Bjarte. Glad you liked it!

@ramyabalasubramanian6916 3 месяца назад

Very well explained. Thank you!

@ajaykharat9226 11 месяцев назад

Thanks Man !! Great Tutorial !!

@CodeShotsWithProfanis 11 месяцев назад

Thanks! Glad it helped!

@MiguelPerez-em8gs 2 года назад

Great explanation Profanis!

@CodeShotsWithProfanis 2 года назад

Thanks for your feedback Miguel. Glad you liked it!

@ahmetozturk5178 2 года назад

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 2 года назад

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

@damiankacprzak8322 3 месяца назад

Great material I highly recommend

@JaiGtz 2 года назад

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

@CodeShotsWithProfanis 2 года назад

Thanks for your warm feedback. Glad you liked it!

@johnstypa2365 2 года назад

Nicely presented!

@CodeShotsWithProfanis 2 года назад

Thank you! Glad you liked it!

@octavian3033 2 года назад

Very well explained. Thank you.

@CodeShotsWithProfanis 2 года назад

Thanks for your 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 :)

@suman6476 8 месяцев назад

Great explanation.

@binurajtech9663 Год назад

Really liked this video... Thankyou!!😊

@CodeShotsWithProfanis Год назад

So glad!

@julianosoder4405 2 года назад

Thank you, very nice tutorial

@CodeShotsWithProfanis 2 года назад

Thanks for your feedback. Glad you liked it!

@demidovmaxim1008 2 года назад

Thank you so much, it's greatest!

@CodeShotsWithProfanis 2 года назад

Thanks for your feedback. Glad you liked it :)

@WesFanMan 2 года назад

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 2 года назад

Thanks a lot for your feedback and the suggestion :)

@costagmc1 Год назад

great prof..

@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

@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?

@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 ?

@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.

@Applekendee 11 месяцев назад

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 10 месяцев назад

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 10 месяцев назад

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

@CodeShotsWithProfanis 10 месяцев назад

@@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)

@xavierl2216 2 года назад

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 2 года назад

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

@peymanta8923 2 года назад

Thanks. How does watch mode work with multiple libs?

@CodeShotsWithProfanis 2 года назад

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

@matheusjordan6031 2 года назад

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

@CodeShotsWithProfanis 2 года назад

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

@g-luu 2 года назад

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

@CodeShotsWithProfanis 2 года назад

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

@dennis87ist 2 года назад

what tool do you use for design on screen?

@CodeShotsWithProfanis 2 года назад

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

@boyefrederic4716 2 года назад

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

@CodeShotsWithProfanis 2 года назад

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

@DotnetistEnterprise 2 года назад

how can I have that colorful terminal ?

@CodeShotsWithProfanis 2 года назад

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

@DotnetistEnterprise 2 года назад

Cool thank you

@thesweetvishu Год назад

very nice....

@CodeShotsWithProfanis Год назад

Thanks a lot

@manishmunjal-jeenasikho 9 месяцев назад

how to create external library

@saibhargavp5120 3 месяца назад

✖ 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.

Далее

Angular Library: Use A Library In a Mono-Repo and Different Workspaces

11:52

Angular Library: Use A Library In a Mono-Repo and Different Workspaces

Просмотров 15 тыс.

The best way to Architect Your Angular Libraries | Tomas Trajan | angularday 2021

1:02:50

The best way to Architect Your Angular Libraries | Tomas Trajan | angularday 2021

Просмотров 9 тыс.

Мама ударила дочь #shorts #iribaby

00:17

Мама ударила дочь #shorts #iribaby

Просмотров 277 тыс.

UFC 302: Пресс-конференция

22:48

UFC 302: Пресс-конференция

Просмотров 1,4 млн

Пробую торты

00:43

Пробую торты

Просмотров 225 тыс.

Уличная «клубника в шоколаде» #дмитрийшилов #шилов #raddy #шилошутки

00:48

Уличная «клубника в шоколаде» #дмитрийшилов #шилов #raddy #шилошутки

Просмотров 284 тыс.

How to create angular library and publish on npm?

9:48

How to create angular library and publish on npm?

Просмотров 3,4 тыс.

Angular Builders - Creating Custom Builder from Scratch (Advanced, 2022)

50:41

Angular Builders - Creating Custom Builder from Scratch (Advanced, 2022)

Просмотров 9 тыс.

ngTemplateOutlet is WAY more useful than I realised

16:36

ngTemplateOutlet is WAY more useful than I realised

Просмотров 71 тыс.

Angular library tutorial

15:01

Angular library tutorial

Просмотров 62 тыс.

Create angular library, publish it to NPM repository (npmjs)

12:16

Create angular library, publish it to NPM repository (npmjs)

Просмотров 13 тыс.

Create Your First Angular Library - Nir Kaufman

37:19

Create Your First Angular Library - Nir Kaufman

Просмотров 37 тыс.

How to make your own NPM package (Step-by-Step) 📦

16:46

How to make your own NPM package (Step-by-Step) 📦

Просмотров 18 тыс.

Learn How to Create Dynamic Component in Angular

8:57

Learn How to Create Dynamic Component in Angular

Просмотров 24 тыс.

Understand Angular Signals in 20 Minutes

20:17

Understand Angular Signals in 20 Minutes

Просмотров 6 тыс.

The Story of Next.js

12:13

The Story of Next.js

Просмотров 532 тыс.

Русская лжепортативка Retro Genesis Port 4000

17:42

Русская лжепортативка Retro Genesis Port 4000

Просмотров 63 тыс.

Купил СМАРТФОН VIVO X100 ULTRA, продаю GALAXY S24 ULTRA

23:28

Купил СМАРТФОН VIVO X100 ULTRA, продаю GALAXY S24 ULTRA

Просмотров 47 тыс.

Xiaomi Note 13 Pro по безумной цене в России

0:43

Xiaomi Note 13 Pro по безумной цене в России

Просмотров 1,9 млн

Как на iPhone сделать фото без помощи?

0:35

Как на iPhone сделать фото без помощи?

Просмотров 47 тыс.

ПК на 2 ПРОЦЕССОРА и RTX4090 на воде! Монстр - сервер для нейросетей! #nvidia #пк #pc #intel #комп

1:00

ПК на 2 ПРОЦЕССОРА и RTX4090 на воде! Монстр - сервер для нейросетей! #nvidia #пк #pc #intel #комп

Просмотров 723 тыс.

iphone fold ? #spongebob #spongebobsquarepants

0:15

iphone fold ? #spongebob #spongebobsquarepants

Просмотров 184 тыс.

POCO F6 - ТОНКИЙ И КАК ВСЕГДА БЫСТРЫЙ!

20:34

POCO F6 - ТОНКИЙ И КАК ВСЕГДА БЫСТРЫЙ!

Просмотров 31 тыс.