Angular Json File - My Top 8 Settings (2022)

The angular.json file is where we usually configure the angular workspace and every particular project or library. In this video, I will share my TOP 8 the most used settings in my angular.json files, and some advanced configurations that might also be useful in your projects. I hope you will learn something useful today :) If you would like to support my channel you can share this video with your colleagues and friends.
💥 Angular courses made by Dmytro - bit.ly/df-courses 💥
✂️ Use coupon TH-cam_DISCOUNT to get a 10%-off discount ✂️
🕒 Time Codes:
00:00:00 - Intro;
00:00:32 - Setting up yarn as default package manager;
00:01:48 - Configuring build cache (Angular 13 and above);
00:04:21 - Default options for Schematics;
00:09:28 - Do you want to know how to build a custom builder?;
00:10:11 - How to include 3rd-party styles;
00:14:33 - How to include 3rd-party js scripts;
00:17:23 - How to deal with assets;
00:20:59 - Create your custom config (staging environment);
00:25:21 - Budgets (How to control bundle size);
00:28:43 - Outro;
↙️ Short Frontend Snacks every week here:
Twitter - / decodedfrontend
Instagram - / decodedfrontend
LinkedIn - / dmezhenskyi
#angular #angular14 #angularrouter #webdevelopment #ng

[@DecodedFrontend]

Please, don't forget to leave your comments and thumbs up if you are interested to see how to create a custom builder! :) UPD. Video about custom builder is published - th-cam.com/video/QbDkDLnXAZE/w-d-xo.html

[@eqprog]

This is my comment telling you I’m interested in that video

[@DecodedFrontend]

@@eqprog awesome! Thank you 😊

[@frontend3409]

I think configurations (and fileReplacements) options, with switching environments depend of environment on wich app is working is the most used setting in angular.json

[@jonhdoe]

Please just do it, we'll be here to watch it.

[@sanjeetbahadur1667]

i have a question how i can dynamically switch the stylesheets based on some configuration i.e theme based stylesheets?

[@karthikeyan878]

Please make a video on below topics
1. Husky + lint-staged + eslint + prettier configuration with Angular
2. Feature flag implementation in Angular

[@p.s29]

Thanks for the video.
One thing I would like to share.
Alias for --configuration is -c.
ng build -c staging.
Further abbreviated to ng b -c staging. 😅

[@TheSoma300]

Would be interested for sure in schematics, also Nx generators and best practices for both 🙏

[@dimitridovgan6364]

The best Angular Videos out here! Great! Thank you!

[@demidovmaxim1008]

Yahoo)))) New video. As always very helpful and informative. Thanks a lot.

[@carlosabud]

This is great Dmytro. Not many videos on this topic and nowhere close to these level of clarity :)

[@mykhailopanas4027]

Great job! Thanks for a clear explanation and cool content in general!

[@Klaunyinya90]

Thanks for this video. I would be interested in learning more about the custom builders :)

[@venkatv3208]

Most awaited topic, thank you so much.

[@srikanthsiddenki1216]

Much needed video, Thanks!!

[@zeeshanmushtaq508]

@Decoded Frontend , We would love to see more videos like these. Thanks for sharing your knowledge with us.

[@galaxies_dev]

Very cool settings, especially the part about controlling the injection of CSS and JS files!

[@amberlum9166]

thank you so much. The video helps so much and please keep up the good work!

[@user-oz5nw2hi1f]

Thank you, Dmytro!

[@aliasgartaksali7785]

Loved this videos, much helpful content. You earned my sub ✌

[@loko1944]

Just what I needed

[@tiagonunes889]

That's some high quality content that you make. Thanks

[@_cipriangg_]

Very nice video, as always!

[@EricBichara]

Fantastic video again

[@dawidniegrebecki2205]

Wow, Dmytro, you are creating really great tutorials. I would love to see more people create tutorials on advanced topics. Currently, you are by far my favourite programming TH-cam creator. Thank you for your great work!

[@DecodedFrontend]

Hi Dawid! Thank you so much for the feedback 😊

[@hiteshsuthar1097]

Simple and Clean 💚

[@MrMichaelPet]

Another great video, thank you.

[@SafetyLast-_-]

Thanks for useful content! It's really useful.

[@nikachkhobadze7710]

Nice! Keep up! Really interesting!

[@user-wh4pm2bj1q]

Great work!!!!

[@urchuk2006]

Дякую за корисний контент! Продовжуйте в тому ж дусі ✊

[@shriniwasrocks]

dude.... I actually needed this exact video today.😅

[@user-yc3jr7kw3f]

Hi, Dmytro. Just wanna say, that you channel is awesome. Like finding a diamond :) Lots of things that I thought I would never understand you make much more easier for me. Keep going, please :)

[@mykhailohrokhola815]

Thank you for your content! Waiting for video about a custom builder ⏳

[@PH2000able]

Good job , very useful!

[@markusingvarsson2146]

Really great video!

[@nanasarathi]

Very informative 👍 Thanks for sharing this 🙏

[@anhquande]

Thank Dmytro, i am new in Angular, and found your videos very helpful

[@bdbcavalcanti]

Thanks for the video!!

[@fernandorochaworld]

Great content! Thank you.

[@camilaebf]

Good and well explained video!

[@zubinthoughts]

This is something new which i learnt from you channel and keep making such videos thanks

[@lsst25]

Thanks for your videos, they are really helpfull!

[@pavelsamchuk7613]

Дякую, Дмитро, за якісний контент

[@user-qt4rf2lg2g]

Great quality video!

[@stoney.8290]

Love your content.... looking forward for topic..

[@oleksandrvorovchenko8674]

Thanks, quite useful. Waiting for custom builders video :-)

[@angelpellejero8764]

Thanks for the video. Waiting for the video about a custom builder 🙏

[@mustafasange]

Thanks for sharing config. Yes, please more video on custom builder.

[@karthikeyan878]

Very useful . Thank you

[@aakash261]

This is so helpful 👌 thankyou

[@carlosiglesias4065]

I love your channel!

[@zielad362]

great video, thank you very much!

[@carloszm7494]

Great info. I really appreciate it.

[@carlosiglesias8354]

I love your videos! My work is much better because of you ♥️

[@ITStars]

really great videos , thanks alot :)😍😍

[@Brumry]

I am really glad you are making videos about angular, I think this is the best YT channel for it. Maybe some suggestions if you are out of ideas: angular animations, view encapsulation, SSR & SEO, Error logging

[@matiasbpg]

Great video, I wish I got to your channel when I started with angular

[@richardkolyadko3363]

Thanks, very useful

[@mancmanomomyst]

I don't know why but I thought customising schematics would be something very difficult to do and this video absolutely blew my mind.
I have a monorepo component library project and at the minute there are lots of manual changes you have to make after using the cli to create new libraries, I can now simply update the schematics and make the whole process significantly easier for new developers!
I would love to see your video on custom builders to so I hope you get enough additional likes and comments!

[@DecodedFrontend]

Glad that the video helped :) indeed, the configuration of schematics is easy!
P.s next video about custom builder, so stay tuned 😉

[@omidsoleimani3817]

Thanks for this video. Waiting for custom builders video

[@szwagier170]

So great job.

[@gyudhi]

excellent kind of information that we don't get in such a concise way

[@frontend3409]

angular.json is with Angular Devs since few years, but it's first video about it on youtube, i believe. Thank you for that 🙇‍♂

[@newmagicfilms]

What do you use to edit your videos?
Btw your video quality / information / skill grows from each video.
Keep the good work, you make a lot of professional angular devs here!

[@rajanchavda1417]

Your videos are Gems

[@ArifAhmed-fn4ez]

Very informative

[@it-s-me-mohit]

Great Video

[@beeTechSE]

Very useful

[@jaromirroth1770]

+1 for the video about creating custom builder :)

[@DecodedFrontend]

It will be the next one ;)

[@robiulhassan4263]

Good job.

[@JuliaSleeps]

Looking forward for the custom build)

[@wawawawa919]

Thanks for sharing all this valuable information! I'm very interested custom builders, please make one.

[@YanLoonG13]

NICE!!

[@picsdh]

Hello dymtro,
Hope all is well on your side. Been following you from my first account for long time,and would like to appreciate the effort you are putting for angular community. Kudos!
Recently I planned to use another i was getting irrelevant notifications in my first account.
It would be helpful for everyone if you can look into or cover angular optimization , compression or minification topic.
Thank you in advance

[@manusi9669]

Yes, It's a great offer!

[@ShashankGram]

Thank you for the video

[@DecodedFrontend]

You’re welcome! I hope you will like it 😊

[@imvasia13]

Thanks!

[@reyco1]

I'd love to see a video on how to create a custom builder!

[@litovkinvital]

Thank you

[@xavier4028]

Best Angular-related channel so far.
Дякую за вашу роботу, привіт з Черкаської області! 🇺🇦

[@larryamisola]

Looking forward for the custom build.

[@letok2871]

Very interesting info! Sometimes we use framework not even know how it works)))

[@mehdin2222]

hi thanks for your guid

[@mehdin2222]

YOU are the best

[@hubert.t4243]

Yes please can you please make more videos on schemetics and NX generators as well. Thanks

[@cozmik_kay]

Thanks for the video... really insightful.
I had to build an element recently but ran into a situation where I couldn't bundle the css with the built JS, can u please do a video on angular custom elements? Thanks

[@yaibanoutsukushii]

I'd love to have further videos you smart youtuber

[@ahmad-g-mustafa]

Amazing

[@GankMe57]

Thumb up !

[@RobertoDuransh]

as alwasy awesome video, soo useful. one question why you prefer yarn just curious

[@user-us8ep3sq3c]

thanks for such great videos we wish that you create video about how to create big project folder structure

[@muhammadghaderi4611]

Great, Please add one for Angular Universal best practices.

[@subbusistha9075]

Yes we are interested

[@user-ct9ng2zn6f]

Hi Dmytro, every time you create an out-of-the-box video, keep it up ❤. I have a question: can we replace any component file with another component file based on environment configuration? As you replaced the development environment file with the production environment file

[@oranaki7]

Thanks for this video!!
what vs extension are you using to get the AutoComplete in the angular.json file?

[@vahidsaebi5653]

good to know

[@RodrigoSalesSilva]

Nice

[@ahmedmhkl1008]

go on 👍

[@lukassefcik9623]

I would love to see custom builders video. 👍

[@paulh6933]

Good vid. I would be interested in learning more about a custom builder

[@manojradharapu4688]

Custom Builder ?

[@paulh6933]

@@manojradharapu4688 Check out ~9:30 mark in the vid

[@ukaszkordiak8702]

i'm waiting for a video about custom builders 😊

[@nerdobject5351]

I wasn’t aware we could create schematics for ngrx stores. I’m often tasked with building out new features in our front end and building out the boiler plate ngrx store with effects and reducers are error prone. I’m hoping I could use this to remove that friction.

[@PaweWaszczynski]

Cool content. How would you lazy load scripts/css that are in separate files and not included in index.html given the fact that files names are dynamic?