Providers need to be declared as they \u2018provide\u2019 the objects to be injected \u2013 in many cases this will be a singleton reused whenever injected (much like a normal Spring bean in Java).<\/p>\n
To be visible everywhere in the entire application, they should be declared in the Providers list in the root @NgModule (e.g. app.module.ts).<\/p>\n
However if not used globally, they can be for example registered in a component whereupon they will be visible to that component and its children only.<\/p>\n
This angular doc here<\/a> discusses dependency injection and where to register providers.<\/p>\n This angular doc here<\/a> is the NgModule faq and also discusses the issue. It points out that registering the providers in the root AppModule (@NgModule as above) is the normal use case, and other cases are rare. In particular it makes the following points:-<\/p>\n Register application-wide providers in the root Lazy-loaded modules and their components can inject Register a service in More generally, prefer registering providers in modules<\/a> to registering in components.<\/p>\n Angular registers all startup module providers with the application root injector. The services created from root injector providers are available to the entire application. They are application-scoped<\/em>.<\/p>\n Certain services (such as the By contrast, Angular registers The \n
Should I add application-wide providers to the root AppModule<\/em> or the root AppComponent<\/em>?<\/h4>\n
AppModule<\/code>, not in the AppComponent<\/code>.<\/p>\nAppModule<\/code> services; they can’t inject AppComponent<\/code> services.<\/p>\nAppComponent<\/code> providers only<\/em> if the service must be hidden from components outside the AppComponent<\/code> tree. This is a rare use case.<\/p>\nDiscussion<\/font><\/h4>\n
Router<\/code>) only work when registered in the application root injector.<\/p>\nAppComponent<\/code> providers with the AppComponent<\/code>‘s own injector. AppComponent<\/code> services are available only to that component and its component tree. They are component-scoped<\/em>.<\/p>\nAppComponent<\/code>‘s injector is a child<\/em> of the root injector, one down in the injector hierarchy. For applications that don’t use the router, that’s almost<\/em> the entire application. But for routed applications, "almost" isn’t good enough.<\/p>\nAppComponent<\/code> services don’t exist at the root level where routing operates. Lazy-loaded modules can’t reach them. In the NgModule page sample applications, if you had registered UserService<\/code> in the AppComponent<\/code>, the HeroComponent<\/code> couldn’t inject it. The application would fail the moment a user navigated to "Heroes".<\/p>\n