In this article, we’re going to examine a new Angular NodeInjector which heavily uses a bloom filter to retrieve a token. We’ll take a look at:

• How the NodeInjector looks like
• How Angular builds bloom filter for NodeInjector and when we can catch false positive values
• What’s the resolution algorithm for resolving dependencies in NodeInjector

Introduction#

The NodeInjector is one of the two new types(another one is R3Injector) of Angular injectors introduced by the Ivy renderer. We will be switched to them as soon as Ivy renderer has landed.

The NodeInjector is going to replace the current Element injector(Injector_ in the picture above) and reduce memory pressure in an Angular application by using bloom filter.

Let’s first take a look at a simple application I’ll use along the way:

@Component({
  selector: 'my-app',
  template: `
   <div dirA>
     <div dirB>Hello Ivy</div>
   </div>
  `
})
export class AppComponent {}

@Directive({ selector: '[dirA]' })
export class DirA {}

@Directive({ selector: '[dirB]' })
export class DirB {
  constructor(private rootComp: AppComponent) {}
}
<>

The app is pretty simple. We have a root AppComponent that contains two nested div elements. Also, there are two directives which are applied to those elements.

What we’re going to understand is how Angular will be able to get the root AppComponent instance in DirB directive.

Now that we have our goal defined, let’s get started.

#angular #dependency-injection #nodeinjector