Angular Interview Questions

Angular offers two ways to compile your application,

1. Just-in-Time (JIT)
2. Ahead-of-Time (AOT)

Just-in-Time (JIT) is a type of compilation that compiles your app in the browser at runtime. JIT compilation was the default until Angular 8, now default is AOT. When you run the ng build (build only) or ng serve (build and serve locally) 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.

Ahead-of-Time (AOT) is a type of compilation that compiles your app at build time. This is the default starting in Angular 9. When you run the ng build (build only) or ng serve (build and serve locally) 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.

ng build
ng serve

The Angular components and templates cannot be understood by the browser directly. Due to that Angular applications require a compilation process before they can run in a browser. For example, In AOT compilation, both Angular HTML and TypeScript code converted into efficient JavaScript code during the build phase before browser runs it.

Below are the list of AOT benefits,

1. Faster rendering: The browser downloads a pre-compiled version of the application. So it can render the application immediately without compiling the app.
2. Fewer asynchronous requests: It inlines external HTML templates and CSS style sheets within the application javascript which eliminates separate ajax requests.
3. Smaller Angular framework download size: Doesn't require downloading the Angular compiler. Hence it dramatically reduces the application payload.
4. Detect template errors earlier: Detects and reports template binding errors during the build step itself
5. Better security: It compiles HTML templates and components into JavaScript. So there won't be any injection attacks.

You can control your app compilation in two ways,

1. By providing template compiler options in the tsconfig.json file
2. By configuring Angular metadata with decorators

In Angular, You must write metadata with the following general constraints,

1. Write expression syntax with in the supported range of javascript features
2. The compiler can only reference symbols which are exported
3. Only call the functions supported by the compiler
4. Decorated and data-bound class members must be public.

The AOT compiler works in three phases,

1. Code Analysis: The compiler records a representation of the source
2. Code generation: It handles the interpretation as well as places restrictions on what it interprets.
3. Validation: In this phase, the Angular template compiler uses the TypeScript compiler to validate the binding expressions in templates.

No, Arrow functions or lambda functions can’t be used to assign values to the decorator properties. For example, the following snippet is invalid:

@Component({
providers: [{
provide: MyService, useFactory: () => getService()
}]
})

To fix this, it has to be changed as following exported function:

function getService(){
return new MyService();
}

@Component({
providers: [{
provide: MyService, useFactory: getService
}]
})

If you still use arrow function, it generates an error node in place of the function. When the compiler later interprets this node, it reports an error to turn the arrow function into an exported function. Note: From Angular5 onwards, the compiler automatically performs this rewriting while emitting the .js file.

The metadata.json file can be treated as a diagram of the overall structure of a decorator's metadata, represented as an abstract syntax tree(AST). During the analysis phase, the AOT collector scan the metadata recorded in the Angular decorators and outputs metadata information in .metadata.json files, one per .d.ts file.

No, the AOT collector understands a subset of (or limited) JavaScript features. If an expression uses unsupported syntax, the collector writes an error node to the .metadata.json file. Later point of time, the compiler reports an error if it needs that piece of metadata to generate the application code.

The compiler can only resolve references to exported symbols in the metadata. Where as some of the non-exported members are folded while generating the code. i.e Folding is a process in which the collector evaluate an expression during collection and record the result in the .metadata.json instead of the original expression. For example, the compiler couldn't refer selector reference because it is not exported

let selector = 'app-root';
@Component({
selector: selector
})

Will be folded into inline selector

@Component({
selector: 'app-root'
})

Remember that the compiler can’t fold everything. For example, spread operator on arrays, objects created using new keywords and function calls.

The AOT compiler supports macros in the form of functions or static methods that return an expression in a single return expression. For example, let us take a below macro function,

export function wrapInArray<T>(value: T): T[] {
return [value];
}

You can use it inside metadata as an expression,

@NgModule({
declarations: wrapInArray(TypicalComponent)
})
export class TypicalModule {}

The compiler treats the macro expression as it written directly

@NgModule({
declarations: [TypicalComponent]
})
export class TypicalModule {}

Below are some of the errors encountered in metadata,

1. Expression form not supported: Some of the language features outside of the compiler's restricted expression syntax used in angular metadata can produce this error. Let's see some of these examples,

1. export class User { ... }
const prop = typeof User; // typeof is not valid in metadata
2. { provide: 'token', useValue: { [prop]: 'value' } }; // bracket notation is not valid in metadata

2. Reference to a local (non-exported) symbol: The compiler encountered a referenced to a locally defined symbol that either wasn't exported or wasn't initialized. Let's take example of this error,

// ERROR
let username: string; // neither exported nor initialized

@Component({
selector: 'my-component',
template: ... ,
providers: [
{ provide: User, useValue: username }
]
})
export class MyComponent {}

You can fix this by either exporting or initializing the value,

export let username: string; // exported
(or)
let username = 'John'; // initialized

3. Function calls are not supported: The compiler does not currently support function expressions or lambda functions. For example, you cannot set a provider's useFactory to an anonymous function or arrow function as below.

providers: [
{ provide: MyStrategy, useFactory: function() { ... } },
{ provide: OtherStrategy, useFactory: () => { ... } }
 ]

You can fix this with exported function

export function myStrategy() { ... }
export function otherStrategy() { ... }
... // metadata
providers: [
{ provide: MyStrategy, useFactory: myStrategy },
{ provide: OtherStrategy, useFactory: otherStrategy },

4. Destructured variable or constant not supported: The compiler does not support references to variables assigned by destructuring. For example, you cannot write something like this:

import { user } from './user';

// destructured assignment to name and age
const {name, age} = user;
... //metadata
providers: [
{provide: Name, useValue: name},
{provide: Age, useValue: age},
]

You can fix this by non-destructured values

import { user } from './user';
... //metadata
providers: [
{provide: Name, useValue: user.name},
{provide: Age, useValue: user.age},
]

Metadata rewriting is the process in which the compiler converts the expression initializing the fields such as useClass, useValue, useFactory, and data into an exported variable, which replaces the expression. Remember that the compiler does this rewriting during the emit of the .js file but not in definition files( .d.ts file).