Angular Interview Questions – Part 2

Angular Interview Questions

1. What are Angular cli commands? 

angular-cli.json

Main.ts

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

tsconfig.json 

package.json

3. Which files Angular builds on ng-serve or ng-build?

inline.bundle.js

main.bundle.js

polyfills.bundle.js

vendor.bundle.js

Main.bundle.js.map

const numberPromise = new Promise((resolve) => {
    resolve(5);
});
numberPromise.then(value => console.log(value));
// will simply print 5 

const numberPromise = new Promise((resolve) => {
     resolve(5);
     resolve(10);
 });
 

numberPromise.then(value => console.log(value));
// still prints only 5

const numberObservable = new Observable((observer) => {
     observer.next(5);
     observer.next(10);
 });
 numberObservable.subscribe(value => console.log(value));
 // prints 5 and 10

const promise = new Promise(() => {
     console.log('I was called!');
 });

const observable = new Observable(() => {
     console.log('I was called!');
 });

observable.subscribe();
// just now "I was called!" gets printed

const waitOneSecondPromise = new Promise((resolve) => {
    console.log('I was called!'); 
 setTimeout(() => resolve(), 1000);
   });
waitOneSecondPromise.then(doSomething);
 // 500ms passes
waitOneSecondPromise.then(doSomethingElse);

const waitOneSecondObservable = new Observable((observer) => {
    console.log('I was called'); 
    setTimeout(() => observer.next(), 1000);
});

const sharedWaitOneSecondObservable = waitOneSecondObservable.share();

5. What is Typings in Angular?
6. What is *.d.ts file in Angular?

Typings are actually TypeScript Definitions that provide for example Intellisense support for Visual Studio.
Go to Npm/types website and find the framework which we want to include typings and get its typing name.
Run the command npm install –save @type/jquery

This command will install the jqeury and give us the autosense and remove the compilation errors of jquery code used in the html page. And it will also create a *.d.ts file which will hold the type defination for jquery which we can use in our code.

ng generate module CustomerDashboard

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class CustomerDashboardModule { }

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    CustomerDashboardModule // add the feature module here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

const routes: Routes = [
    { path: 'customer-list',
      loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) }
    ];

The Cross-Origin Resource Sharing standard works by adding new HTTP headers that allow servers to describe the set of origins that are permitted to read that information using a web browser.  Additionally, for HTTP request methods that can cause side-effects on server’s data (in particular, for HTTP methods other than GET, or for POST usage with certain MIME types), the specification mandates that browsers “preflight” the request, soliciting supported methods from the server with an HTTP OPTIONS request method, and then, upon “approval” from the server, sending the actual request with the actual HTTP request method.
Handling a simple request in CORS

HTTP Request:

POST /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.bob.com

The good news is that browsers don’t expect CORS response headers on same-origin requests. The response to a same-origin request is sent to user, regardless of whether it has CORS headers or not. However, if your server code returns an error if the Origin doesn’t match a list of allowed domains, be sure to include the origin the request comes from.
Here’s a valid server response; the CORS-specific headers are bolded

HTTP Response:

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

All CORS related headers are prefixed with “Access-Control-“. Here’s some more details about each header.

What is Preflight Request in CORS?

The browser first issues a preflight request, which is like asking the server for permission to make the actual request. Once permissions have been granted, the browser makes the actual request. The browser handles the details of these two requests transparently.
JavaScript: ( PUT / DELETE)

var url = 'http://api.alice.com/cors';
var xhr = createCORSRequest('PUT', url);
xhr.setRequestHeader(
    'X-Custom-Header', 'value');
xhr.send();

Preflight Request:

OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

In above response if browser gets the response for Origin and Access-Control-Request-Method then it will send the request to another server.

How to enable CORS in Spring application?

CORS on Apache Server
To add the CORS authorization to the header using Apache, simply add the following line inside either the <Directory>, <Location>, <Files> or <VirtualHost> sections of your server config (usually located in a *.conf file, such as httpd.conf or apache.conf), or within a .htaccess file:

Header set Access-Control-Allow-Origin "*"

CORS in Spring Boot

@CrossOrigin(origins = "http://localhost:9000")
@GetMapping("/greeting")
public Greeting greeting(@RequestParam(required=false, defaultValue="World") String name) {
        System.out.println("==== in greeting ====");
        return new Greeting(counter.incrementAndGet(), String.format(template, name));
}

10. What is AOT in Angular?11. What is Ahead Of Time Compiler in Angular12. What is difference between JIT and AOT in Angular?

Every Angular application requires a compilation process before they can run in the browser: the enriched components and templates provided by Angular cannot be understood by the browser directly.   The initial compiler in Angular 1.x and Angular 2 is called JiT (Just-in-Time) compiler. As for AoT, it stands for the Ahead-of-Time compiler that was recently introduced in Angular. Compared to the JiT compilation performed by Angular at run-time. The initial compiler in Angular 1.x and Angular 2 is called JiT (Just-in-Time) compiler. As for AoT, it stands for the Ahead-of-Time compiler that was recently introduced in Angular.