What is purpose of using forRoot in NgModule?

Question

What is the purpose of using forRoot in NgModule?

Is it same as the providers in AngularJS 1.x?

How does it play the significant role in lazy loading?

TI

Answer 1

forRoot() will be used to inject the providers at the top of the application. The instance of Component and directive are created a new instance everytime when they are invoked. When you mention the same at the root of the application (using forRoot()) only one instance will be created.

Firstly, we need to understand that providers are injected with some difference than that components and directives are injected. When a class is annotated with @Injectable, only one instance of this class will be created upon call and is shared throughout the entire application. To do so, we have to add this(forRoot()) method when the class is imported in NgModule.

Hope you are clear now.

Answer 2

From the docs

forRoot creates a module that contains all the directives, the given routes, and the router service itself.

You can read more on why is it used from here

Answer 3

It has to do with singletons. Angular services are loaded onto the page 1 time (singleton) and all references point back to this 1 instance.

There is a risk that a lazy loaded module will try to create a 2nd instance of what should be a singleton, and the forRoot() method is a way to ensure that the app module / shared module / and any lazy loaded module all use the same 1 instance (the root instance).

More info copied from: Provide core singleton services module in Angular 2

The best approach is to create module with providers. Keep in mind that if your service is in shared module, you may get multiple instances of it. Best idea then is to configure module with Module.forRoot.

By convention, the forRoot static method both provides and configures services at the same time. It takes a service configuration object and returns a ModuleWithProviders.

Call forRoot only in the root application module, AppModule. Calling it in any other module, particularly in a lazy loaded module, is contrary to the intent and is likely to produce a runtime error.

Remember to import the result; don't add it to any other @NgModule list.

EDIT - FOUND SOME MORE INFORMATION ON THE ANGULAR DOCS IN REGARDS TO CODY'S QUESTION IN THE COMMENTS..

If a module provides both providers and declarations (components, directives, pipes) then loading it in a child injector such as a route, would duplicate the provider instances. The duplication of providers would cause issues as they would shadow the root instances, which are probably meant to be singletons. For this reason Angular provides a way to separate providers out of the module so that same module can be imported into the root module with providers and child modules without providers.

Create a static method forRoot() (by convention) on the module. Place the providers into the forRoot method as follows. To make this more concrete, consider the RouterModule as an example. RouterModule needs to provide the Router service, as well as the RouterOutlet directive. RouterModule has to be imported by the root application module so that the application has a Router and the application has at least one RouterOutlet. It also must be imported by the individual route components so that they can place RouterOutlet directives into their template for sub-routes.

If the RouterModule didn’t have forRoot() then each route component would instantiate a new Router instance, which would break the application as there can only be one Router. For this reason, the RouterModule has the RouterOutlet declaration so that it is available everywhere, but the Router provider is only in the forRoot(). The result is that the root application module imports RouterModule.forRoot(...) and gets a Router, whereas all route components import RouterModule which does not include the Router.

If you have a module which provides both providers and declarations, use this pattern to separate them out.

Answer 4

There are two ways to create a routing module:

RouterModule.forRoot(routes)

creates a routing module that includes the router directives, the route configuration and the router service

RouterModule.forChild(routes)

creates a routing module that includes the router directives, the route configuration but not the router service. The RouterModule.forChild() method is needed when your application has multiple routing modules.

Remember that the router service takes care of synchronization between our application state and the browser URL. Instantiating multiple router services that interact with the same browser URL would lead to issues, so it is essential that there’s only one instance of the router service in our application, no matter how many routing modules we import in our application.

When we import a routing module that is created using RouterModule.forRoot(), Angular will instantiate the router service. When we import a routing module that’s created using RouterModule.forChild(), Angular will not instantiate the router service.

Therefore we can only use RouterModule.forRoot() once and use RouterModule.forChild() multiple times for additional routing modules.