Log a circular dependency problem encountered

Recently, when I wanted to use a service, I reported a circular dependency problem.

The calling method given by the official guidance is very simple. Add notifyService to the constructor, and then call it directly.

 export class ThyNotifyBasicExampleComponent implements OnInit {
    constructor(private notifyService: ThyNotifyService) {}

    ngOnInit() {}

    showDefault() {
        this.notifyService.show({
            title: '添加项目成功！'
        });
    }
}

But when I used it, it reported a circular dependency of notifyService .
NG0200: Circular dependency in DI detected for ThyNotifyService
As shown

---

Try to fix:

After searching on Google, I first tried this method: Injector is constructed in the constructor,
Then assign values to the defined properties in the function.

 private payrollService:PayrollService;
constructor(injector:Injector) {
  setTimeout(() => this.payrollService = injector.get(PayrollService));
}

---

In Angular Injector (injector) is used to manage the creation and acquisition of service objects,
The Injector abstract class defines a get() abstract method, which is used to obtain the corresponding object from the injector according to the given Token. Every subclass of the Injector abstract class must implement this method.

Don't know why he said that doing this would solve the circular dependency problem, but after I tried it, it clearly didn't work.

---

Provide:

According to the error NO provide xxx, it can be guessed that a certain class is not provided

I found myself suddenly forgetting about the provide injection. So let's talk about

AngularJS documentation defines provider:
provider is an object with a $get() method. The injector calls the $get method to create a new service

There are many ways to register service classes with the injector in Angular:

@Injectable providedIn
@NgModule providers
@Component providers

1. providedIn property in @Injectable

 @Injectable({providedIn:'root'})
export class AService {
」

providedIn: 'root' tells Angular to register this service in the root injector.

If registered in this way, there is no need to write providers in the @NgModule decorator. And when the code is compiled and packaged, tree-shaking optimization will be performed to remove all services that are not used in the application. Relatively recommended.

2. providers attribute in @NgModule

 @NgModule({
    providers: [
        HeroService,
       // { provide: HeroService, useClass: HeroService }
    ],

If the service is not injected in the root injector, if we want to use the service in the component, we need to manually inject the service.

The injection is identified by the character name token of the parameter, so
The provide of { provide: HeroService, useClass: HeroService } is the name token we set, and useValue indicates which service to use.

If the name is the same as the service name, we can also simplify and use HeroService directly.

3. providers property in @Component metadata

 // service.ts
@Injectable() 
 
// component.ts
@Component({
  ...
  selector: 'app-heroes',
  providers: [ HeroService ]
})

This way is similar to @NgModule.

---

Since I don't know whether the external service I referenced is injected with the root injector, I first assumed that it was not injected, so I manually injected it in @NgModule. code show as below.

 @NgModule({
  declarations: [],
  imports: [
    CommonModule,
    IndexModule,
    LabelRoutingModule,
  ],
  providers: [
    ThyNotifyService
  ]
})

After the injection, the error is still reported.

Final solution:

Finally tried many times,
The solution is to introduce another ThyNotifyModule on the basis of providers ThyNotifyService. Lines 7 and 10 below.

 1 @NgModule({
2   declarations: [],
3   imports: [
4     CommonModule,
5     IndexModule,
6     LabelRoutingModule,
7     ThyNotifyModule
8   ],
9   providers: [
10    ThyNotifyService
11  ],
})

Since I don't know how these external component libraries are implemented, I didn't quite understand why ThyNotifyModule needs to be introduced when using ThyNotifyService.

The official did not make it clear that this needs to be introduced. So I tried it for a while.

Maybe something depends on ThyNotifyModule.

As for why privide can solve problems such as circular dependencies, because I have been busy recently, I will add it later when I have time.

refer to:
https://blog.csdn.net/sllailcp/article/details/102548144
https://yuyang041060120.github.io/2016/04/06/angular2-dependency-injection/

Replenish

Later, it was found that it was not a circular dependency problem, but that angular reported an error to us as a circular dependency.

The reason is simply No provider for ThyQueueStore.

Just provide ThyQueueStore.

Later, I introduced ThyNotifyModule, which may have provided ThyQueueStore by mistake.