{"id":5256,"date":"2018-05-17T00:00:00","date_gmt":"2018-05-16T22:00:00","guid":{"rendered":"https:\/\/www.freelancermap.com\/blog\/forroot-forchild-modulos-angular\/"},"modified":"2025-01-17T12:40:14","modified_gmt":"2025-01-17T11:40:14","slug":"forroot-forchild-modulos-angular","status":"publish","type":"post","link":"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/","title":{"rendered":"Usando forRoot() y forChild() para configurar m\u00f3dulos en Angular"},"content":{"rendered":"\n

Los m\u00f3dulos en Angular son bastante complejos y muchas veces cuesta entenderlos. Aunque la documentaci\u00f3n preparada por Angular sea detallada, sus m\u00faltiples \u00e1mbitos la hacen compleja. Sebasti\u00e1n Puentes, ingeniero en inform\u00e1tica, nos detalla en este art\u00edculo como inyectar configuraciones con forRoot() y forChild() en Angular.<\/strong><\/p>\n\n\n\n

Esencialmente, forRoot y forChild nos permiten tener control de los providers (nuestros injectables) dependiendo del tipo de carga que queramos darle. Esto puede permitirnos tener diferentes configuraciones para distintos casos de la carga.<\/p>\n\n\n\n

\u00bfCu\u00e1ndo se usa forRoot en Angular?<\/h2>\n\n\n\n

Se usa forRoot cuando un m\u00f3dulo es \u201ceager\u201d, esto es, no es lazy-loaded (lo cargamos al iniciar la aplicaci\u00f3n). Angular crea un factory para todos los m\u00f3dulos, excepto los m\u00f3dulos lazy, que al cargarse bajo demanda, tienen su propio factory. Cuando nosotros usamos forRoot(), lo que estamos haciendo es cargar un provider que va a ser inyectado hacia la \u201cra\u00edz\u201d de los m\u00f3dulos gracias a que usa el mismo factory que nuestro m\u00f3dulo principal.<\/p>\n\n\n\n

En t\u00e9rminos simples, esto significa que usar forRoot nos permite acceder a nuestros providers desde cualquier punto de la aplicaci\u00f3n que no sea lazy loaded. Entonces, si nosotros implementamos un ejemplo como:<\/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><\/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><\/p>\n\n\n\n

 return<\/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><\/p>\n\n\n\n

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

     {<\/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><\/p>\n\n\n\n

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

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

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

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

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

Lo que estamos haciendo es decir que ese m\u00f3dulo, y los providers, va a cargarse \u201cglobalmente\u201d para la app. En este caso, \u201cMyService\u201d sera la clase \u201cMyEagerService\u201d para cualquier modulo que no sea lazy-loaded de nuestra app.<\/p>\n\n\n\n

\n

\u00a1\u00danete a nuestra red de freelancers!
Perfil gratuito y 0% de comisiones sobre los proyectos.<\/p>\n\n\n

Reg\u00edstrate ahora<\/strong><\/span><\/a><\/div><\/br><\/p>\n<\/div><\/div>\n\n\n\n

\u00bfCu\u00e1ndo se usa forChild en Angular?<\/h2>\n\n\n\n

Se usa forChild al reves: cuando queremos entregar un provider que es visible solamente para los m\u00f3dulos \u201chijos\u201d de nuestro modulo, en el caso de que sean lazy loaded. Como cada modulo lazy se carga bajo demanda, tiene su propio inyector.<\/p>\n\n\n\n

Siguiendo con el ejemplo de arriba, podemos decir:<\/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><\/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><\/p>\n\n\n\n

 return<\/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><\/p>\n\n\n\n

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

     {<\/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><\/p>\n\n\n\n

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

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

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

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

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

En este caso, estamos diciendo que cuando el m\u00f3dulo sea lazy-loaded, nuestro provider \u201cMyService\u201d va a ser la clase MyLazyService.<\/p>\n\n\n\n

Podemos incluso definir no solo distintas clases para un mismo provider usando forRoot() y forChild(), si no que incluso, distintos providers dependiendo de como lo instanciamos.<\/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><\/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><\/p>\n\n\n\n

 return<\/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><\/p>\n\n\n\n

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

 };<\/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><\/p>\n\n\n\n

 return<\/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><\/p>\n\n\n\n

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

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

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

Aca tenemos un mismo modulo que cargar\u00e1 dos providers distintos dependiendo si es llamado como \u201cforRoot\u201d, o \u201cforChild\u201d.<\/p>\n\n\n\n

forRoot y forChild para inyectar configuraciones a m\u00f3dulos<\/h2>\n\n\n\n

M\u00e1s all\u00e1 de la utilidad de controlar que instanciamos al importar nuestros m\u00f3dulos, forRoot y forChild nos ofrecen algo mucho m\u00e1s \u00fatil: Poder inyectar configuraciones a nuestros m\u00f3dulos.<\/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><\/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><\/p>\n\n\n\n

}<\/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><\/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><\/p>\n\n\n\n

 return<\/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><\/p>\n\n\n\n

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

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

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

Aqu\u00ed, he definido una interfaz llamada ModuleConfig con un par\u00e1metro para mi modulo (environment). Esta interfaz se entrega como parametro al metodo forRoot(), el que toma ese objeto entrante defini\u00e9ndolo como el provider CONFIG.<\/p>\n\n\n\n

\u00bfQu\u00e9 quiere decir esto? Que al usar forRoot, el valor del provider CONFIG ser\u00e1 el que entregaremos como parametro a forRoot cuando lo llamemos.<\/p>\n\n\n\n

En t\u00e9rminos simples, al importar ExampleModule entregandole el objeto a forRoot, como en este ejemplo…<\/p>\n\n\n\n

@<\/span><\/span><\/span><\/span>NgModule<\/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><\/p>\n\n\n\n

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

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

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

 imports:<\/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><\/p>\n\n\n\n

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

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

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

…estamos dici\u00e9ndole a ExampleModule que use los valores definidos como par\u00e1metros como su provider de nombre CONFIG. Si llamamos a CONFIG.environment, su valor ser\u00e1 \u201ctesting\u201d.<\/p>\n\n\n\n

forChild podemos usarlo de la misma forma, sin embargo, lo usaremos cuando queramos configurar un m\u00f3dulo lazy loaded.<\/p>\n\n\n\n

Esto es especialmente util para configurar m\u00f3dulos que despu\u00e9s ser\u00e1n exportados de forma independiente, por ejemplo.<\/p>\n\n\n\n

Una advertencia sobre usar l\u00f3gica en los m\u00e9todos forRoot y forChild<\/h2>\n\n\n\n

Los m\u00e9todos forRoot y forChild, si bien son funciones,es recomendable que solo tengan \u201creturn\u201d, sin implementar m\u00e1s l\u00f3gica. Esto, debido a que por defecto angular compila las aplicaciones de producci\u00f3n, usando la compilaci\u00f3n AoT (Ahead of Time). Lamentablemente, si bien la logica que implementemos dentro de forRoot antes del return funcionara en una compilaci\u00f3n JiT, en AoT arrojar\u00e1 el siguiente error:<\/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><\/p>\n\n\n\n

Este c\u00f3digo, por ejemplo, no funcionar\u00e1 en AoT.<\/p>\n\n\n\n

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

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

}<\/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><\/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><\/p>\n\n\n\n

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

 return<\/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><\/p>\n\n\n\n

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

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

Pero como soluci\u00f3n, podemos usar un inicializador enganchandose al inicializador de Angular. Podemos definir un provider con el tag APP_INITIALIZER, y la funci\u00f3n que le entreguemos, se iniciar\u00e1 cuando parta nuestra app, siempre que nuestra funci\u00f3n sea una funci\u00f3n exportada.<\/p>\n\n\n\n

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

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

}<\/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><\/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><\/p>\n\n\n\n

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

 return<\/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><\/p>\n\n\n\n

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

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

Este c\u00f3digo si podr\u00e1 compilar en AoT, y el m\u00e9todo init() se ejecutar\u00e1 al cargar nuestra aplicaci\u00f3n.<\/p>\n\n\n\n

Esos son algunos usos interesantes para los metodos forRoot y forChild de los modulos Angular. Bien usados, pueden ser un gran apoyo en crear aplicaciones simples, limpias y escalables.<\/p>\n\n\n\n

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

Los m\u00f3dulos en Angular son bastante complejos y muchas veces cuesta entenderlos. Aunque la documentaci\u00f3n preparada por Angular sea detallada, sus m\u00faltiples \u00e1mbitos la hacen compleja. Sebasti\u00e1n Puentes, ingeniero en inform\u00e1tica, nos detalla en este art\u00edculo como inyectar configuraciones con forRoot() y forChild() en Angular.<\/p>\n","protected":false},"author":3099,"featured_media":21092,"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":[4023,3013],"tags":[],"class_list":["post-5256","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guias","category-carrera"],"yoast_head":"\nUsando forRoot() y forChild() para configurar m\u00f3dulos en Angular<\/title>\n<meta name=\"description\" content=\"Los m\u00f3dulos en Angular son bastante complejos.Lee como inyectar configuraciones con forRoot() y forChild() en Angular.\" \/>\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\/es\/forroot-forchild-modulos-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Usando forRoot() y forChild() para configurar m\u00f3dulos en Angular\" \/>\n<meta property=\"og:description\" content=\"Los m\u00f3dulos en Angular son bastante complejos.Lee como inyectar configuraciones con forRoot() y forChild() en Angular.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-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=\"2025-01-17T11:40:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap.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\/es\/forroot-forchild-modulos-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/\"},\"author\":{\"name\":\"Sebastian Puentes\",\"@id\":\"https:\/\/www.freelancermap.com\/blog\/#\/schema\/person\/eb0211314d95a70f05a9215aadc04ccc\"},\"headline\":\"Usando forRoot() y forChild() para configurar m\u00f3dulos en Angular\",\"datePublished\":\"2018-05-16T22:00:00+00:00\",\"dateModified\":\"2025-01-17T11:40:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/\"},\"wordCount\":1047,\"publisher\":{\"@id\":\"https:\/\/www.freelancermap.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap.jpg\",\"articleSection\":[\"Gu\u00edas & Art\u00edculos t\u00e9cnicos\",\"Trabajo & Carrera\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/\",\"url\":\"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/\",\"name\":\"Usando forRoot() y forChild() para configurar m\u00f3dulos en Angular\",\"isPartOf\":{\"@id\":\"https:\/\/www.freelancermap.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap.jpg\",\"datePublished\":\"2018-05-16T22:00:00+00:00\",\"dateModified\":\"2025-01-17T11:40:14+00:00\",\"description\":\"Los m\u00f3dulos en Angular son bastante complejos.Lee como inyectar configuraciones con forRoot() y forChild() en Angular.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/#primaryimage\",\"url\":\"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap.jpg\",\"contentUrl\":\"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap.jpg\",\"width\":1920,\"height\":1280,\"caption\":\"Development\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.freelancermap.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Usando forRoot() y forChild() para configurar m\u00f3dulos en 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":"Usando forRoot() y forChild() para configurar m\u00f3dulos en Angular","description":"Los m\u00f3dulos en Angular son bastante complejos.Lee como inyectar configuraciones con forRoot() y forChild() en Angular.","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\/es\/forroot-forchild-modulos-angular\/","og_locale":"en_US","og_type":"article","og_title":"Usando forRoot() y forChild() para configurar m\u00f3dulos en Angular","og_description":"Los m\u00f3dulos en Angular son bastante complejos.Lee como inyectar configuraciones con forRoot() y forChild() en Angular.","og_url":"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-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":"2025-01-17T11:40:14+00:00","og_image":[{"width":1920,"height":1280,"url":"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap.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\/es\/forroot-forchild-modulos-angular\/#article","isPartOf":{"@id":"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/"},"author":{"name":"Sebastian Puentes","@id":"https:\/\/www.freelancermap.com\/blog\/#\/schema\/person\/eb0211314d95a70f05a9215aadc04ccc"},"headline":"Usando forRoot() y forChild() para configurar m\u00f3dulos en Angular","datePublished":"2018-05-16T22:00:00+00:00","dateModified":"2025-01-17T11:40:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/"},"wordCount":1047,"publisher":{"@id":"https:\/\/www.freelancermap.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap.jpg","articleSection":["Gu\u00edas & Art\u00edculos t\u00e9cnicos","Trabajo & Carrera"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/","url":"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/","name":"Usando forRoot() y forChild() para configurar m\u00f3dulos en Angular","isPartOf":{"@id":"https:\/\/www.freelancermap.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap.jpg","datePublished":"2018-05-16T22:00:00+00:00","dateModified":"2025-01-17T11:40:14+00:00","description":"Los m\u00f3dulos en Angular son bastante complejos.Lee como inyectar configuraciones con forRoot() y forChild() en Angular.","breadcrumb":{"@id":"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/#primaryimage","url":"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap.jpg","contentUrl":"https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap.jpg","width":1920,"height":1280,"caption":"Development"},{"@type":"BreadcrumbList","@id":"https:\/\/www.freelancermap.com\/blog\/es\/forroot-forchild-modulos-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.freelancermap.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Usando forRoot() y forChild() para configurar m\u00f3dulos en 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":4023,"label":"Gu\u00edas & Art\u00edculos t\u00e9cnicos"},{"value":3013,"label":"Trabajo & Carrera"}]},"featured_image_src_large":["https:\/\/www.freelancermap.com\/blog\/wp-content\/uploads\/2018\/05\/pixabay_StockSnap-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":4023,"name":"Gu\u00edas & Art\u00edculos t\u00e9cnicos","slug":"guias","term_group":0,"term_taxonomy_id":4023,"taxonomy":"category","description":"","parent":3013,"count":9,"filter":"raw","cat_ID":4023,"category_count":9,"category_description":"","cat_name":"Gu\u00edas & Art\u00edculos t\u00e9cnicos","category_nicename":"guias","category_parent":3013},{"term_id":3013,"name":"Trabajo & Carrera","slug":"carrera","term_group":0,"term_taxonomy_id":3013,"taxonomy":"category","description":"","parent":0,"count":218,"filter":"raw","cat_ID":3013,"category_count":218,"category_description":"","cat_name":"Trabajo & Carrera","category_nicename":"carrera","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/www.freelancermap.com\/blog\/wp-json\/wp\/v2\/posts\/5256"}],"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=5256"}],"version-history":[{"count":4,"href":"https:\/\/www.freelancermap.com\/blog\/wp-json\/wp\/v2\/posts\/5256\/revisions"}],"predecessor-version":[{"id":45764,"href":"https:\/\/www.freelancermap.com\/blog\/wp-json\/wp\/v2\/posts\/5256\/revisions\/45764"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.freelancermap.com\/blog\/wp-json\/wp\/v2\/media\/21092"}],"wp:attachment":[{"href":"https:\/\/www.freelancermap.com\/blog\/wp-json\/wp\/v2\/media?parent=5256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelancermap.com\/blog\/wp-json\/wp\/v2\/categories?post=5256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelancermap.com\/blog\/wp-json\/wp\/v2\/tags?post=5256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}