Angular 10 Tutorial #9 - Package.Json and Package-lock.json | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners so far in our journey in the last two episodes we have seen the we have seen and learned and understood the folder structure some of the important files and importantly the boot process of angular applications now the import the next logical step of our learning should be package.json and package hyphen log.json the reason being that when you're working on a real-time project hardly you will have where you'll have a basic sketch or skeleton with minimum packages right you will obviously need more packages or modules or libraries and this episode will help you understand what happens when you do when you install packages when you install libraries and why it's important for your application let's get started this is part nine of the full tutorial playlist i have planned around 100 tutorials for you along with including live projects so make sure you check out the description box below uh i will update the notes and the code all right so so far we have covered eight episodes so make sure you check them out because there is a continuity in learning i'm sure which will benefit you so today we are learning about package.json and package hyphen lock dot json file all right so let's get started uh so these are two really important files without which your project will not work right uh you cannot deploy your project because this is the main file which tells about the schematics or the scripts that are used to run in your build pipeline right any automation deployments that you will work in real time will have some scripts which go into your package.json and you will also need some kind of dependencies and modules to work with your application that's what is defined in package.json a lot of people think that they really understand package.json but i'm sure there are a lot of hidden gems which i'm going to encode and show it to you so if you like the video hit the like button let's get started all right so i'll continue making notes here for you which is what i told you i'll cover it in the next episode so this is the package episode number nine right where we are learning about package.json and packagelock.json all right so the first thing so you will find your package.json and package lock in your folder structure right so wherever you have your folder you will see these two files right these are two extremely important files package json and package hyphen lock dot json right now let's go one by one and understand them right open package.json so the first would be the most basic ones which is your name and version name right this is where you will give your project name and the version name then comes the important most important part which is the scripts right so here you are telling what are the scripts that i should run to invoke the schematics right if you look carefully ng serve ng build these are all our cli commands right and all these are defined in our angular dot json so if you see here under architect you will see build you'll see serve you'll see test and these are all the commands that get invoked when you are seeing here like npm run start npm run build it calls this right let me make some notes because we don't want to lose this information right so package.json has details like name of app version of app right and then it will have scripts right these are nothing but when you want to run this scripts you will run npm run followed by that particular script name right and what is the name of the script open your package you'll see start so if you say npm run start it will internally call the command which is ng serve right it will internally call ng serve ng serve will internally refer it to angular dot and inside the angular.json you have the build schematic it will then come and do all of this details as configuration right so that is what happens when you run a command npm run start it will come and execute ng serve and then ng server will internally reference angular dot json get all the configuration details variable details and then use these angular dot json details like asset styles config main.ts index all of that and run your application right that is the important of scripts now the question that is often asked in interviews is can we add more scripts to package.json the answer is yes yes yes right so if i want to add i will add new i will say let's say i want test coverage so i will say i am building a new script i will call it ng test coverage and the command that should do is ng test hyphen hyphen code fun coverage right so you can pass this parameters right and so you can build your scripts your own scripts which will run in your pipeline right so these scripts are your starting point of learning your starting point of learning if you are working on existing projects right if you are working on an existing project obviously you don't know how to run the app you don't know what dependencies so go ahead first check out and you will know what command to run your application what command to test what command to lend etc etc so this is your first thing that you should look when you are working on any existing projects all right so we learned that we can add custom scripts and how do we run this scripts let me show you so i showed you that we we so far we have done something like ng serve right that is to run the application but now we will using the package.json commands what we will do we will use npm run start so once you do this it will still run ng serve i'll show you that just now see now i'll enter and it will say ng serve here you see so it's internally calling ng serve ng serve will go to angular dot json and get those configuration details and variable settings and then execute and compile right so that is what this scripts does in package.json let's move on now now next thing is dependencies right what are dependencies and what is def dependency right so now this is an interesting question that is often again asked in lot of interviews so what is dependencies okay i got the spelling wrong all right okay so what is dependencies and what is dev dependency right so dependencies means all the modules libraries you must have to run in broad environment right in production environment you will need all these modules and libraries to run your application that is what is listed in dependencies right in dev dependencies as the name says this is all you need to develop your application right now these are all the modules and libraries you need to develop right now there is a difference to develop develop your app remember dev d whenever you say dependencies right uh the prod the production code will mostly be optimized will be minimum right because you don't want to make it heavy right so it will always be less than what you see in dev dependency in dev dependency you are adding too many things but you are not sure if all of them are used right we may add packages or modules but we may not use them right so you don't see them in dev dependence you will see them you will see them in dev dependency but not in dependencies right so that is the main difference between dependencies and dev dependency now that's what you would see here and you will see the version number of it right so there is a major version minor right and there is some minor patches that are available so this is about the dependencies and dev dependencies now let's talk about package hyphen lock dot json right so you have to understand them together right it's not independent it is related now here also if you see in the dependencies right you will see the same packages which are there in your package.json like for example take this and angular animations and go to package lock and search for it so you would see the details of it right for example you would see that there is angular animations the version is 10.2 and it requires these details in package you only see the name of it but in package.log you will see that it also internally requires some more modules right same thing happens with other libraries you can check out any other library like haar validator right it requires internally some more modules but now if you go and see this right you would go copy this and come to a package right you don't see it because it's not in your dependencies or in your dev dependency but it's inside the requires right so internally they will have lot of dependencies so this file tells you all the things that are logged that are required to run your dev and the internal linking of requires of different libraries like angular dev kit architect will require core and rxjs and it also has a dependency here if you see it has a dependency on rxjs and then it has dependency on tslip so etc so it explains that's why sometimes it takes time when you do a npm install right clear so that is all about package.log package hyphen lock i hope it's clear i hope now you will be able to better understand what a package and package lock means and importantly you will be able to answer any questions that are asked to you in interviews about package or package hyphen lock if you have if you still have any doubts please do let me know in the comment section i'll be happy to discuss and help you in the next episode we will be learning about angular cli tutorial and we will learn that in detail so make sure that you don't want to miss on that one please do subscribe to my channel also if you like my work and tutorials please consider buying me a coffee at buy me a coffee.com slash arc tutorials thank you so much in advance i'll see you in the next episode

Channel: ARC Tutorials

Views: 8,161

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 beginners tutorials, angular 10 tutorials, angular full tutorial series, angular 2021 full course

Id: W9pbEwqfQd8

Length: 12min 29sec (749 seconds)

Published: Thu Oct 29 2020