Angular renderer vs Angular compiler

Question

I cannot clarify what exactly Angular renderer is. According to some source it is the part of compiler that compiles the templates to JS code.

According to some other source:

First, there was the original compiler (which was not referred to as a view engine). 
Then, for version 4, the team introduced the view engine, referred to as "renderer2." 
Ivy is next in line.

What I understand from the above is the renderer is actually the compiler itself.

And according to a third source:

When instantiating a component, Angular invokes `renderComponent` and associates 
the renderer it gets with that component instance. Everything Angular will do regarding 
rendering the component (creating elements, setting attributes, subscribing to events, …) 
will go through that renderer object.

That one is in line with another renderer approach: In a normal browser context Renderer2 is a simple default wrapper around DOM manipulation browser API`

So, could someone explain what's the exact role of Angular Renderer and what it is? Are there two different contexts for Renderer2 and renderer?

Answer 1

When you look around the web the distinction between the angular renderer and the angular compiler is not clear but they actually are different thing.

Angular Renderer

The angular renderer is a service provided in your angular application. You can replace it with whatever you want it only need to implement the Renderer2 interface. It's responsibility is to be a layer of abstraction on top of UI manipulations. The code produced by the angular compiler will make use of the provided renderer to manipulate the UI. This is a key part in angular's cross-platform capabiltities.

Here are some implementation of this Renderer

• Nativescript: https://github.com/NativeScript/nativescript-angular/blob/master/nativescript-angular/renderer.ts
• Web Worker https://github.com/angular/angular/blob/6.1.x/packages/platform-webworker/src/web_workers/ui/renderer.ts
• Server Side https://github.com/angular/angular/blob/6.1.x/packages/platform-server/src/server_renderer.ts
• Browser https://github.com/angular/angular/blob/6.1.x/packages/platform-browser/src/dom/dom_renderer.ts

Note: The renderer interface changed overtime as the compiler did too. The first interface was called Renderer until angular 4 where it was changed to Renderer2 and now we are about to see Renderer3 with Angular 7 and Ivy comming out

Angular Compiler

The angular compiler is the part that takes your angular templates and turn them into typescript classes which will contains a set of instructions that will make use of the angular renderer among other services. The compiled version of the templates is platform agnostic and will remains the same no matter which target you have.