Borak - software developer illustrational
Blog
1.1. 2019 / 00:00

javascript

typescript

Angular 4+

Angular 8 - @Component decorator and url resolving in JIT compilation

In the next lines, I will shed some light on the way Angular 8 works with @Component decorator.
Decorators
Decorators make it possible to annotate and modify classes and properties at design time.

Basic functionality
While ES5 object literals support arbitrary expressions in the value position, ES6 classes only support literal functions as values. Decorators restore the ability to run code at design time, while maintaining a declarative syntax.

Typescript
In Typescript, decorators are an experimental feature that may change in future releases. Thus angular must set up typescript compilation with the following setup:
"compilerOptions": { "target": "ES5", "experimentalDecorators": true }

@Component decorators in Angular

Polyfils
Component decorators in angular are implemented with the help of the  „Reflect metadata library“, which serves as a polyfill. Decorators are not commonly a part of API of the most browsers yet.

Reflect-metadata library provides two ways of defining metadata:

Declarative definition of metadata -
class C {
  @Reflect.metadata(metadataKey, metadataValue)
method() {
  }
}

Imperative definition of metadata -
Reflect.defineMetadata(metadataKey, metadataValue, C.prototype, "method");

Implementation in Angular 8

Metadata function is defined in the way of Abstract factory pattern by the MakeDecorator function. This decorator accepts the class‘ constructor and ads the '__annotations__'  static
property including all the defined properties in the @Component decorator.

URLs resolving and asynchronicity
OK, but how the Angular resolves the urls, for example those defined in the styleUrls arrary located in the @Component decorators?
The main magic happens in the compiler. To be more specific in the terms of the Angular source code

packages/core/src/render3/jit/directive.ts
Line 30

Here, the
maybeQueueResolutionOfComponentResources(type, metadata);

checks for the urls in the decorator definition and resolves them by simple fetch API. As you can see, this task is asynchronous. Which basically means, that Angular keeps the Set of pendign url resolutions. Once, all the pending resolutions are resolved, Angular clears the notion in the Set and empties the que of resolution jobs. Angular postpones its work until the

componentResourceResolutionQueue

is empty.
Later on, it flushes


compileInjectable

Which adds othe metada which are needed for the injectable entities.

Templates and css compilers
Because Angular fetches css files through webpack loaders, which are preset to handle css, sass, less and includes even more preloaders.
More about webpack with Angular 8 in the next tutotrial.

How is it, that when loading a style as url, it is still handled by a webpack loader.
More about this in the next tutorial:
Angular 8 AOT and component styles handling.













More by Borak

To maximalize your user experience during visit to my page, I use cookies.More info
I understand

#BORAKlive

This page is subjected to the Creative Common Licence. Always cite the Author - Do not use the page's content on commercial basis. Comply with the licence 3.0 Czech Republic.
go to top