Angular Interview Question and Answers with Live Examples - Part 2 | Angular Interview Questions

hi friends welcome back to our tutorials angular interview question and answers part 2 we are still learning with generic questions which are important from fundamental perspective and also some of the most asked questions with respect to your understanding on angular framework if you haven't checked out the previous part one please do do do so so that you get the correct understanding about the concepts that we have covered in part 1 once again if you have any questions any queries please drop them in the comments section I will be happy to help you and provide you free advice before we move on my request friends please do subscribe to my channel to keep supporting me so I can bring you more tutorials and that will be my encouragement thank you alright so let's get started first question on this part series is what is basel ii Basel II is getting extremely popular with each passing day Basel is a powerful build tool that's developed and massively used by Google it is used to keep track of all the dependencies between different packages and build targets in angular 8 you can build your CLI application using basil the entire angular framework itself is now being built in basil so we can understand how powerful the two leaves we have an option to use other tools but basil is getting increasingly popular so it's worth a while to give a thought understanding about it so now let's get into some hands-on section so what is the default port number that angular applications run on and how can you customize or how can you change it so the default port that angular applications run is 4200 we can easily change the port number by passing the below command which is ng sub - - port equal to new port number let's see that in action so I have my application here now let's go do that and we will see how to execute so I told you the command to run is ng so so when we do that it will by default build on port number 4200 let's give it a mineral to compile while it is building friends I request you please subscribe to my channel to keep supporting me alright so there we are now our application has been built and it's now ready so let's see the port number that it's serving on so we can see here it says angular live development server is listening on localhost 4200 like I said the default port that angular applications run is 4200 now let's see how we can customize and change it so the command I told you is ng so then you put - - port equal - and here you can specify the port number that you want to mention and run your application on it can be any port number any valid as long as it is not occupied so 1 0 0 I'm saying let's run the application alright 5 1 0 0 port just make sure that this port is not occupied else it will not be able to run the application that's one of the common mistakes that developers do is provide a port number which is already occupied and then the application doesn't serve alright so here we are we have compiled the app successfully and now the message space is listening on localhost 51 100 so now we have our application running on localhost 50 100 now let's see that in chrome I am going to change the port number and we can see that our application is up and running on localhost 51 hundred so far so good so let's see so we can see our application is running perfectly fine on localhost 5100 alright for let's go to the next one alright so what are the default testing frameworks available in angular default project setup in CLI so the default testing frameworks that are supported by vanilla project are Jasmine Karma and protractor Jasmine is used for writing unit tests karma is used for a test execution and test runner and protractor is used for end-to-end test scripts execution let's take a quick look about it as well before so you would see e - e folder under your angular a project directory that is for end-to-end execution and X end-to-end test scripts all the test scripts always ends with - spec dot yes so this is the end-to-end protractor test script that is run for jasmine and karma you would see under app for each of the components you would have a script file which is spec file so you can see here each component service everything will have a dot spec file that is dot spec godliest that is the test file and that is written in jasmine to run will use karma and for end-to-end we will use protractor explain package dot JSON file with the existence of packaged or Jason it will be very easy to manage the dependencies the project if you are using typescript in the angular project then we can mention the types to package and version of typescript that we are running in package tour Jason packaged on Jason is also used to manage the dependencies and the library framework versions let's take a quick look under your project structure you should have packaged or JSON file and for that you go and scroll you can see the project name you can see all the version numbers of the dependencies along with that we can also see the versions of the framework that we are running for example bootstrap is running on four dot 3.1 and then rxjs is running on 6.4 dot o and similarly you can see karma is running 4.1 etc the version typescript is running is 3.5 dot three so you can get all the version numbers of the libraries and framework that you are seeing in package dot JSON file what commands do we use to run the tests so this is another important question asked in most interviews is how do you do unit testing how do you do end-to-end testing so the answer is we write all our test scripts at the respective folder project directory if it is unit test we write under the source app if it is e to e we write it under the source it we folder let's see that quickly in action so like I said under source you would see all the spec tortillas files these are the unit scripts and under the project you see it we those are our protractor n2n scripts to run them we will use the command you can see here also the command ng test so we can just say npm test m so you can see internally it will resolve to ng test this command and that is what is being executed so this is how you run unit tests using ng test command and to run eat we will run engi it will let's see that also an option this will take a while but okay so there are some errors which is fine we'll resolve them later but for now the important thing is what are the commands to run that's ng test will help you test angular unit tests and ng e to e will help you run end-to-end scripts all right let's give it a minute to run all right well it's building and serving come first it combines the app and then it will open the karma runner and it will execute these scripts so it will give you a report like this failure success past everything but important thing that we are learning here is what are the commands do you learn to test your unit test as well as your end-to-end tests how do you upgrade angular apps so this is yet another thing like like we discussed in part one there are times when you start building in a certain version of language and then at with time we have to upgrade our angular app so the question comes in interviewees how do you upgrade angular apps right so the command that we use is ng update at the rate angular CLI at the rate angular slash core using this command we would be able to upgrade our angular app version we'll see that in just a bit once we have learnt about how to check the version we'll come back to this updating angular in just a while now how do you convert typescript code into JavaScript now this is yet another important question that is asked since we write all the code in typescript all the angular application are written in typescript and how dear is it convert to JavaScript so there is an OP there is a there is a word called transpiling so like how we have compiling similarly we have something called transpiling so using transpiling during the build the code from typescript gets converted into JavaScript in real time and that is what angular does when it builds the application so important thing to note and know is the interviewer wants you to speak about transpiling and he wants you to see that do you know the meaning of transpiling and do you understand the concept of how the typescript code gets converted into JavaScript now how do you find out the CLI version so let's see that so we use the command called ng - - version this would give us the version of what angular CLI you are running and what version of angular let's quickly see this match so we will type ng - - version so this should give you all the details so here you can see the angular CLI version is 8.3 we can see that angular version is a dot 2.13 and all the dev dependencies that are there right so to find out the details of the versions that you are running we need to use the command ng - - version now there are a lot of linting issues sometimes what is linting linting is to check that your code is correct it's implemented correct there are no syntactical errors especially with respect to typescript and the language itself so that's is that is what is called as linting now how do we link our application to check for the code quality we run the command ng length so we will write ng length so this would check the details you can see it stays linting green nation that's the name of the project I have given once this is done it will tell what errors for example you can see lint errors found in these listed points so these linting are nothing but like you can see here the yellow color line so here it says if you see problem loading so it shows you what problems you have in which files and how do you resolve them those are mostly with respect to ending with a new line or a white space or a curly brace alignment etc so that's something that we can easily fix so these are not major issues but you should be aware of the fact that there are lint issues and how do you find them using ng lint come on how can you get the window height and width in component class now this is another will come to component classes and details in our next part but for now what I want you to know is that there is an object called window which is available across all the components and services in angular applications so this window will provide you with browser height width and you don't have to inject you don't have to initiate that object is globally available so when you say window dot height or window dot width you would be able to get the applications high the browser's height and width easily all right now let's go to the next okay so this question is again little high level but what I would want you to do is just understand the basics of it because this is covered in detail when we talk about browsers and subscribe and unsubscribe but for now how do you unsubscribe and subscribe to observables we use the ng destroying method in on ng destroy method and we will do we will write something like subscription dot unsubscribe you will see that in detail but for now just remember that how do you unsubscribe we unsubscribe it on ng destroy on ng destroy I will talk about component lifecycle in in detail along with example for now just stay with me okay these are all little again detailed once I want to cover it along with services so we don't break the flow let's go to the CLI part first alright how do you disable the prefix of any component in angular CLI command now you would see that most of the components will come with prefix like for example app - component let me show you an example so you go to any component PS file and you will see that the selector name is prefixed here with app - country - maintenance so that is the prefix we are talking about like app now I don't want this for my component so how do we get it and how do I remove it like I don't want the prefix for my components or services so the way to do it is just disabling using the - - prefix equal to false so when we generate ng generate component component name let's say c1 and I'll write prefix equal to false so this way we can just say that the new component that we generate will not have the prefix let's see that in action I generated a component and go to PS file now you see there is no prefix that is app I can give any free prefix that I want but angular suggests that we should use app as the prefix that we want to attach it's a good practice right alright so this is another yet another concept foundational concept that people ask how do you optimize an angular application it's not generic it's foundational and it's important so how do you optimize an angular application consider lazy loading lazy loading is only loading of application modules which are required for that particular screen make sure that any third-party library which is not used is removed from the application we don't want unnecessary loading or making our application heavy because of including third-party libraries have all the dependencies and dev dependencies clearly separated out so this is important like we saw in packaged or JSON that we have some important dependencies and then we have some dev dependencies so we need to clearly separate them which will allow us to load the application faster make sure the application doesn't have any unnecessary import statements so we should not have any unnecessary import statements unless you are making a call in that particular service component or module make sure the application is bundled a glyph ID and tree-shaking is done which means you need to make sure that the code is optimized it's been reduced so the size is reduced the mapping is done correctly which means there is tree shaking that is applied consider ahead of time compilation that's another yet another important aspect to optimize the angular application what is ng zone optimized an angular app so zone dot J's is one of them angular dependencies which provides a mechanism called zones for encapsulating and intercepting async activities in the browser like set timeout set interval etc these zones are execution contexts that allow angular to track the start and completion of a securities zone dot J's provides a global zone that can be formed and extended to further and capsulate so those are some of the things that you can do with ng zone to optimize our applications we can see that in the end go to package dot JSON and search so we can see zoned on JSON line number 25 that already comes as part of angular CLI project right now it's back alright that covers our part two of our interview question and answers from here on we start with actual building blocks of angular covering modules compound routing services pipes directives testing bail compilation and much much more so stay with me on this as in the journey of learning angular interview question and answers if you like this video please like share comment and please don't forget to subscribe to my channel to keep supporting and encouraging me thank you so much stay tuned for part 3

Channel: ARC Tutorials

Views: 15,378

Keywords: Angular Interview Questions and Answers latest 2019, Angular Interview Questions with examples, angular interview questions and answers for experienced, angular interview questions for 2 years experience, interview questions and answers angular 2 4 5 6 7 8, interview questions on angular 2 4 5 6 7 8, angular interview questions and answers latest, angular interview questions 2019, interview questions angular 8, angular 8 interview questions

Id: XDRxq1Rr5lM

Length: 21min 2sec (1262 seconds)

Published: Mon Nov 18 2019