Angular Json File – My Top 8 Settings (2022)

Hey everyone! welcome, my name is Dmytro  Mezhenskyi and in this video we will have a   look at angular.json file today I will share with  you my the most used configurations and settings   and they might be also useful for you so please  use time codes in the video description so you   could save your time by jumping over the settings  you probably already know and let's get started   all right here we go so first of all let's  try to open the angularjson file and let's   see what we can configure here and i must say  we can configure quite a lot of stuff however   the first tweak i would like to share with you  is how to uh set up the default package manager   i personally prefer yarn over npm so for almost  every personal project i do this configuration and   this is how you can do as well so first of all you  have to create a cli uh property in this config   and there inside the cli object you can pick the  package manager option and then you can choose any   package manager you prefer you can choose from  these four options and i personally prefer as i   said yarn so i choose yarn and now every time when  angular cli would need to install npm dependencies   yarn will be used for instance if i would like to  add angular material package you can see that now   angular cli uses yarn so this is the first trick  the second option relates also to angular ally and   namely i'm talking about cash property uh if you  maybe notice that since uh angular 13 i believe or   even angular 12 but doesn't really matter since  angular 13 i believe uh we started to get dot   angular folder right there and it happens every  time we build our application so for instance   i run the ng build and yeah you can see that we  got this dot angular folder there we store the   build cache and it helps us to improve the speed  of our builds and we can configure actually that   and namely we can first of all enable or disable  this cache if for whatever reason you don't   need this caching feature you can just  disable it by providing false value   i would recommend you to enable it because  it really works and once you enable it you   can also specify on which environment it should  be like enabled uh by default it is enabled on   the local environment but you can enable it also  for ci only or for all environments yeah if you   need it for all environments you can pick all  option and the last but not least is path and   path allows you to override the default location  for this cache for instance now you have   dot angular folder by default but for  instance you want to store it in some   another location so you can override it here so  you could uh have something like a temp folder   like that and then you could have something like  cache and then only angular something like that   yeah and if we save it right now and if i remove  this folder then rerun the build you will see that   there created stem folder and there is a cache  and under the cache we have angular folder   and they're already like our build cache is being  stored and now let's talk about schematics and   schematics this is the feature  that is quite hard to overestimate   uh schematics allows you to generate any angular  component directive pipe everything with just   one single command like ng generate component  user and this short command will generate the   whole component for you it will set up a unit  test for that and many other things however   when we use schematics in real projects very often  we add some additional parameters something like   we're defining modules or very often we define  them change detection strategy like on push and   very often those options should be  applied for every generated component and   it is very inconvenient to repeat all those flags  all those options every time we want to generate   some directive component or service and the  following configuration can uh improve your   productivity even more because we can uh set up  this default options right in the angular json   for that you just need to introduce a new property  schematics in the root of your angular json config   and there as a key you should provide the name of  the schematic which you are going to configure so   in my case i choose component schematics angular  component schematic and here i can list already   properties that should be default for this kind  of schematics i can choose like change detection   on push for instance and i could choose  something like view encapsulation to be   uh none let's say like that and when i save it and  run this schematic uh right now it will generate a   component for me with on push chain detection  strategy enabled and you encapsulation should   be none so let's have a look and you can see that  these options were applied to this newly generated   component of course you are not restricted only  by angular component schematic you can configure   any schematic you like uh for instance directive  or pipe so feel free also you can configure   third-party schematics for instance uh  ng a rex store i believe they have some   schematics so you can configure it the similar  way yep that's what you could do as well   now pay attention that we created this  config on the angular json root level   however uh schematics property also exists on  the project level and every project can configure   its own schematic so they are  basically the same you can see   that we use angular component schematic here  as well however we can override um some options   that needs to be specific to some  particular project for instance if for   this project i don't want to have change detection  strategy on push i want to have it as a default i   can define it here and every time i will generate  a new component for this particular project   the component will get change detection uh  strategy default one but other projects will   get the change detection strategy on push enabled  also very very often we have to deal with some   you know third party styles third party scripts  and it is something we can also configure inside   angular json file and because it happens usually  at build time we have to uh find the architect   property inside project config and here inside  the architect property we have to find the target   called build and inside this target we have such  a thing called builder this is exactly the script   that builds your application and this script has  um different options obviously we will have a look   at this a bit later as well as configurations  and some default configuration okay by the way   you can write your own builders if you like  and i can even show you but in separate video   i would suggest you the following agreement  if this video will reach 1000 likes   and 250 comments i will understand that this  topic would be useful for you and i will create   a video that shows how to create uh your custom  builder that could perform some additional logic   in addition to building the application serving  the application and so on and so forth so   hit the thumbs up if you would like to see such  kind of videos but uh we are moving forward and   and let's expand the options property  like that uh here you can see things are   like self-explanatory i think you can you will be  able to figure out what means those properties and   yeah let's get started with styles so we have  often the situation when we have to include some   third-party styles from some library or maybe for  instance bootstrap so let's create maybe some new   file so somewhere here inside  the source folder i create a   bootstrap css file and here i just add some dummy  selector and things like that just to see uh some   css styles in the uh output bundle and we can  include this new file uh right here so i can   just say that please include bootstrap css file as  well in addition to styles as css file all right   so if i save it now and rebuild my application  we should see that styles from bootstrap css were   like merged together with our global styles so  if i had some styles inside my style sss file   those files would be merged in one styles  bundle so this is how it would work   but sometimes you have the situation when  you don't want to merge them together and   you want to keep them in two separate files  in this case you should not provide it as a   regular string and path to the styles you can  provide an object actually and this object has   the following options like input this is exactly  the file that you want to include right and   then you have a bundle name here define what  the name of the final bundle here should be you   can name it as a bootstrap compiled if you want  right and yeah you can already save it basically   and we can try to rebuild our application  and once everything is built uh   let's go back to our dist folder and we can see  that we have additionally bootstrap compiled   css file created and it was also included inside  index.html you can see that this file was included   there is also third scenario when you don't want  to load this particular css file eagerly inside   index.html file but you want to load it lazily  it might happen when you have multiple themes   and you don't want to load them all during the  application bootstrap you want to load them   when user like switches to this particular  theme right so in this case if you want to   extract these styles into separate file and  don't load them in the index.html file you have   to provide the third option called inject and  set it to false in this case if you rebuild the   application you will see that bootstrap compiled  css file reminds inside the dist folder let's open   it and you can see bootstrap compiled file is  there but if we open index.html file you will   not see this file included so only a styles bundle  was included because we configured here like that   and by default it will be injected so such a way  you can you know then load this bootstrap compiled   file lazily the same way you can configure  actually scripts yeah so very often we have   some third-party script some google analytics  stuff or whatever and i will create such a file   somewhere somewhere inside source so let's name it  conf it will be some config.js file and here you   can put something like that and it doesn't really  matter what is inside and we want to include this   uh config gs file into the final build as well so  uh we do absolutely the same we did for styles so   i say just like include source  code gs file and once we rebuild it   you should see uh let's go up and inside this  folder you can see a file called scripts and   inside this scripts file there will be you know  bundled all the scripts you provided inside this   array yeah we have currently one script you can  have many of them so all those scripts will be   conf will be bundled into the scripts file of  course you can configure it likewise we did   with styles so you can provide instead of string  you can provide them you can provide an object and   it has the same properties like input this is the  path to the script you want to include and then   you can uh give a bundle name for that uh i don't  know it could be some like configuration mean gs i   don't know and then you can also either inject  it so it will be eagerly loaded or you can set   it to false and then load this javascript file  lazily somehow yeah so currently uh if i save   and uh then i will rebuild this file you will  see that we will get the configuration mings file   inside the dist folder uh right let's open it here  you can see configuration mean gs gs file and so   it means that we could actually remove uh this  part from here and yeah and this file will not be   included into index.html so if we try to uh find  something like configuration we can find nothing   yeah so this is how um we can handle third-party  scripts and now let's have a look at uh assets uh   assets it is something like images some icons it  might be some md files it might be some txt files   uh stuff like that usually we store them inside  assets folder usually they have to be moved   inside this folder inside our final bundle and we  can also have some options how to configure them   and this is what you can do with that and the  current configuration tells that okay favicon and   the whole assets folder should be moved into the  dist folder and let's see it in action and i will   quickly create couple of files to um to work with  so let's say we have some uh readme file md right   and we could have something like uh robots.txt  file okay uh they could be empty actually uh   and try let's try to build our application right  now and uh let's see what will happen with our   uh assets so i go up to my list folder and you  can see that assets folder was moved completely   but what if i don't want to keep them all under  the assets folder but rather i would like to   extract md files into the separate folder okay so  in order to do that we have to slightly change the   configuration and instead of providing the string  we could do something similar to what we have done   for styles and scripts actually we can provide the  object and this object has some options first of   all we have to define the input and this is the  path to the assets folder and here we can define   the globe property and here we define which files  have to be kind of moved right and we can say that   uh we can move any md file and any md file we  will move into the separate folder this is what   we define inside the input or sorry output and  the output folder will be uh let's name it docs   like that and then the rest of the files  namely this robots.txt file i want to move   uh to assets folder yeah so uh for that we  can configure or copy this config and then we   have to just adjust it so i say that uh all  txt files they have to be placed under the   assets folder like that and now if  we try to rebuild the application   we should see we should see something namely we  should see a docs folder that contains a readme   file right and we see assets folder that contains  txt file so such a way you can configure how your   assets should be copied to the final build and  now let's talk about application configurations   i remember we saw it here somewhere yeah  you can see it right there configurations   and if we expand this property you can see that we  have production and development config i think the   intention of all this stuff is pretty much clear  for you uh because for different environments we   built application uh differently for development  mode for instance we enable source map we   disable optimizations and things like that for  production we do pretty much opposite thing and   actually what i wanted to show you is that you  can create actually your own configurations and   let's create one i'm going to create a config for  staging it is i think you notice something like   between for production and development and here  i can define actually any property any option   i need for that but what we do very often  i would say almost for every configuration   we do file replacements because if  you remember every angular application   has folder with environments and currently  we have uh two of them the regular one it is   it is for development and we have also  configuration for production here you can have   some different stuff that um you know depend on  some environment you can have some like endpoint   to the api like for production environment  you call production api endpoint and for the   development you would have something like that so  i think you you got the idea and we can create the   same similar file also for staging right here  and i name it an environment staging ts file   and here we say that there will be a staging  api endpoint right and now if we want to build   our application with staging config we have to  um configure it such a way that the environment   file uh means this one will be replaced with  the staging namely not the file exactly but the   content of the staging environment ts file will be  placed instead of this content right so yeah let's   configure it let's go back to angularjson file  and here inside the array we define which files   should be replaced for this configuration and  namely i have to say that okay replace source   environments environment ds file so this one right  i want to replace with uh environment.staging.ts file and this is pretty much it i can save it  and if i want to build my application using this   new staging environment i have to run ng build  but i have to provide additional flag called   configuration and i have to define the name of my  new config so in my case it is staging and i can   run my build and then the options from the staging  config will be taken and application will be built   according to uh settings i provided uh right here  okay of course every config has way more settings   you can check them out right here or use the  angular documentation for that but the last option   i would like to show you which is quite important  one especially for the production and this   setting called budget and budgets allow you  to control the bundle size of your application   and here you can set up different you know  limitations and once you cross this limitation   uh your build will be failed so we can create  as many budgets as we want and i will create   one and first of all you have to define the type  of this budget so it could be like all scripts um   any script it could be some separate bundle and  this is what i'm going to choose for this option   you can read more about every single type in  the angular documentation and then you have to   define the like maximum warning  or maximum error it's um   the limit once you cross this limit then you  will get either warning or error so let's choose   warning for this case or you can also set up the  minimum size of the bundle if you need and let's   just to be sure that we will fail this test we i  set up zero kilobytes and then you have to define   uh the name if you choose the bundle you  have to define the name of the bundle you   are trying you are going to inspect so in my  case i will i will check um configuration um   mean gs file and make sure that you copy  the name so you should drop the extension   gs yeah you have to just copy configuration  mean and pass it here because this is the   name of the bundle not the min gs so we can save  it and try to run the build for our application   one more time and now we should see some warning  yeah you can see the warning that configuration   mean file exceeded maximum budget so this is  really cool thing and this is basic usage of the   budget also you can set up so-called baseline it's  um some static amount for instance four kilobytes   let's take this baseline and once you have  baseline you can uh set up here percentage so   um it will be calculated like that so it will take  four kilobyte and once the configuration mean uh   javascript file increases uh 20 from the baseline  then the application will fail yeah so you can uh   use this kind of config if you didn't know  and uh set up uh budgets depends on your needs   alright guys that was it if you would like to  support my channel please share this video with   your colleagues and friends subscribe to my  other social media profiles because there   every week i publish some small tips and tricks  regarding front-end i call them front-end snacks   and if you would like to get more cool knowledge  about angular or prepare for the upcoming angular   interview please check out my video courses i  will leave the links in the video description   there will be also some coupon codes so you  could get these courses with some nice discount   and i wish you productive week ahead  stay safe and see you in the next video you

Channel: Decoded Frontend

Views: 19,639

Keywords: angular json file, angular json tutorial, angular json scripts, angular configuration using json files, angular configuration, angular configuration file, angular config file, angular config, angular config.json, angular, angular tutorial, angular 2022 tutorial

Id: L9dG17xbVic

Length: 29min 30sec (1770 seconds)

Published: Tue Jul 19 2022