angular 6 - creating a (non root) module scoped service

As far as i know until angular 6 , all the @Ngmodule providers where registered on the root injector and were served in the main bundle even if only lazy loaded modules used them.

The only only exception to this was if we wanted to create a non singleton services in a component level:
https://angular.io/guide/dependency-injection#injectable-ngmodule-or-component

I want to create a singleton service which will be visible only to a specific module (not to the root module), and as a result of that will not be served in the main eagerly loaded bundle.

In saw that in angular 6 the module will no longer need to refer the service via the "providers" , but rather the service will now refer to the module.

This can be done by the "@Injectable" annotation and the "provideIn" attribute.

I didn't find a good and clear example of how can i add a module name which is not 'root', something like this:

@Injectable( provideIn: <MyLocalModule>)
export class SimpleServiceForLocalUseOnly […]

Importing the LazyLoaded module and writing it as "MyLocalModule" in the snippet above is causing a WARNING of Circular dependency.
I can solve this by moving the service to other module, but then i'm losing my initial purpose.

List of searched references:

https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

https://jaxenter.com/new-angular6-143995.html

https://www.ngdevelop.tech/angular-6-features/

https://blog.ninja-squad.com/2018/05/04/what-is-new-angular-6/

http://ankitsharmablogs.com/getting-started-with-angular-6-0/

https://www.youtube.com/watch?v=Xr5l7lT--YU

2 Answers
2

There seems to be some issues regarding circular dependency if we follow this setup according to the official docs:

import Injectable from '@angular/core';
import HeroModule from './hero.module';
import HEROES from './mock-heroes';

@Injectable(
// we declare that this service should be created
// by any injector that includes HeroModule.

providedIn: HeroModule,
)
export class HeroService
getHeroes() return HEROES;



You can either ignore the warnings that the compiler raises due to circular dependency between the Module, Service and Component. Or, fallback to the previous methods used in Angular 5.

Register service as providers in lazy loaded module, note that you should not import lazy loaded modules in your root app module:

@NgModule(
imports: [
RouterModule.forChild([ path: '', component: LazyComponent ]),
],
declarations: [
LazyComponent
],
providers: [YourServiceHere]
)
export class LazyLoadedModule


To provide a service in a specific module using the newer syntax you just do something like this:

import Injectable from "@angular/core";
import YourModule from "path/to/your.module";

@Injectable(
providedIn: YourModule
)
export class SomeModuleScopedService


reference: https://angular.io/guide/providers#providedin-and-ngmodules

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.