Angular integration for @abortor/core, providing scoped cancellation tied to Angular’s lifecycle.
injectAbortScope() to get a Scope that automatically disposes when the component (or service) is destroyed.provideAbortor() at app level, then injectRootedAbortScope() for per-component/sub-context scoping.takeUntilDestroyed and gives you fetch-like cancellation via signal.npm install @abortor/angular
Supports Angular 16–20 and RxJS 7+. Make sure your project also depends on
@abortor/core.
import { bootstrapApplication } from "@angular/platform-browser";
import { provideRouter } from "@angular/router";
import { provideAbortor } from "@abortor/angular";
import { AppComponent } from "./app.component";
import { appRoutes } from "./app.routes";
bootstrapApplication(AppComponent, {
providers: [
provideRouter(appRoutes),
provideAbortor({ label: "root-scope" }),
],
});
import { Component, inject, DestroyRef, signal } from '@angular/core';
import { injectRootedAbortScope } from '@abortor/angular';
@Component({...})
export class UsersComponent {
private readonly destroyRef = inject(DestroyRef);
private readonly scope = injectRootedAbortScope('UsersComponent');
users = signal<any[]>([]);
error = signal<string | null>(null);
async reload() {
const req = this.scope.child({ label: 'users:reload' });
try {
const res = await req.fetch('/api/users', {
signal: (AbortSignal as any).timeout?.(10000),
});
if (!res.ok) throw new Error(res.statusText);
if (req.signal.aborted) return;
this.users.set(await res.json());
} catch (e: any) {
if (!['AbortError', 'TimeoutError'].includes(e.name)) {
this.error.set(e.message || String(e));
}
} finally {
req.dispose();
}
}
}
provideAbortor(opts?): Registers a root Scope via Angular DI.injectAbortScope(opts?): Creates a scope tied to the current DestroyRef.injectRootedAbortScope(label?): Like injectAbortScope, but falls back to the root scope if provided.AbortController cleanup in Angular constructs.DestroyRef) and router cancellation patterns.