What is Tranpilation, Mapping, Dependency & Constructor Injection

If you are learning angular 5 then this question probably comes to your mind? what is Transpilation, Mapping, Dependency & Constructor Injection? So in this article, we will cover this topic independently. In this lesson, we are looking out the major concept of Angular 5. If you are learning angular 5 then these topics are really very important for you to understand.

Angular 5 is the latest version of angular in 2017. So in this article, we understand this concept of these few topics.


What is transpilation? well, Angular 5 is created using TypeScript and if you know web browser uses javascript to interpret the code. So the browser does not understand angular or TypeScript language rather than that browser compiles this code into JavaScript this is called “Transpilation”. A Transpilation is a piece of software that converts the source code of one language to another language.

So using Transpilation angular convert his code into JavaScript language. Well, then the browser understand it more easily.


What is Mapping? In the previous topic, we cover the concept of Transpilation. The Transpilation depends on the Mapping. So what is the mapping does mean here? The Map files are automatically generated by your transpiler and give the browser the information it needs to map the original TypeScript file code to deployed into JavaScript code.

So if you enable .map file in your browser then it will automatically look for them and pick them up, and use them. Map file combined, minified and transpiled file back to un unbuild state.

Dependency & Constructor Injection

What is the Dependency Injection? To understand this topic you need to know about OPP concept. If you are familiar with Java, .Net and C# then this thing is not unfamiliar to you. If you do not understand this concept in these languages we will cover this up in this article.

Dependency injection is the way to create an object that depends on another object. To understand this thing better we are taking the angular io code to give you an example.

So let’s focus on this example.

So first we will create a file called hero.ts

In this file we had created a class called Hero. In this class we put some properties id, name and isSecret.

Create mock-heroes.ts file

In this file we put call hero class using import statement and create a constant variable HEROES. Then we just specify some Json data to this variable.

After that create component.ts file

In this component, we just put the import statement and import the HEROES. So now you can use the heroes class component in the app hero list component.

After that,we will create a HeroServices class using this command

This command creates a service HeroService

After that create hero.services.ts file

Here we inject the service as a module. In the injectable, we just provide the HeroModule. So in the HeroServices Class, we can use the getHeroes() Method to return the HEROES json data.

If you do not understand the concept of dependency injection then we will cover this topic using the example. So just take a rest.

I hope I cover most of the things in this article. if not then just comment me I will cover these topics more briefly in subsequent articles.

So we will see you in the next article.