What is hierarchical dependency injection in Angular, and how does providing a service at the component level differ from providing it at the root level?

Angular's injector system is hierarchical, meaning a service provided inside a specific component's providers array creates a new, separate instance just for that component and its children, rather than sharing the single application wide instance created when a service is provided at the root level. This lets different parts of an app have their own isolated instance of the same service when needed.

@Component({
  selector: 'app-shopping-cart',
  providers: [CartService] // a new, separate instance just for this component and its children
})
export class ShoppingCartComponent {}