{"id":5255,"date":"2018-05-17T00:00:00","date_gmt":"2018-05-16T22:00:00","guid":{"rendered":"https:\/\/www.freelancermap.com\/blog\/forroot-forchild-angular\/"},"modified":"2024-08-06T13:00:18","modified_gmt":"2024-08-06T11:00:18","slug":"using-forroot-and-forchild-to-configure-modules-in-angular","status":"publish","type":"post","link":"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/","title":{"rendered":"Using forRoot() and forChild() to configure modules in Angular"},"content":{"rendered":"\n

Well defined angular modules are a cornerstone in good app making. Although the documentation provided by the Angular team is detailed, its multiple areas and possibilities make it a little bit complex to understand. Sebasti\u00e1n Puentes, computer engineer, explains in this article how to inject configurations with forRoot () and forChild () in Angular. Without further ado, we leave you with Sebastian.<\/strong><\/p>\n\n\n\n

Essentially, forRoot and forChild allow us to have control of the provider (our injectable) depending on the type of load we want to give them. This allows us to have different configurations for different load cases.<\/p>\n\n\n\n

When to use forRoot in Angular?<\/h2>\n\n\n\n

ForRoot is used when a module is “eager,” that is, it is not lazy-loaded (loads when the application starts). Angular creates a factory for all the modules, except for the lazy modules, which when loaded on demand, have their own factory. When we use forRoot(), we\u2019re loading a provider that is going to be injected into the “root” of the modules because it uses the same factory as our main module.<\/p>\n\n\n\n

\n

Offering your services as a freelancer?
Create your profile as a Developer and start attracting new clients.<\/p>\n\n\n

Sign up for free<\/strong><\/span><\/a><\/div><\/br><\/p>\n<\/div><\/div>\n\n\n\n

In simple terms, the use of forRoot allows us to access our providers from any point in the application that is not lazy loaded. So, for example, if we\u2019d implement something like this:<\/p>\n\n\n\n

export<\/span><\/span><\/span><\/span>class<\/span><\/span><\/span><\/span>ExampleModule<\/span><\/span><\/span><\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 static<\/span><\/span><\/span><\/span>forRoot<\/span><\/span><\/span><\/span>(): <\/span><\/span><\/span><\/span>ModuleWithProviders<\/span><\/span><\/span><\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 return<\/span><\/span><\/span><\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

   ngModule:<\/span><\/span><\/span><\/span>ExampleModule<\/span><\/span><\/span><\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

   providers:<\/span><\/span><\/span><\/span>[<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

     {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

       provide:<\/span><\/span><\/span><\/span>MyService<\/span><\/span><\/span><\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

       useClass:<\/span><\/span><\/span><\/span>MyEagerService<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

     }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

   ]<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 };<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

} }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

We\u2019d say that this module, and the providers, will be loaded “globally” for the app. In this case, “MyService” will be the “MyEagerService” class for any module that is not lazy-loaded in our app.<\/p>\n\n\n\n

When to use forChild in Angular?<\/h2>\n\n\n\n

ForChild is used the other way around: specifically when we want to deliver a provider that is visible only to the “children” modules of our module, in case they are lazy loaded. As each lazy module is loaded on demand, it has its own injector.<\/p>\n\n\n\n

Following the example above:<\/p>\n\n\n\n

export<\/span><\/span><\/span><\/span>class<\/span><\/span><\/span><\/span>ExampleModule<\/span><\/span><\/span><\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 static<\/span><\/span><\/span><\/span>forChild<\/span><\/span><\/span><\/span>(): <\/span><\/span><\/span><\/span>ModuleWithProviders<\/span><\/span><\/span><\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 return<\/span><\/span><\/span><\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

   ngModule:<\/span><\/span><\/span><\/span>ExampleModule<\/span><\/span><\/span><\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

   providers:<\/span><\/span><\/span><\/span>[<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

     {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

       provide:<\/span><\/span><\/span><\/span>MyService<\/span><\/span><\/span><\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

       useClass:<\/span><\/span><\/span><\/span>MyLazyService<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

     }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

   ]<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 };<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

} }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

With the example, we are saying that when the module is lazy-loaded, our provider “MyService” will be the class MyLazyService.<\/p>\n\n\n\n

We can even define not only different classes for the same provider using forRoot() and forChild(), but also different providers depending on how we instantiate it.<\/p>\n\n\n\n

export<\/span><\/span><\/span><\/span>class<\/span><\/span><\/span><\/span>ExampleModule<\/span><\/span><\/span><\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 static<\/span><\/span><\/span><\/span>forRoot<\/span><\/span><\/span><\/span>(): <\/span><\/span><\/span><\/span>ModuleWithProviders<\/span><\/span><\/span><\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 return<\/span><\/span><\/span><\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

   ngModule:<\/span><\/span><\/span><\/span>AModule<\/span><\/span><\/span><\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

   providers:<\/span><\/span><\/span><\/span>[MyService]<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 };<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

static<\/span><\/span><\/span><\/span>forChild<\/span><\/span><\/span><\/span>(): <\/span><\/span><\/span><\/span>ModuleWithProviders<\/span><\/span><\/span><\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 return<\/span><\/span><\/span><\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

   ngModule:<\/span><\/span><\/span><\/span>AModule<\/span><\/span><\/span><\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

   providers:<\/span><\/span><\/span><\/span>[MyLazyService]<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 };<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

} }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

In the example above, we have one module that will load two different providers depending on how it\u2019s loaded \u201cforRoot\u201d or \u201cforChild\u201d.<\/p>\n\n\n\n

forRoot and forChild to inject configurations to modules<\/h2>\n\n\n\n

Beyond the usage of control what we instantiate when importing our modules, forRoot and forChild offer us something much more useful. It allows us to inject configurations to our modules.<\/p>\n\n\n\n

export<\/span><\/span><\/span><\/span>interface<\/span><\/span><\/span><\/span>CoreModuleConfig<\/span><\/span><\/span><\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 environment<\/span><\/span><\/span><\/span>: <\/span><\/span><\/span><\/span>string<\/span><\/span><\/span><\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

export<\/span><\/span><\/span><\/span>class<\/span><\/span><\/span><\/span>ExampleModule<\/span><\/span><\/span><\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 static<\/span><\/span><\/span><\/span>forRoot<\/span><\/span><\/span><\/span>(conf: ModuleConfig): <\/span><\/span><\/span><\/span>ModuleWithProviders<\/span><\/span><\/span><\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 return<\/span><\/span><\/span><\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

   ngModule:<\/span><\/span><\/span><\/span>AModule<\/span><\/span><\/span><\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

   providers:<\/span><\/span><\/span><\/span>[{provide:CONFIG, useClass: conf}]<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 };<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

} }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

On the example above, I have defined an interface called ModuleConfig with a parameter for my module (environment). This interface is delivered as a parameter to the forRoot() method, which takes that incoming object, defining it as the CONFIG provider<\/p>\n\n\n\n

What does this mean? When using forRoot, the value of the CONFIG provider will be the one that we will deliver as a parameter to forRoot when we call it.<\/p>\n\n\n\n

In simple terms, when importing ExampleModule by delivering the object to forRoot, as in this example below:<\/p>\n\n\n\n

@<\/span><\/span><\/span><\/span>NgModule<\/span><\/span><\/span><\/span>({<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 declarations:<\/span><\/span><\/span><\/span>[<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

   AppComponent<\/span><\/span><\/span><\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

      …<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 ],<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 imports:<\/span><\/span><\/span><\/span>[<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

   ExampleModule<\/span><\/span><\/span><\/span>.<\/span><\/span><\/span><\/span>forRoot<\/span><\/span><\/span><\/span>({<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

     environment:<\/span><\/span><\/span><\/span>\u201ctesting\u201d<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

  }),<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

\u2026<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

We are telling ExampleModule to use the values defined as parameters as their provider named CONFIG. If we call CONFIG.environment, its value will be “testing.”<\/p>\n\n\n\n

We can use forChild in the same way, however; we will use it when we want to configure a lazy loaded module. This is especially useful for configuring modules that will later be exported independently.<\/p>\n\n\n\n

Find projects at zero commission fees on freelancermap \u00bb Browse the latest Angular projects<\/a><\/strong>s<\/strong><\/a><\/span><\/p>\n\n\n\n

A warning about using logic in the forRoot and forChild methods<\/h2>\n\n\n\n

For the forRoot and forChild methods, although they are functions, it is highly recommended that they only have “return”, without implementing more logic. This is so, because when we create our app using the production flag, Angular automatically uses AoT (Ahead of Time) compilation.<\/p>\n\n\n\n

Unfortunately, although the logic that we implemented within forRoot before the return will work in a JiT compilation it will throw the following error in AoT:<\/p>\n\n\n\n

Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

The following code will NOT<\/strong> work in AoT:<\/p>\n\n\n\n

function init(){<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 console.log(\u201chola!\u201d);<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

export<\/span><\/span><\/span><\/span>class<\/span><\/span><\/span><\/span>ExampleModule<\/span><\/span><\/span><\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 static<\/span><\/span><\/span><\/span>forRoot<\/span><\/span><\/span><\/span>(): <\/span><\/span><\/span><\/span>ModuleWithProviders<\/span><\/span><\/span><\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

      init();<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 return<\/span><\/span><\/span><\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

   ngModule:<\/span><\/span><\/span><\/span>AModule<\/span><\/span><\/span><\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

   providers:<\/span><\/span><\/span><\/span>[MyService]<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 };<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

But we can fix it using an initializer hooked to the Angular initializer. We can define a provider with the default token APP_INITIALIZER, that allows us to hook a function to the app initialization. The function that we deliver will start when our app starts provided that our function is an exported function.<\/p>\n\n\n\n

export function init(){<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 console.log(\u201chola!\u201d);<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

export<\/span><\/span><\/span><\/span>class<\/span><\/span><\/span><\/span>ExampleModule<\/span><\/span><\/span><\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 static<\/span><\/span><\/span><\/span>forRoot<\/span><\/span><\/span><\/span>(): <\/span><\/span><\/span><\/span>ModuleWithProviders<\/span><\/span><\/span><\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

      init();<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 return<\/span><\/span><\/span><\/span>{<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

   ngModule:<\/span><\/span><\/span><\/span>AModule<\/span><\/span><\/span><\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

   providers:<\/span><\/span><\/span><\/span>[MyService, {provide:APP_INITIALIZER,useClass:init]<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

 };<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/p>\n\n\n\n

This code will be able to compile in AoT, and the init() method will be executed when loading our application.<\/p>\n\n\n\n

Those are some interesting uses for the forRoot and forChil methods in Angular modules. Well used, they can be a great asset in creating simple, scalable apps<\/strong>.<\/p>\n\n\n\n

\"Looking<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"

Well defined angular modules are a cornerstone in good app making. Although the documentation provided by the Angular team is detailed, its multiple areas and possibilities make it a little bit complex to understand. Sebasti\u00e1n Puentes, computer engineer, explains in this article how to inject configurations with forRoot () and forChild () in Angular. Without further ado, we leave you with Sebastian.<\/p>\n","protected":false},"author":3099,"featured_media":21096,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","footnotes":""},"categories":[2993],"tags":[3581,3453],"class_list":["post-5255","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-careers","tag-technical-posts","tag-web-development"],"yoast_head":"\nUsing forRoot() and forChild() to configure modules in Angular<\/title>\n<meta name=\"description\" content=\"Modules made in Angular can be difficult to understand. Here're the instructions on how to implement configurations from ForRoot and ForChild.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using forRoot() and forChild() to configure modules in Angular\" \/>\n<meta property=\"og:description\" content=\"Modules made in Angular can be difficult to understand. Here're the instructions on how to implement configurations from ForRoot and ForChild.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Freelancer Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/freelancermapInternational\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-16T22:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-06T11:00:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sebastian Puentes\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@freelancer_INT\" \/>\n<meta name=\"twitter:site\" content=\"@freelancer_INT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sebastian Puentes\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/\"},\"author\":{\"name\":\"Sebastian Puentes\",\"@id\":\"https:\/\/www.freelancermap.com\/blog\/#\/schema\/person\/eb0211314d95a70f05a9215aadc04ccc\"},\"headline\":\"Using forRoot() and forChild() to configure modules in Angular\",\"datePublished\":\"2018-05-16T22:00:00+00:00\",\"dateModified\":\"2024-08-06T11:00:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/\"},\"wordCount\":1114,\"publisher\":{\"@id\":\"https:\/\/www.freelancermap.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap-1.jpg\",\"keywords\":[\"Technical posts\",\"Web development\"],\"articleSection\":[\"Careers\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/\",\"url\":\"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/\",\"name\":\"Using forRoot() and forChild() to configure modules in Angular\",\"isPartOf\":{\"@id\":\"https:\/\/www.freelancermap.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap-1.jpg\",\"datePublished\":\"2018-05-16T22:00:00+00:00\",\"dateModified\":\"2024-08-06T11:00:18+00:00\",\"description\":\"Modules made in Angular can be difficult to understand. Here're the instructions on how to implement configurations from ForRoot and ForChild.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/#primaryimage\",\"url\":\"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap-1.jpg\",\"contentUrl\":\"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap-1.jpg\",\"width\":1920,\"height\":1280,\"caption\":\"Development\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.freelancermap.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using forRoot() and forChild() to configure modules in Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.freelancermap.com\/blog\/#website\",\"url\":\"https:\/\/www.freelancermap.com\/blog\/\",\"name\":\"Freelancer Blog\",\"description\":\"Tips & Practical Advice for Freelancers and IT professionals\",\"publisher\":{\"@id\":\"https:\/\/www.freelancermap.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.freelancermap.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.freelancermap.com\/blog\/#organization\",\"name\":\"freelancermap.com\",\"url\":\"https:\/\/www.freelancermap.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.freelancermap.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2025\/02\/freelancermap-black-logo@4x.png\",\"contentUrl\":\"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2025\/02\/freelancermap-black-logo@4x.png\",\"width\":1044,\"height\":145,\"caption\":\"freelancermap.com\"},\"image\":{\"@id\":\"https:\/\/www.freelancermap.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/freelancermapInternational\/\",\"https:\/\/x.com\/freelancer_INT\",\"https:\/\/www.linkedin.com\/company\/freelancermap-gmbh\/\",\"https:\/\/www.instagram.com\/freelancermap_int\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.freelancermap.com\/blog\/#\/schema\/person\/eb0211314d95a70f05a9215aadc04ccc\",\"name\":\"Sebastian Puentes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.freelancermap.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e80ea9fa0ec6b65190c3158ef23b6bad?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e80ea9fa0ec6b65190c3158ef23b6bad?s=96&d=mm&r=g\",\"caption\":\"Sebastian Puentes\"},\"description\":\"Sebastian Puentes is a software engineer from Chile, currently working as an IT architect. Although he is mainly developing mobile apps and single-page apps, he's always looking for new development trends and do not hesitate to jump just in them.d\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/sebastian-puentes-prieto-20912434\"],\"url\":\"https:\/\/www.freelancermap.com\/blog\/author\/sebastian-puentes\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using forRoot() and forChild() to configure modules in Angular","description":"Modules made in Angular can be difficult to understand. Here're the instructions on how to implement configurations from ForRoot and ForChild.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/","og_locale":"en_US","og_type":"article","og_title":"Using forRoot() and forChild() to configure modules in Angular","og_description":"Modules made in Angular can be difficult to understand. Here're the instructions on how to implement configurations from ForRoot and ForChild.","og_url":"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/","og_site_name":"Freelancer Blog","article_publisher":"https:\/\/www.facebook.com\/freelancermapInternational\/","article_published_time":"2018-05-16T22:00:00+00:00","article_modified_time":"2024-08-06T11:00:18+00:00","og_image":[{"width":1920,"height":1280,"url":"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap-1.jpg","type":"image\/jpeg"}],"author":"Sebastian Puentes","twitter_card":"summary_large_image","twitter_creator":"@freelancer_INT","twitter_site":"@freelancer_INT","twitter_misc":{"Written by":"Sebastian Puentes","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/#article","isPartOf":{"@id":"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/"},"author":{"name":"Sebastian Puentes","@id":"https:\/\/www.freelancermap.com\/blog\/#\/schema\/person\/eb0211314d95a70f05a9215aadc04ccc"},"headline":"Using forRoot() and forChild() to configure modules in Angular","datePublished":"2018-05-16T22:00:00+00:00","dateModified":"2024-08-06T11:00:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/"},"wordCount":1114,"publisher":{"@id":"https:\/\/www.freelancermap.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap-1.jpg","keywords":["Technical posts","Web development"],"articleSection":["Careers"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/","url":"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/","name":"Using forRoot() and forChild() to configure modules in Angular","isPartOf":{"@id":"https:\/\/www.freelancermap.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap-1.jpg","datePublished":"2018-05-16T22:00:00+00:00","dateModified":"2024-08-06T11:00:18+00:00","description":"Modules made in Angular can be difficult to understand. Here're the instructions on how to implement configurations from ForRoot and ForChild.","breadcrumb":{"@id":"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/#primaryimage","url":"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap-1.jpg","contentUrl":"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap-1.jpg","width":1920,"height":1280,"caption":"Development"},{"@type":"BreadcrumbList","@id":"https:\/\/www.freelancermap.com\/blog\/using-forroot-and-forchild-to-configure-modules-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.freelancermap.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Using forRoot() and forChild() to configure modules in Angular"}]},{"@type":"WebSite","@id":"https:\/\/www.freelancermap.com\/blog\/#website","url":"https:\/\/www.freelancermap.com\/blog\/","name":"Freelancer Blog","description":"Tips & Practical Advice for Freelancers and IT professionals","publisher":{"@id":"https:\/\/www.freelancermap.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.freelancermap.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.freelancermap.com\/blog\/#organization","name":"freelancermap.com","url":"https:\/\/www.freelancermap.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.freelancermap.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2025\/02\/freelancermap-black-logo@4x.png","contentUrl":"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2025\/02\/freelancermap-black-logo@4x.png","width":1044,"height":145,"caption":"freelancermap.com"},"image":{"@id":"https:\/\/www.freelancermap.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/freelancermapInternational\/","https:\/\/x.com\/freelancer_INT","https:\/\/www.linkedin.com\/company\/freelancermap-gmbh\/","https:\/\/www.instagram.com\/freelancermap_int\/"]},{"@type":"Person","@id":"https:\/\/www.freelancermap.com\/blog\/#\/schema\/person\/eb0211314d95a70f05a9215aadc04ccc","name":"Sebastian Puentes","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.freelancermap.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e80ea9fa0ec6b65190c3158ef23b6bad?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e80ea9fa0ec6b65190c3158ef23b6bad?s=96&d=mm&r=g","caption":"Sebastian Puentes"},"description":"Sebastian Puentes is a software engineer from Chile, currently working as an IT architect. Although he is mainly developing mobile apps and single-page apps, he's always looking for new development trends and do not hesitate to jump just in them.d","sameAs":["https:\/\/www.linkedin.com\/in\/sebastian-puentes-prieto-20912434"],"url":"https:\/\/www.freelancermap.com\/blog\/author\/sebastian-puentes\/"}]}},"taxonomy_info":{"category":[{"value":2993,"label":"Careers"}],"post_tag":[{"value":3581,"label":"Technical posts"},{"value":3453,"label":"Web development"}]},"featured_image_src_large":["https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap-1-1024x683.jpg",720,480,true],"author_info":{"display_name":"Sebastian Puentes","author_link":"https:\/\/www.freelancermap.com\/blog\/author\/sebastian-puentes\/"},"comment_info":0,"category_info":[{"term_id":2993,"name":"Careers","slug":"careers","term_group":0,"term_taxonomy_id":2993,"taxonomy":"category","description":"<span data-sheets-value=\"{"1":2,"2":"The economy is changing and new job roles are being created thanks to the digitalization. We introduce you to the most demanded positions in the IT field and offer technical guides and other career guiandance."}\" data-sheets-userformat=\"{"2":4865,"3":{"1":0},"11":4,"12":0,"15":"Roboto"}\">The economy is changing and new job roles are being created thanks to the digitalization. We introduce you to the most demanded positions in the IT field and offer technical guides and other career guidance.<\/span>","parent":0,"count":278,"filter":"raw","cat_ID":2993,"category_count":278,"category_description":"<span data-sheets-value=\"{"1":2,"2":"The economy is changing and new job roles are being created thanks to the digitalization. We introduce you to the most demanded positions in the IT field and offer technical guides and other career guiandance."}\" data-sheets-userformat=\"{"2":4865,"3":{"1":0},"11":4,"12":0,"15":"Roboto"}\">The economy is changing and new job roles are being created thanks to the digitalization. We introduce you to the most demanded positions in the IT field and offer technical guides and other career guidance.<\/span>","cat_name":"Careers","category_nicename":"careers","category_parent":0}],"tag_info":[{"term_id":3581,"name":"Technical posts","slug":"technical-posts","term_group":0,"term_taxonomy_id":3581,"taxonomy":"post_tag","description":"","parent":0,"count":4,"filter":"raw"},{"term_id":3453,"name":"Web development","slug":"web-development","term_group":0,"term_taxonomy_id":3453,"taxonomy":"post_tag","description":"","parent":0,"count":6,"filter":"raw"}],"_links":{"self":[{"href":"https:\/\/www.freelancermap.com\/blog\/wp-json\/wp\/v2\/posts\/5255"}],"collection":[{"href":"https:\/\/www.freelancermap.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelancermap.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelancermap.com\/blog\/wp-json\/wp\/v2\/users\/3099"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelancermap.com\/blog\/wp-json\/wp\/v2\/comments?post=5255"}],"version-history":[{"count":5,"href":"https:\/\/www.freelancermap.com\/blog\/wp-json\/wp\/v2\/posts\/5255\/revisions"}],"predecessor-version":[{"id":43333,"href":"https:\/\/www.freelancermap.com\/blog\/wp-json\/wp\/v2\/posts\/5255\/revisions\/43333"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.freelancermap.com\/blog\/wp-json\/wp\/v2\/media\/21096"}],"wp:attachment":[{"href":"https:\/\/www.freelancermap.com\/blog\/wp-json\/wp\/v2\/media?parent=5255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelancermap.com\/blog\/wp-json\/wp\/v2\/categories?post=5255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelancermap.com\/blog\/wp-json\/wp\/v2\/tags?post=5255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}