angular7 WARNING in Circular dependency detected: - angular7

Question

I am trying to register a service toa specific module with the help of 'provideIn' attribute in my angular7 app.
test.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { TestComponent} from './test.component'
#NgModule({
declarations: [TestComponent],
imports: [
CommonModule
],
exports: [TestComponent]
})
export class TestModule { }
test.component
import { Component, OnInit } from '#angular/core';
import { TestServiceService } from '../test-service.service';
#Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
constructor(public service: TestServiceService) { }
ngOnInit() {
}
}
test-service.ts
import { Injectable } from '#angular/core';
import { TestModule } from './test/test.module';
#Injectable({
providedIn: TestModule
})
export class TestServiceService {
val = 3;
constructor() { }
getDetails() {
return this.val;
}
}
when I run my app it shows below error
ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[TestComponent -> TestServiceService]:
StaticInjectorError(Platform: core)[TestComponent -> TestServiceService]:
NullInjectorError: No provider for TestServiceService!
when I change provideIn atrribute value as 'root' everything works fine.How can I register a service to specific module with the help of 'provideIn' attribute in angular7?

Answer 1

TestService has to be depend on TestModule in order to use providedIn to provide the service to the module. This creates a circular dependency, because TestModule has to depend on TestComponent which depends on TestService. Define the provider in the module so that the module depends on the component and the service.
#NgModule({
declarations: [TestComponent],
imports: [
CommonModule
],
providers: [
TestService
],
exports: [TestComponent]
})
export class TestModule { }
Define the service as Injectable, and set providedIn to null.
#Injectable({
providedIn: null
})
export class TestServiceService {
val = 3;
constructor() { }
getDetails() {
return this.val;
}
}

Answer 2

Change test.component to this :
import { Component, OnInit } from '#angular/core';
import { TestServiceService } from '../test-service.service';
#Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss'],
providers : [TestServiceService]
})
export class TestComponent implements OnInit {
constructor(public service: TestServiceService) { }
ngOnInit() {
}
}
and if you want to have single instance of service in module change test.module.ts to this :
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { TestComponent} from './test.component'
#NgModule({
declarations: [TestComponent],
imports: [
CommonModule
],
providers :[TestServiceService ],
exports: [TestComponent]
})
export class TestModule { }
do one of them