Angular Interview Questions and Answers - Part 06
Angular is a popular open-source single-page application design framework and development platform. It is a robust front-end JavaScript framework that is widely used for front-end application development. Nowadays Angular is very famous as a frontend technology so it is very common for the interview point as well.
Introduction
This is the Angular Interview Questions and Answers series. Here we will see 200+ Most Frequently Asked Angular Interview Questions. This is the 6th part of the Angular Interview Questions and Answer series.
I will highly recommend that please visit the following posts before continuing to this part:
Please do visit our YouTube Channel here to watch Interview Questions & Answers and important technology videos.
In this part we will discuss the following Important Angular Interview Questions:
Q061. What is the difference between Angular vs React? What are the advantages of Angular over React?
Q062. Why do we need the compilation process in Angular? Which compiler is used by Angular?
Q063. What is JIT in Angular? How can you set JIT to be used in Angular compilation?
Q064. What is an AOT in Angular? What are the different phases of the AOT process?
Q065. What is the difference between AOT vs JIT in Angular? What are the advantages of AOT over JIT?
Q066. How can you use cookies in Angular? How do you set, get, and clear cookies in Angular?
Q067. What are the different module loading strategies in Angular applications?
Q068. How can you use cookies in Angular? How do you set, get, and clear cookies in Angular?
Q069. What is Lazy Loading in Angular? How do you implement Lazy Loading in Angular?
Q070. What is the difference between Eager Loading vs. Lazy Loading in Angular?
Q071. What is Preloading or Eager Lazy Loading in Angular? What is the difference between Pre Loading vs Lazy Loading?
Angular Interview Questions and Answers: Part 06
Q061. What is the difference between Angular vs React? What are the advantages of Angular over React?
Angular is an open-source JavaScript framework that is written in TypeScript. It was developed and powered by Google and is compatible with a number of code editors. The First version was called “AngularJS”, which was released in the year 2010. The year 2016 saw the release of “Angular”, which was the second version, and a complete rewrite of AngularJS. Angular is used in Google’s one of the most important projects, Google AdWords.
React is an open-source JavaScript library that was developed by Facebook. It is based on JSX (an extension of PHP) and JavaScript. The React Library divides the webpage into single components and simplifies the development of the interface. React was developed in the year 2012 when managing Facebook ads became difficult with simple HTML coding. It was open-sourced in the year 2013, and since then, it has been used by millions of developers. React has been extensively used in the UI of Facebook and Instagram. React uses server-side rendering to provide a flexible and performance-based solution.
In Angular apps, a Real DOM is used, which means the whole tree structure is refreshed when a single change is made. This makes the process slower. However, React uses a Virtual DOM, which allows the developers to make changes to the tree without the need to update the entire tree.
Advantages of Angular over React: Angular has MVC Architecture, Dependency Injection, Out-of-the-box Full Stack Framework, Two-way Data Binding, and Amazing App Structure for developing full SPA.
Angular vs React:
Angular developed by Google, is an open-source structural framework used to build dynamic web apps, while ReactJS, developed by Facebook, is an open-source library that allows you to build UI components.
Angular is a TypeScript-based web application framework, whereas React JS is a JavaScript-based library. Angular uses Typescript while React uses Javascript.
Angular is a JS framework built using TypeScript, whereas React JS is a JS library built using JSX.
React supports only one-way data binding and virtual DOM, whereas Angular supports both one-way and two-way data binding, along with Real DOM.
The biggest benefit of Angular is that it enables dependency injection. On the other hand, React allows us to either accomplish it ourselves or with the aid of a third-party library.
Angular is a part of the MEAN stack and is very compatible with many code editors. On the other hand, React is widely used to develop reusable HTML elements for front-end development.
Angular is used to build single-page applications using HTML and TypeScript. React JS is commonly used to create user interfaces for single-page applications from isolated components.
React.js is mostly used to build interactive UI components with frequently variable data, whereas Angular is used to build complex enterprise apps like progressive web apps and single-page apps. Angular can be used in both mobile and web development but React can be used in UI development only.
Q062. Why do we need the compilation process in Angular? Which compiler is used by Angular?
The Angular application consists of components and their HTML templates. Since the components and templates provided by Angular cannot be understood by the browser directly, Angular applications require a compilation process before they can run in a browser.
Angular uses two ways to compile your application:
- JIT(Just-in-Time) compilation
- AOT(Ahead-of-Time) compilation
In AOT compilation, both Angular HTML and TypeScript code are converted into efficient JavaScript code during the build phase before the browser runs it.
In JIT compilation, the application compiles inside the browser during runtime. Whereas in the AOT compilation, the application compiles during the build time. You can provide options in the TypeScript configuration tsconfig.json file that controls the compilation process.
Q063. What is JIT in Angular? How can you set JIT to be used in Angular?
Just-in-Time (JIT) is a type of compilation that compiles the angular app in the browser at runtime. JIT compilation was the default until Angular 8, but now the default is AOT after Angular 9 onwards.
When you run the ng build or ng serve CLI commands, the type of compilation (JIT or AOT) depends on the value of the AOT property in your build configuration specified in angular.json. By default, AOT is set to true.
Q064. What is an AOT in Angular? What are the different phases of the AOT process?
Ahead-of-time (AOT) is a type of compilation that compiles the angular app at build time instead of runtime. This is the default starting in Angular 9.
The Ahead-of-Time (AOT) compiler converts the Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser.
For using the AOT compiler explicitly you can use the following:
ng build --aot
ng serve --aot
Process of AOT Compilation: The AOT compilation works in three phases:
Phase 1: Code Analysis:
In this phase, the TypeScript compiler does some of the analytics work and the AOT collector creates a representation of the source code.
After analytics, it emits the file with the extension of .d.ts that the AOT Compiler needs to generate the application code. At the same time, AOT Collector collects the metadata and analyzes the recorded angular decorators like @Component, @NgModule, and @Directive. Once the analyzing process is done, it emits the metadata information in .metadata.json files.
The AOT compiler only understands a limited of JavaScript code. It doesn't know the whole JavaScript syntax. The Angular compiler also doesn't support the function or keyword that's not being exported. In Angular 5 and later, the compiler automatically performs this rewriting while emitting the .js file.
Phase 2: Code Generation:
The collector makes no attempt to understand the metadata that it collects and outputs to the .metadata.json file. The code collector only collects the code and gives the output in the .metadata.json file.
It represents the metadata and records the errors when it detects a metadata syntax violation. It is the compiler's job to interpret the .metadata.json in the code generation phase. It throws an error if there are any semantic errors.
The compiler understands all syntax forms that the collector supports, but it may reject syntactically correct metadata if the semantics violate compiler rules.
Phase 3: Template type checking and Validation:
In this phase, the Angular template compiler uses the TypeScript compiler to validate the binding expressions in templates. In this phase, the compiler's StaticReflector interprets the metadata collected in Phase 1, performs additional validation of the metadata, and throws an error if it detects a metadata restriction violation. You can enable this phase explicitly by setting the strictTemplates configuration option; see Angular compiler options.
Q065. What is the difference between AOT vs JIT in Angular? What is the advantage of AOT over JIT?
Ahead-of-time (AOT) compilation converts your code during the build time before the browser downloads and runs that code. This ensures faster rendering to the browser. To specify AOT compilation, include the --aot option with the ng build or ng serve command.
The Just-in-Time (JIT) compilation process is a way of compiling computer code to machine code during execution or run time. It is also known as dynamic compilation. JIT compilation is the default when you run the ng build or ng serve CLI commands. By default, angular builds and serves the application using the JIT compiler.
AOT vs JIT:
- JIT compiles the angular app in the browser at run-time while AOT compiles the angular app code at build time.
- In JIT codes compile before running but in AOT the code is compiled already before running.
- In JIT each file is compiled separately but in AOT all code is compiled together, in-line HTML/CSS in the scripts.
- In JIT there is no need to build after changing the app code as it automatically reflects the changes in your browser page. But in AOT it does not automatically detect the change.
- JIT is very suitable for local development while AOT is suitable for production builds.
Advantages of AOT over JIT:
Improved Performance and Faster Component Rendering: Since the application compiles before running inside the browser, the browser loads the executable code and renders the application immediately, which leads to faster rendering.
Early Error Detection: Developers can detect and handle errors during the building phase, which helps in minimizing errors. AOT compilation helps in detecting errors early at build time itself, allowing developers to catch errors before deploying the application.
Fewer Async Ajax Calls: In AOT the compiler sends the external HTML and CSS files along with the application, eliminating separate AJAX requests for those source files, which leads to fewer Ajax requests.
Smaller Bundle Size: By eliminating superfluous code and metadata, AOT compilation can minimize the size of the JavaScript bundle for the application, resulting in quicker downloads and less data usage. Also Fewer asynchronous requests.
Enhanced and Better Security: The AOT compiler adds HTML and templates into the JS files before they run inside the browser. Due to this, there are no extra HTML files to be read, which provides better security to the application. This minimizes the risk of security vulnerabilities like injection attacks and boosts overall security.
Q066. How can you use cookies in Angular? How do you set, get, and clear cookies in Angular?
Cookies are small packages of information that can be temporarily stored/saved by your browser and websites that are using cookies for multiple things. We already have an NPM package for Angular called "ngx-cookie-service" that can be used for cookie use.
npm install ngx-cookie-service
After installing the cookies dependency, we have to import the CookieService inside one of our modules and add them as a provider.
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [CookieService],
bootstrap: [AppComponent]
})
Now we can use it in our AppComponent and use the set, get, and delete methods of the CookieService.
To Set the cookie's value: this.CookieService.set('name-of-cookei',"value")
To Get the cookie's value: this.CookieService.get('name-of-cookei')
To Remove the cookie's value: this.CookieService.delete('name-of-cookei')
To Remove all the cookies' value: this.cookieService.deleteAll()
Q067. What are the different module loading strategies in Angular applications?
There are three module-loading strategies in Angular:
- Eager Loading
- Lazy Loading
- Pre-Loading
Eager Loading is the default module-loading strategy. Under this strategy, feature modules are loaded before the application starts. The AppModule is loaded eagerly before the application starts. However, the feature modules can be loaded either eagerly, lazily, or preloaded.
Lazy Loading is used to load feature modules on demand after the application starts. This helps to start the application faster. In lazy loading and preloading, modules are loaded asynchronously.
Pre-loading is used to load feature modules automatically after the application starts. Pre-loading is not frequently used in web application development. It’s favorable for medium-sized applications where it can make the application start faster since it will load all other modules later that are not required to run the application.
Q068. What is Eager Loading? How can you enable eager loading in Angular?
Eager Loading is the default module-loading strategy. Eager loading is loading modules before the application starts. Under this strategy, all the feature modules are loaded before the application starts and all required dependencies will be resolved. This will result in a bit of delay in the application start, but requests, after the application starts, will be much after the Lazy loading technique.
By default, the angular modules are eagerly loaded. The root application module i.e. AppModule is always eagerly loaded before the application starts. There is something called feature modules which holds all the features of each module which can be loaded in two ways namely eagerly or lazily or even preloaded in some cases. To load a feature module eagerly we need to import it into an application module using the import metadata of @NgModule decorator.
Only the first request to the application takes a long time, but the subsequent requests from that same client will be faster. This is because, with eager loading, all the modules must be loaded before the application starts. So depending on the number of modules and the internet connection speed, the first request may take a long time, but the subsequent requests from that same client will be faster because all the modules are already downloaded onto the client machine.
Eager Loading is used for small-sized applications where it’s not expensive to load all modules before the application starts. It’s also used for core modules and feature modules that are required to start the application.
For an Angular module to be eagerly loaded, there is nothing special that we have to do, it just needs to be referenced in the application root module.
Q069. What is Lazy Loading in Angular? How do you implement Lazy Loading in Angular?
Lazy loading refers to the technique of loading webpage elements only when they are required. Lazy loading is loading modules on demand. In Lazy loaded modules are loaded on demand when the user navigates to the routes in those respective modules.
To resolve the problem we faced in eager loading, we use asynchronous routing, which loads feature modules lazily, on demand. This can significantly reduce the initial load time of your application. It helps us to download the web pages in chunks instead of downloading everything in a big bundle.
The main advantage of Lazy loading is, that it can significantly reduce the initial application load time. With lazy loading configured, our application does not load every module on startup. Only the root module and any other essential modules that the user expects to see when the application first starts are loaded.
Lazy Loading is used in big-sized web applications where all other modules that are not required when the application starts can be lazily loaded.
However, there is a downside to lazy loading. When a route in a lazy-loaded module is first requested, the user has to wait for that module to be downloaded. We do not have this problem with eager loading, because all the modules are already downloaded, so the end user gets to see the component associated with the route without any wait time.
To load a feature module lazily we need to load it using loadChildren property in route configuration and that feature module must not be imported in the application module. Lazy loading generally is useful when the application is growing in size. In lazy loading, feature modules will be loaded on demand and hence application start will be faster.
To lazy load a module, it should not be referenced in any other module. If it is referenced, the module loader will eagerly load it instead of lazily loading it. To lazy load Angular modules, use loadChildren (instead of component) in your AppRoutingModule routes configuration as follows:
const routes: Routes = [
{
path: 'items',
loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
}
];
Q070. What is the difference between Eager Loading vs. Lazy Loading in Angular?
- Eager Loading is the default module-loading strategy in Angular. But for Lazy Loading, we need to configure it by using the loadChildren property.
- Eager Loading loads all the modules before the application starts. On the other hand in Lazy Loading modules are loaded on demand when the user navigates to that module.
- Lazy loading reduces initial load time while Eager loading takes much more time initially when the application starts.
- Eager Loading is typically used for small-size applications while Lazy Loading is suitable for small-size applications.
Q071. What is Preloading or Eager Lazy Loading in Angular? What is the difference between Pre Loading vs Lazy Loading?
Preloading is also often called Eager Lazy Loading. Preloading is the same as lazy loading but the lazy loaded modules can be preloaded in the background after the initial startup bundle is downloaded.
First, the module to bootstrap the application and eager loaded modules are downloaded. At this point, we have the application up and running and the user is interacting with the application. While the application has nothing else to download, it downloads angular modules configured to preload in the background.
So, by the time the user navigates to a route in a lazy loaded module, it is already pre-loaded, so the user does not have to wait and sees the component associated with that route right away. So with preloading modules, we have the best of both worlds i.e. Eager Loading and Lazy Loading.
To preload a feature module, we need to load it using the loadChildren property and configure the preloadingStrategy property in RouterModule.forRoot. That feature module must not be imported into the application module. When we assign the Angular PreloadAllModules strategy to the preloadingStrategy property, then all feature modules configured with loadChildren, are preloaded.
To preload selective modules, we need to use a custom preloading strategy. We should preload only those features that will be visited by users just after the application starts and the rest feature modules can be loaded lazily. In this way, we can improve the performance of our bigger size application.
Posts
No comments:
Post a Comment
Please do not enter any HTML. JavaScript or spam link in the comment box.