Circular Dependency with Providedin

Question

I’m studying the Services of Angular and I came across two modes to make the Dependency injection, which are:

1) Use the providers of the module

2) Use the providedIn of the new updates of Angular 8x.

And for the sake of learning I used the first and then deleted, and now I’m using the second, but from the second I’m receiving the following erros and warnings:

ERROR:

componente2.component.ts:10 Uncaught ReferenceError: Cannot access 'Module1Module' before initialization
    at Module.Module1Module (componente2.component.ts:10)
    at Module../src/app/module1/service1.service.ts (service1.service.ts:5)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/module1/componente1/componente1.component.ts (main.js:542)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/module1/module1.module.ts (componente2.component.ts:10)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/app.module.ts (app.component.ts:8)
    at __webpack_require__ (bootstrap:79)
    at Module../src/main.ts (environment.ts:16)

WARNING 1:

 Circular dependency detected:
src\app\module1\componente1\componente1.component.ts -> src\app\module1\service1.service.ts -> src\app\module1\module1.module.ts -> src\app\module1\componente1\componente1.component.ts

WARNING 2:

Circular dependency detected:
src\app\module1\componente2\componente2.component.ts -> src\app\module1\service1.service.ts -> src\app\module1\module1.module.ts -> src\app\module1\componente2\componente2.component.ts

WARNING 3:

Circular dependency detected:
src\app\module1\module1.module.ts -> src\app\module1\componente1\componente1.component.ts -> src\app\module1\service1.service.ts -> src\app\module1\module1.module.ts

WARNING 4:

Circular dependency detected:
src\app\module1\service1.service.ts -> src\app\module1\module1.module.ts -> src\app\module1\componente1\componente1.component.ts -> src\app\module1\service1.service.ts

The message of warning tells me as if I was reusing the same thing in another file and so continues the cycle, but I found it quite strange, because I just removed the providers of the modules and within the services providedIn.

MODULE 1:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

import { Componente1Component } from "./componente1/componente1.component";
import { Componente2Component } from "./componente2/componente2.component";

@NgModule({
  declarations: [Componente1Component, Componente2Component],
  exports: [Componente1Component, Componente2Component],
  imports: [CommonModule]
})
export class Module1Module {}

MODULE 2:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { Componente3Component } from "./componente3/componente3.component";
import { Componente4Component } from "./componente4/componente4.component";

@NgModule({
  declarations: [Componente3Component, Componente4Component],
  exports: [Componente3Component, Componente4Component],
  imports: [CommonModule]
})
export class Module2Module {}

SERVICE 1:

import { Injectable } from "@angular/core";
import { Module1Module } from './module1.module';


@Injectable({
  providedIn: Module1Module
})
export class Service1 {
  public num: number;

  constructor() {
    this.num = Math.round(Math.random() * 1000);
    console.log("Service1 constructor()");
  }
}

SERVICE 2:

import { Injectable } from "@angular/core";

@Injectable({
  providedIn: "root"
})
export class Service2Service {
  text = "Service 2";

  constructor() {
    console.log("Service2 constructor()");
  }
}

Answer 1

@Injectable({
  providedIn: "root"
})

With a few rare exceptions, you should always use provideIn: Root, this is because service are singletons and when you add it to root it is like a Singleton for the entire application so when you inject your service as there is only one it knows exactly which to inject. The problem happens when you inject into the module and it is Lazy Loaded, can be loaded several times and consequently the service is generated several times so when it is injected it has no control of which instance was injected so generating various bugs and unwanted behaviors.