Angular Builders - Creating Custom Builder from Scratch (Advanced, 2022)
Vložit
- čas přidán 27. 07. 2024
- Angular builders are nodejs scripts executed by Angular CLI and perform different tasks like application build, serving the app, or running different kinds of tests. You can create your own builders that can perform some particular tasks for your Angular application and in this tutorial, you will learn how to do that. At the end of this video, we will build a custom builder that patches the application build information in a dedicated JSON file, the JSON file name can be configured by providing custom options for the builder, and additionally, you will learn how to schedule another target from your custom builder. I am pretty sure you will learn a lot of cool stuff today. Enjoy! :)
💥 Become a PRO with my in-depth Angular Forms Course💥
🔗 10% discount for the first 10 students - bit.ly/advanced-ng-forms-disc...
🕒 Time Codes:
00:00:00 - Intro;
00:01:14 - Project Description;
00:02:10 - What we are going to build;
00:02:39 - Implementing a custom architect target;
00:05:35 - Creating an NPM package for the builder;
00:07:26 - Describing builders in the builder.json file;
00:11:15 - Creating TypeScript compilation pipeline for builder package;
00:18:51 - Implementing basic builder logic;
00:23:18 - Linking the builder NPM package with the target project (npm link);
00:27:53 - Feature 1 - Patching the build info;
00:34:10 - Feature 2 - Builder customization using options;
00:37:45 - Feature 3 - Schedule other targets from the builder;
00:43:33 - How it works with configurations (dev, prod, etc);
00:45:50 - Quick Recap;
00:49:36 - Outro & Announcements;
🔗 Project Code on GitHub:
github.com/DMezhenskyi/custom...
🙌 Support Dmytro bit.ly/donate-to-decoded-fron...
💡 Short Frontend Snacks (Tips) every week here:
Twitter - / decodedfrontend
Instagram - / decodedfrontend
LinkedIn - / dmezhenskyi
#angularcli #ng #angular15 #angular14 #webdevelopment #decodedfrontend - Jak na to + styl
This video became quite long but I wanted to show you every possible aspect of custom builder creation that you might face implementing your own one. If you like my videos you can support my channel by sharing this video and subscribing to my other Social Media where I publish short frontend tips:
Twitter - twitter.com/DecodedFrontend
Instagram - instagram.com/decodedfrontend
LinkedIn - www.linkedin.com/in/dmezhenskyi
I joined this channel when it had only 100 subscribers, the content here has been always mind boggling.
I am happy to hear that! Thanks for staying with me :)
Another unique video. I find it entertaining when you present the whole process and logic. These are very useful.
Keep up the great work you do!
The best channel about Angular. Thank you !
Nice topic ! I was on vacation for Christmas and had not taken the time to watch this video until now
"So this is the place where builder logic lives" - with that kind of vocabulary you're totally buying me. Unlike other angular/ts youtubers you can talk about complicated things in a way that everyone will understand. And Quick recap at the end shows that it is complicated topic! At the end of this video i've had a feeling like "whoa, it's easy, but there are a lot of steps which you have to do". Complicated topic, but greatly and easily explained. It's not about running and creating a builder but about mocking npm package, too.
At the beginning of the week i didn't think i will be doing some custom builder, but now i'm think about that it can be applied at my work.
The only disadvantage i would say is where you're showing the terminal at the bottom of the video, the subtitles are covering it, but subs can be easily moved on yt, so... it's not a critical error :)
Great tutorial. Please, do not stop creating content. Tremendous video.
And i think we need a video about Angular Elements from your side. Thank you. For all.
Great as always. Can you make a video on structuring the Angular app and the best practices, especially after the standalone components release?
Very cool man, keep it up 👏
Excellent explanation!! Keep up the good work 👍
Thanks for the detailed explanation!
Thanks Dmytro amazing content ! Thanks again for making advanced Angular topics accessible to all 😁
You are welcome :)
Pretty sweet video, thanks.
Most awaited....
Nice video! thanks! ❤
great material!
very good video, lots of useful information thanks
Awesome as always ✨🥰
Thank you! 🤗 Glad you like it
Wow,. So much good info. this is especially useful for multi-environment release pipelines where you need to inject different variables depending on the environment
Glad it was helpful! :)
Дякую, козаче!
Будь ласка 🙌🏻
Thanks a ton for creating amazing video
It's my pleasure :)
Awesome tutorial, thank you.
Do you happen to have a video that covers bootstrapping of an angular app as a part of module federation under the hood? How does the bootstrapping change in different ng versions?
Thanks!
Wow, Thanks a lot for your support! Much appreciate it! :)
Hi bro. Your are truly amazing in explaining the concepts in deeper.
Can you explain how to debug custom builder with dev tools or vs code. This helps us to debug existing custom builder on our project and enhance to support other features. Thanks in advance.
Looking forward a reply from you.
An excellent tutorial! Thank you so much for sharing. Just one question: what needs to be done around the schema, so that these two options (target2run, file2patch) come up as intellisense suggestions?
Thanks bro.
Always welcome!
Thank you ❤. It's a very useful session and explained step by step. Is it possible to run a typescript transformer as part of an angular compilation process as part of custom builder
Hello, Dmytro!
Thank you for informative explanation of interesting topic :)
I have one question. I use nx, but it should not be reason...
When I use scheduleTarget for the serve target in my app, it working good but after successful execution it complete target. It means that it's stopping server. What's the reason it could be?
Thank you again.
How would you go about writing test coverage for a custom builder
Always great content that is really useful in real life projects, thanks for the work. I have a question, there is a way to pass the options object when running the builder, with ng run?
Never mind, I found it in the docs of angular, thanks again for great content
Thanks for video. It helped me.
I try to create builder, which can run tasks by chain. Last task, in my case it is 'serve'. When I try to run my task chain, the serve command run once and finished.
Builder is very simple - it is cycle "for", where running tasks. The result of the last task will be return from builder function.
Any help by topic, thx.
Can you please add module federation to your amazing playlist also?
For such simple scenarios imo we don't need even to write custom builder, the code can be placed right in the project, however thanks for the video it allow to understand how things work under the hood
I work with angular since tow years and still can't understand this level,, what should i learn or work to be in this advance level?
Sir please put video angular crud operation sir 🙏🙏🙏
Hi Dmytro,
thank you very much for the video!
Are you planning any commercial video courses for advanced ngRx applications? I'm very interested in this topic.
Thank you! 🇺🇦
Hi 👋🏻 I don’t know yet :) in the beginning of 2023 I will create a quiz regarding the next course and let’s see how people will vote. P.s NgRx is one of the topics.
But you can still reach me with your suggestions and use cases that you would like to see in the course :)
What about a real project? Maybe the example of one with your experience would be a nice content!
What's the real usage of Angular Builders?
The use case from the video is quite a real one. Also, there are builders that allow you to build applications using a custom webpack config or run alternative test runners e.g Jest. There are a lot of use cases.
@@DecodedFrontend Thanks you, need to add a bookmark and see it later on :D