Top Angular 2 Interview Questions and Answers - Essential Guide for Job Seekers

To optimize an application for optimal performance in Angular 2, we have to follow the below-mentioned steps.

• Use of AOT compilation.
• With a large-size app, use lazy loading instead of the fully bundled app.
• Avoid un-necessary import statements in the application.
• Remove unused and unnecessary 3rd party libraries from the application.
• If not required, consider removing application dependencies.

Yes, Angular 2 is a true object-oriented development framework.

It allows us to specify the root level files. The compiler options required to compile a TypeScript project. It determines that the said directory is the TypeScript project root. Here is a JSON file describing to define a tsconfig.json file containing different parameters of the compilerOptions property:

{

    "compilerOptions": {
    "noImplicitAny": true,
    "module": "system",
    "removeComments": true,
    "strictNullChecks": true,
    "sourceMap": true,
    "allowUnreachableCode": false,
    "outFile": "../JS/TypeScript/BestInterviewQuestion.js"
  }
}

Here is an example of these options.

• target: It is used for the compiled output.
• module: It is used in the compiled output. the system is for SystemJS, common for CommonJS.
• moduleResolution: It is used to resolve module declaration files (.d.ts files). With the node approach, they are loaded from the node_modules.
• sourceMap: generate or not source map files to debug your application.
• emitDecoratorMetadata: emitDecoratorMetadata emit or not design-type metadata for decorated declarations in the source.
• experimentalDecorators: It enables or not experimental support for ES7 decorators,
• removeComments: remove comments or not
• noImplicitAny: It is used to allow or not the use of variables.

The Tree Shaking is a concept of dead code elimination from projects. The code present in your project but neither referenced nor used will be dropped here. It will eliminate the unused modules during the build process, making user application lightweight.

To avoid editor warning whilst defining customized typings, we have to prolong the kind definition for an external library as a accurate practice. Without altering any node_modules or current typings folder, we have to create a new folder named “custom_typings" and put all our customized kind definitions there.

Shadow DOM is an integral part of Web Components standard while enables users for style encapsulation and DOM tree. It helps users to hide DOM logic behind other elements. With the addition to it, we can also apply scoped styles to elements without showcasing them to the outer world.

To allow a load of external CSS styles in Angular 2 to affect component contents, we have to change view encapsulation which presents styles to components referring “bleed into”.

@Component({
   selector: 'some-component',
   template: '<div></div>',
   styleUrls: [
      'https://bestinterviewquestion.com/style.css',
      'app/local.css'
   ],
   encapsulation: ViewEncapsulation.None,
})
export class SomeComponent {}

Here is the steps to create a singleton service-

• Import the injectable member using import {Injectable} from '@angular/core';
• Import the HttpModule, Http and Response members’ as import { HttpModule, Http, Response } from '@angular/http';
• Add the decorator @Injectable()
• Export –
  export class UserService {
   constructor(private _http: Http) { }
}

In Angular 2, the polyfills.ts file is used to make user application compatible for various browsers. The code we write in Angular 2 is mostly in ES6, which is not compatible with Firefox or IE, and requires few environmental setups before they wither get viewed or used in browsers.

Angular offers Polyfills.ts file to help users with the required setup.