81. What are the ways to control AOT compilation?
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
82. What are the restrictions of metadata?
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.
83. What are the two phases of AOT?
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.
84. Can I use arrow functions in AOT?
No, Arrow functions or lambda functions can’t be used to assign values to the decorator properties. For example, the following snippet is invalid:
```javascript
@Component({
providers: [{
provide: MyService, useFactory: () => getService()
}]
})
```
To fix this, it has to be changed as following exported function:
```javascript
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.
85. What is the purpose of metadata json files?
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.
86. Can I use any javascript feature for expression syntax in AOT?
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.
87. What is folding?
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
```javascript
let selector = 'app-root';
@Component({
selector: selector
})
```
Will be folded into inline selector
```javascript
@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.
88. What are macros?
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,
```javascript
export function wrapInArray<T>(value: T): T[] {
return [value];
}
```
You can use it inside metadata as an expression,
```javascript
@NgModule({
declarations: wrapInArray(TypicalComponent)
})
export class TypicalModule {}
```
The compiler treats the macro expression as it written directly
```javascript
@NgModule({
declarations: [TypicalComponent]
})
export class TypicalModule {}
```
89. Give an example of few metadata errors?
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,
```javascript
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,
```javascript
// 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,
```javascript
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.
```javascript
providers: [
{ provide: MyStrategy, useFactory: function() { ... } },
{ provide: OtherStrategy, useFactory: () => { ... } }
]
```
You can fix this with exported function
```javascript
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:
```javascript
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
```javscript
import { user } from './user';
... //metadata
providers: [
{provide: Name, useValue: user.name},
{provide: Age, useValue: user.age},
]
```
90. What is metadata rewriting?
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).
Comments
Post a Comment
please do not enter any spam link in the comment box