Angularの依存性注入は階層的です：インジェクターはコンポーネント/モジュールツリーを反映するツリーを形成します。コンポーネントが依存性をリクエストすると、Angularはプロバイダーを見つけるまでインジェクターツリーを上へ歩みます—これは共有されたシングルトンまたはコンポーネントごとの個別インスタンスのどちらかを取得するかを制御します。
Root injector (app-wide) ← providedIn: 'root' lives here (one singleton)
└─ Module/Route injectors
└─ Component injector ← providers: [...] in @Component
└─ Child component injector
ルックアップはリクエスト元のコンポーネントから始まり、ルートまでバブルアップします。見つかったプロバイダーが勝ちます。
// 1. App-wide singleton — ONE instance shared everywhere
@Injectable({ providedIn: "root" })
export class AuthService {}
// 2. Component-scoped — a NEW instance per component (and its children)
@Component({
selector: "app-widget",
providers: [DataService], // each <app-widget> gets its OWN DataService
})
export class WidgetComponent {}
これが主要なレバーです：providedIn: 'root'は単一の共有インスタンスを与えます。コンポーネントのproviders配列にプロバイダーをリストすると、そのコンポーネントのサブツリーにスコープされた新しいインスタンスが作成されます（コンポーネントごとに状態を分離するのに便利です）。
constructor(
@Optional() private logger: Logger, // null instead of error if not provided
@Self() private local: LocalService, // only look in THIS injector
@SkipSelf() private parent: ParentService, // skip self, start at the parent
@Host() private host: HostService, // stop at the host component
) {}
これらのデコレーターはAngularがインジェクターツリーを検索する距離を制御します—たとえば@Optionalは依存性が欠落しているときエラーを回避し、@SkipSelfは親のインスタンスを使用することを強制します。
export const API_URL = new InjectionToken<string>("apiUrl");
// provide: { provide: API_URL, useValue: "https://api.example.com" }
constructor(@Inject(API_URL) private apiUrl: string) {}
トークンは値/設定（クラスだけではなく）を注入でき、実装を入れ替えることができます（useClass、useValue、useFactory）。
階層的インジェクターを理解することで、サービスがアプリ全体で共有されるのか、コンポーネントごとに複製されるのか、という理由が説明されます—これは「なぜこれらのコンポーネントは状態を共有/非共有しているのか？」という混乱の頻繁な原因です。
プロバイダーのスコープ（root対コンポーネントproviders）を制御し、修飾子（@Optional、@SkipSelf）を使用し、設定/入れ替え可能な実装のための注入トークンを使用することが、Angularの依存性注入をアーキテクチャとテストの両方で強力にしています。