Angular Service: Same instance vs Different instance of a service
Services are considered as singletons - same instance of the service is used across the application. This behavior is specified by "ProvidedIn" property of the Injector decorator.
Services: Same instance
Using { providedIn: "root", } in Injectable decorator in a service file during its creation and accessing the service by Dependency Injection at the component level. Any component in the application will have the same instance of the service.
@Injectable({ providedIn: "root", })
A new behavior was introduced in newer version of Angular. It introduced "[providers]" at component level since the "providers" was introduced at component level. This creates a different instance of the service that we import in [providers].
Services: Different instances
Remove { providedIn: "root"} from the Injectable decorator in the service file and add [providers] at component level. So, each component that has its own [providers] at component level has different instances of the same service.
@component({
selector: "app-first",
templateUrl: "./my.component.html",
styleUrls: ["./my.component.scss"],
providers: [Service],
})
So, we have two ways of using the services in Angular