@cometchat/skills 4.4.2 → 5.0.0

package/skills/cometchat-angular-calls/references/add-calls-to-existing-chat.md

@@ -1,96 +0,0 @@
-# Adding calls to an existing chat integration (Angular)
-
-Same SDK as web; Angular-specific deltas: NgZone wrapping, NgModule registration, root-level CometChatIncomingCall mounting.
-
-**Read first:** `cometchat-react-calls/references/add-calls-to-existing-chat.md` — canonical web steps.
-
----
-
-## Step 1 — Install + init
-
-```bash
-npm install @cometchat/calls-sdk-javascript@5
-```
-
-Update your existing init (typically in an `AppInitService`):
-
-```ts
-@Injectable({ providedIn: "root" })
-export class AppInitService {
-  async init(): Promise<void> {
-    const settings = new CometChat.AppSettingsBuilder().setRegion(env.REGION).build();
-    await CometChat.init(env.APP_ID, settings);
-    await CometChatCalls.init({ appId: env.APP_ID, region: env.REGION });
-  }
-}
-```
-
----
-
-## Step 2 — Login
-
-In your auth service, after `CometChat.login`:
-
-```ts
-const user = await CometChat.login(uid, env.AUTH_KEY);
-const authToken = user.getAuthToken();
-// CometChatCalls.login(uid, authKey?) takes a UID; to authenticate with a token use loginWithAuthToken:
-await CometChatCalls.loginWithAuthToken(authToken);
-```
-
----
-
-## Step 3 — Mount IncomingCall at app root
-
-```html
-<!-- app.component.html -->
-<router-outlet></router-outlet>
-<cometchat-incoming-call></cometchat-incoming-call>
-```
-
-```ts
-// app.module.ts (or standalone-component imports)
-import { CometChatIncomingCall } from "@cometchat/chat-uikit-angular";
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [CometChatIncomingCall, /* ... */],
-})
-export class AppModule {}
-```
-
----
-
-## Step 4 — NgZone wrap on calls events
-
-If you subscribe to `CometChatCalls.addEventListener` outside the kit's components, wrap with `NgZone.run`:
-
-```ts
-@Injectable({ providedIn: "root" })
-export class CallEventsService {
-  constructor(private zone: NgZone) {
-    CometChatCalls.addEventListener("onSessionLeft", () => {
-      this.zone.run(() => this.onSessionLeft$.next());
-    });
-  }
-}
-```
-
----
-
-## Verification checklist
-
-- [ ] `@cometchat/calls-sdk-javascript@^5` in package.json
-- [ ] Calls SDK init runs after chat SDK init in `AppInitService`
-- [ ] `CometChatCalls.loginWithAuthToken(authToken)` after `CometChat.login` (NOT `CometChatCalls.login`, which expects a UID)
-- [ ] `<cometchat-incoming-call>` rendered at app root (sibling of `router-outlet`)
-- [ ] All custom `addEventListener` callbacks wrapped in `NgZone.run`
-- [ ] Run `cometchat verify --calls` — should pass
-
----
-
-## Pointers
-
-- `cometchat-react-calls/references/add-calls-to-existing-chat.md` — canonical
-- `cometchat-angular-calls/SKILL.md`
-- `references/ngzone-and-async-callbacks.md`

package/skills/cometchat-angular-calls/references/call-layouts.md

@@ -1,123 +0,0 @@
-# Call layouts on Angular
-
-Same SDK API as web. Angular wraps layout state in a service so multiple components (toolbar, sidebar, header) can stay in sync.
-
-**Canonical docs:** https://www.cometchat.com/docs/calls/javascript/call-layouts
-**Read first:** `cometchat-react-calls/references/call-layouts.md` — layout matrix + when to lock.
-
----
-
-## Layout service
-
-```ts
-import { Injectable, NgZone, OnDestroy } from "@angular/core";
-import { BehaviorSubject } from "rxjs";
-import { CometChatCalls } from "@cometchat/calls-sdk-javascript";
-
-export type CallLayout = "TILE" | "SIDEBAR" | "SPOTLIGHT";
-
-@Injectable({ providedIn: "root" })
-export class CallLayoutService implements OnDestroy {
-  readonly layout$ = new BehaviorSubject<CallLayout>("TILE");
-
-  // addEventListener returns an unsubscribe fn — there is NO CometChatCalls.removeEventListener.
-  private off: () => void;
-
-  constructor(private zone: NgZone) {
-    this.off = CometChatCalls.addEventListener("onCallLayoutChanged", (next: string) => {
-      this.zone.run(() => this.layout$.next(next as CallLayout));
-    });
-  }
-
-  set(layout: CallLayout): void {
-    CometChatCalls.setLayout(layout);   // static runtime layout switch — valid
-    this.layout$.next(layout);
-  }
-
-  ngOnDestroy(): void {
-    this.off();
-  }
-}
-```
-
----
-
-## Switcher component (mat-button-toggle-group)
-
-```ts
-@Component({
-  selector: "app-layout-switcher",
-  template: `
-    <mat-button-toggle-group
-      [value]="layout$ | async"
-      (change)="onChange($event.value)"
-      aria-label="Call layout"
-    >
-      <mat-button-toggle value="TILE" aria-label="Tile layout">Tile</mat-button-toggle>
-      <mat-button-toggle value="SIDEBAR" aria-label="Sidebar layout">Sidebar</mat-button-toggle>
-      <mat-button-toggle value="SPOTLIGHT" aria-label="Spotlight layout">Spotlight</mat-button-toggle>
-    </mat-button-toggle-group>
-  `,
-})
-export class LayoutSwitcherComponent {
-  layout$ = this.svc.layout$;
-  constructor(private svc: CallLayoutService) {}
-  onChange(layout: CallLayout) {
-    this.svc.set(layout);
-  }
-}
-```
-
-`mat-button-toggle-group` already wires up `role="radiogroup"` semantics — no extra ARIA needed.
-
----
-
-## Pass initial via session settings
-
-`joinSession` takes a **`SessionSettings` object**, not a builder result. The initial layout and
-the change-layout button visibility are plain object fields (`layout`, `hideChangeLayoutButton`).
-The builder has NO `setLayout` (its layout setter is the deprecated `setMode`) and NO
-`setHideChangeLayoutButton`, and its output (`CallSettings`) is not accepted by `joinSession`.
-
-```ts
-const sessionSettings = {
-  sessionType: "VIDEO",
-  layout: "SPOTLIGHT",
-  hideChangeLayoutButton: true,   // if you ship LayoutSwitcherComponent
-} as const;
-
-await CometChatCalls.joinSession(callToken, sessionSettings, container.nativeElement);
-```
-
-To switch layout at runtime use the static `CometChatCalls.setLayout(layout)` (as the
-`CallLayoutService.set` above does).
-
----
-
-## Anti-patterns
-
-Web sister rules apply, plus Angular-specific:
-
-1. **No `NgZone.run` wrap on the SDK callback.** Layout changes via the kit's switcher don't update the toggle group in OnPush components.
-2. **Service provided in a feature module instead of root.** Layout state resets when navigating away and back.
-3. **`(click)` on each toggle setting layout individually.** `mat-button-toggle-group`'s `(change)` is the right hook — single source of truth.
-
----
-
-## Verification checklist
-
-- [ ] `CallLayoutService` provided in root
-- [ ] `NgZone.run` wraps the SDK callback
-- [ ] `mat-button-toggle-group` `(change)` calls `svc.set` (which calls static `CometChatCalls.setLayout`)
-- [ ] Initial layout via the `SessionSettings` object `{ layout, hideChangeLayoutButton }` passed to `joinSession` (no `CallSettingsBuilder`)
-- [ ] Listener unsubscribe fn captured + called in `ngOnDestroy` (no `removeEventListener`)
-- [ ] Browser smoke: 3 tabs, each picks a different layout, no cross-talk
-
----
-
-## Pointers
-
-- `cometchat-react-calls/references/call-layouts.md` — sister
-- `cometchat-angular-calls` SKILL.md
-- `references/ngzone-and-async-callbacks.md`
-- Canonical docs: https://www.cometchat.com/docs/calls/javascript/call-layouts

package/skills/cometchat-angular-calls/references/call-session.md

@@ -1,167 +0,0 @@
-# Call session — joinSession with no ringing (Angular)
-
-Same SDK API as web. This file mirrors the upstream Angular sample at `calls-sdk-javascript-5/sample-apps/cometchat-calls-sample-app-angular/src/app/pages/join-session/`. Customer-validated against the v5 SDK as the known-good shape.
-
-**Read first:** `cometchat-react-calls/references/call-session.md` — full architecture (sessionId strategies, server-side authorization, token generation), then come back here for Angular specialization.
-
----
-
-## Hard rules (Angular-specific overrides on top of the React-side rules)
-
-1. **Use a signal for `inMeeting` state, `@if` to render the container, `viewChild` to read it.** This is the upstream sample's exact shape and avoids stale-template traps under OnPush change detection.
-2. **Container CSS:** `position: fixed; top: 0; left: 0; width: 100vw; height: 100vh`. Matches the sample. Flex-derived sizing inside nested route outlets has produced "iframe renders at 0×0 → no video" in customer integrations.
-3. **Pass an empty `{}` settings object.** Explicit `{ sessionType: "VIDEO", layout: "TILE" }` is type-valid but the sample app uses `{}` — that's the empirically-validated combination.
-4. **`onConnectionClosed`** is the cleanup event, not `onSessionLeft`. Fires on ANY termination (peer left, network died, in-iframe Leave button).
-5. **NgZone.run around router navigation in the event listener.** SDK events fire outside Angular's zone; raw router calls won't trigger change detection.
-6. **For standalone session-only integrations, the Chat SDK is OPTIONAL.** Use `CometChatCalls.init({appId, region, authKey})` + `CometChatCalls.login(uid)` alone. The upstream sample never imports `@cometchat/chat-sdk-javascript`. Keep dual-SDK only for additive (chat + calls) integrations.
-
----
-
-## Component (signals + @if + viewChild)
-
-```ts
-import {
-  Component, OnInit, OnDestroy,
-  signal, viewChild, ElementRef, inject, NgZone,
-} from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-import { CometChatCalls } from '@cometchat/calls-sdk-javascript';
-
-@Component({
-  selector: 'app-call-room',
-  standalone: true,
-  template: `
-    @if (inMeeting()) {
-      <div class="meeting-container" #meetingContainer></div>
-    }
-  `,
-  styles: [`
-    .meeting-container {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-    }
-  `],
-})
-export class CallRoomComponent implements OnInit, OnDestroy {
-  private route = inject(ActivatedRoute);
-  private router = inject(Router);
-  private zone = inject(NgZone);
-
-  sessionId = '';
-  inMeeting = signal(false);
-
-  // Signal-based viewChild — populated after the @if block renders.
-  meetingContainer = viewChild<ElementRef<HTMLDivElement>>('meetingContainer');
-
-  private cleanupEventListener?: () => void;
-
-  ngOnInit(): void {
-    this.sessionId = this.route.snapshot.paramMap.get('sessionId') ?? '';
-
-    // Cleanup listener fires on ANY session termination (peer left,
-    // network dropped, in-iframe Leave clicked). Reset state via NgZone
-    // so OnPush change detection picks it up.
-    this.cleanupEventListener = CometChatCalls.addEventListener(
-      'onConnectionClosed',
-      () => this.zone.run(() => {
-        this.inMeeting.set(false);
-        this.router.navigate(['/']);
-      }),
-    );
-
-    if (this.sessionId) {
-      this.startMeeting();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.cleanupEventListener?.();
-    try {
-      CometChatCalls.leaveSession();
-    } catch {
-      // ignore — not joined or already left
-    }
-  }
-
-  private startMeeting(): void {
-    this.inMeeting.set(true);
-
-    // setTimeout(0) gives Angular one tick to render the @if block
-    // so meetingContainer() is populated before joinSession measures it.
-    setTimeout(() => {
-      CometChatCalls.generateToken(this.sessionId).then(({ token }) => {
-        const container = this.meetingContainer();
-        if (container) {
-          // Empty {} settings = SDK defaults (matches sample app).
-          CometChatCalls.joinSession(token, {}, container.nativeElement);
-        }
-      });
-    }, 0);
-  }
-}
-```
-
-**Why this shape (not the obvious alternatives):**
-
-- **`@if (inMeeting())` + `viewChild`** instead of always-rendered container + `@ViewChild({ static: true })` — matches the upstream sample. The signal-based pattern works under OnPush change detection without `markForCheck()` ceremonies.
-- **`position: fixed; 100vw × 100vh`** instead of `width: 100%; height: 100vh` — gives the SDK a deterministic viewport-anchored container. Flex-derived sizing inside route outlets has caused 0×0 iframe rendering.
-- **Empty `{}` settings** — the sample's validated combination. Explicit `{ sessionType: "VIDEO", layout: "TILE" }` is type-valid but has produced unexplained rendering issues.
-- **`onConnectionClosed`** — fires on ANY termination, not just user-initiated leave. More reliable for cleanup than `onSessionLeft`.
-- **`setTimeout(0)` after `inMeeting.set(true)`** — gives Angular one change-detection tick to render the `@if` block, so `meetingContainer()` is populated when `joinSession` measures it. The upstream sample uses the same trick (see `startInstantMeeting`).
-- **`NgZone.run` around router navigation in the listener** — SDK events fire outside Angular's zone; raw `router.navigate` won't trigger change detection. UI freezes despite URL changing.
-
----
-
-## Route configuration
-
-```ts
-const routes: Routes = [
-  { path: 'meet/:sessionId', component: CallRoomComponent, data: { reuseRoute: false } },
-];
-```
-
-Read `sessionId` via `ActivatedRoute.snapshot.paramMap.get('sessionId')` in `ngOnInit`.
-
----
-
-## Anti-patterns
-
-1. **Always-rendered container with `@ViewChild({ static: true })`.** Works but doesn't match the sample app pattern and forces you to handle "not yet joined" rendering inside the SDK's iframe area. Use `@if` + `viewChild` signal instead.
-2. **`@ViewChild({ static: false })` without compensating logic.** Container ref is undefined in `ngOnInit` — `joinSession` throws or no-ops.
-3. **`width: 100%; height: 100vh` container.** Works in flat layouts; fails in nested route outlets or flex parents. Use `position: fixed` instead.
-4. **Explicit `{ sessionType, layout, ... }` settings.** Type-valid but has caused unexplained black-tile-on-local-preview behaviour in customer integrations. Use `{}` and let the SDK pick defaults.
-5. **`onSessionLeft` only.** Fires on graceful user leave but NOT on network drops or peer disconnects. Use `onConnectionClosed` for the cleanup path.
-6. **Calling `startMeeting()` synchronously after `inMeeting.set(true)`.** The `@if` block hasn't rendered yet — `meetingContainer()` returns undefined. Wrap the `generateToken` + `joinSession` call in `setTimeout(0)` (or `afterNextRender` in Angular 16+).
-7. **No `NgZone.run` around router navigation in event listeners.** SDK fires outside Angular's zone — change detection doesn't run, UI freezes.
-8. **Component reused via `RouteReuseStrategy`.** Stale signal state → second navigation skips `joinSession`. Disable reuse for the call route.
-9. **Initializing Chat SDK for a session-only integration.** Wastes time and adds two extra failure modes (Chat init, Chat login race). Drop `CometChat.init` / `CometChat.login` entirely for standalone session apps.
-
----
-
-## Verification checklist
-
-- [ ] Container uses `position: fixed; width: 100vw; height: 100vh` (sample-app pattern)
-- [ ] Container rendered via `@if (inMeeting())`, read via `viewChild`
-- [ ] Settings passed as empty `{}`, not explicit `{ sessionType, layout, ... }`
-- [ ] `onConnectionClosed` listener handles session end (not just `onSessionLeft`)
-- [ ] `NgZone.run` wraps router navigation in the event handler
-- [ ] `setTimeout(0)` (or `afterNextRender`) gates `joinSession` until the `@if` block renders
-- [ ] `leaveSession` called in `ngOnDestroy`
-- [ ] Listener cleanup function called in `ngOnDestroy`
-- [ ] Route has `data: { reuseRoute: false }` to prevent stale-component reuse
-- [ ] **Standalone session-only:** no `CometChat.init` / `CometChat.login` — Calls SDK alone
-- [ ] **Additive (chat + calls):** dual-SDK contract preserved (Chat first, then Calls)
-- [ ] Browser smoke: 2 tabs, both navigate to `/meet/${sessionId}`, both join, media flows, either leaves → other sees onConnectionClosed
-
----
-
-## Pointers
-
-- `cometchat-react-calls/references/call-session.md` — full architecture (sessionId strategies, server-side authorization)
-- `cometchat-angular-calls/SKILL.md` — Angular-specific dual-SDK init pattern
-- `references/ngzone-and-async-callbacks.md` — why NgZone.run matters for SDK events
-- Upstream Angular sample — `calls-sdk-javascript-5/sample-apps/cometchat-calls-sample-app-angular/src/app/pages/join-session/`
-- Canonical docs: https://www.cometchat.com/docs/calls/javascript/join-session

package/skills/cometchat-angular-calls/references/custom-ui.md

@@ -1,239 +0,0 @@
-# Custom call UI in Angular
-
-Same architecture as React + RN custom UI; Angular-specific because of NgZone, ContentChild, and ng-template.
-
----
-
-## Two paths
-
-1. **Style the kit's selectors** — pass Angular `[input]` props + content projection (`<ng-content select="...">`). Cheapest.
-2. **Build your own component on the SDK** with your own `<video>` elements wrapped in Angular components. ⚠️ Two join APIs by settings type: **hybrid (hide-chrome)** → `SessionSettings` object + `joinSession`; **fully-custom (`enableDefaultLayout(false)`, own tiles)** → `CallSettingsBuilder` + the deprecated `startSession` (joinSession does NOT accept builder output). This reference shows the fully-custom path.
-
-This reference covers path 2.
-
----
-
-## Component skeleton
-
-```ts
-// ongoing-call.component.ts
-import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from "@angular/core";
-import { CometChatCalls } from "@cometchat/calls-sdk-javascript";
-
-@Component({
-  selector: "app-ongoing-call",
-  template: `
-    <div class="call-container">
-      <video #remoteVideo autoplay playsinline class="remote-tile"></video>
-      <video #localVideo autoplay playsinline muted class="local-tile"></video>
-      <app-control-panel
-        [muted]="muted"
-        [cameraOff]="cameraOff"
-        (toggleMute)="onToggleMute()"
-        (toggleCamera)="onToggleCamera()"
-        (switchCamera)="onSwitchCamera()"
-        (end)="onEnd()"
-      ></app-control-panel>
-    </div>
-  `,
-  styles: [`
-    .call-container { position: fixed; inset: 0; background: #000; }
-    .remote-tile { width: 100%; height: 100%; object-fit: cover; }
-    .local-tile { position: absolute; top: 60px; right: 20px; width: 120px; height: 160px; border-radius: 8px; }
-  `],
-})
-export class OngoingCallComponent implements OnInit, OnDestroy {
-  @ViewChild("localVideo") localVideoRef!: ElementRef<HTMLVideoElement>;
-  @ViewChild("remoteVideo") remoteVideoRef!: ElementRef<HTMLVideoElement>;
-
-  muted = false;
-  cameraOff = false;
-
-  private listener: unknown;
-
-  constructor(private zone: NgZone) {}
-
-  async ngOnInit() {
-    // ⚠️ CometChatCalls.OngoingCallListener is @deprecated (use addEventListener).
-    // It's only here because enableDefaultLayout(false) + startSession require it.
-    this.listener = new CometChatCalls.OngoingCallListener({
-      onUserListUpdated: (users: unknown) => {
-        this.zone.run(() => { /* update roster */ });
-      },
-      onCallEnded: () => {
-        this.zone.run(() => this.cleanup());
-      },
-      onCallEndButtonPressed: () => CometChatCalls.leaveSession(),
-      onError: (err: unknown) => {
-        this.zone.run(() => console.error("Call error:", err));
-      },
-    });
-
-    // CallSettingsBuilder method names (verified vs calls-sdk-javascript@5):
-    //   - NO .setSessionID() on the builder — sessionId flows via generateToken()
-    //   - .setIsAudioOnlyCall(bool), not .setIsAudioOnly()
-    //   - .setCallListener(listener), not .setCallEventListener()
-    const settings = new CometChatCalls.CallSettingsBuilder()
-      .setIsAudioOnlyCall(false)
-      .enableDefaultLayout(false)
-      .setCallListener(this.listener)
-      .build();
-
-    // generateToken takes ONLY sessionId. Auth is internal after CometChatCalls.login().
-    const tokenRes = await CometChatCalls.generateToken(this.sessionId);
-    // This fully-custom path uses enableDefaultLayout(false), which builds a CallSettings —
-    // consumed ONLY by the deprecated startSession. joinSession takes a SessionSettings
-    // OBJECT and will NOT accept CallSettingsBuilder output. startSession is the one place
-    // the deprecated call is still required (enableDefaultLayout is builder-only).
-    CometChatCalls.startSession(tokenRes.token, settings, this.callContainerRef.nativeElement);
-  }
-
-  ngOnDestroy() {
-    this.cleanup();
-  }
-
-  onToggleMute() {
-    this.muted = !this.muted;
-    // No-arg methods — muteAudio(bool) ignores the arg. Use the explicit pair.
-    this.muted ? CometChatCalls.muteAudio() : CometChatCalls.unmuteAudio();
-  }
-
-  onToggleCamera() {
-    this.cameraOff = !this.cameraOff;
-    this.cameraOff ? CometChatCalls.pauseVideo() : CometChatCalls.resumeVideo();
-  }
-
-  onSwitchCamera() {
-    CometChatCalls.switchCamera();
-  }
-
-  onEnd() {
-    CometChatCalls.leaveSession();
-    this.cleanup();
-  }
-
-  private cleanup() {
-    CometChatCalls.leaveSession();
-    if (this.localVideoRef?.nativeElement) this.localVideoRef.nativeElement.srcObject = null;
-    if (this.remoteVideoRef?.nativeElement) this.remoteVideoRef.nativeElement.srcObject = null;
-  }
-
-  // Inputs
-  sessionId!: string;       // bind from route param or parent
-}
-```
-
-NgZone.run wraps every SDK callback that mutates `this.*` (rule from `references/ngzone-and-async-callbacks.md`).
-
----
-
-## Control panel as a child component
-
-```ts
-// control-panel.component.ts
-import { Component, EventEmitter, Input, Output } from "@angular/core";
-
-@Component({
-  selector: "app-control-panel",
-  template: `
-    <div class="row">
-      <button (click)="toggleMute.emit()">{{ muted ? "Unmute" : "Mute" }}</button>
-      <button (click)="toggleCamera.emit()">{{ cameraOff ? "Cam on" : "Cam off" }}</button>
-      <button (click)="switchCamera.emit()">Flip</button>
-      <button (click)="end.emit()" class="end">End</button>
-    </div>
-  `,
-  styles: [`
-    .row { position: absolute; bottom: 40px; left: 0; right: 0; display: flex; justify-content: space-around; }
-    button { padding: 16px; border-radius: 32px; }
-    .end { background: red; color: white; }
-  `],
-})
-export class ControlPanelComponent {
-  @Input() muted = false;
-  @Input() cameraOff = false;
-  @Output() toggleMute = new EventEmitter<void>();
-  @Output() toggleCamera = new EventEmitter<void>();
-  @Output() switchCamera = new EventEmitter<void>();
-  @Output() end = new EventEmitter<void>();
-}
-```
-
----
-
-## Local preview before the call connects
-
-```ts
-async ngOnInit() {
-  // ... listener setup ...
-
-  // Preview stream
-  try {
-    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
-    this.localStream = stream;
-    if (this.localVideoRef.nativeElement) {
-      this.localVideoRef.nativeElement.srcObject = stream;
-    }
-  } catch (err) {
-    if ((err as Error).name === "NotAllowedError") {
-      this.zone.run(() => this.errorMessage = "Camera/mic permission denied");
-    }
-  }
-
-  // Then start session — SDK takes over
-  // ...
-}
-
-ngOnDestroy() {
-  this.localStream?.getTracks().forEach(t => t.stop());   // CRITICAL — release tracks
-  this.cleanup();
-}
-```
-
----
-
-## Lazy loading custom call modules
-
-If your project lazy-loads the calls feature (a `CallsModule` lazy-loaded at `/calls`), there's a gotcha:
-
-The `cometchat-angular-core` skill says `APP_INITIALIZER` must run at bootstrap, before lazy-loaded routes. If your `CallInitService` is provided in `CallsModule` (lazy), `APP_INITIALIZER` can't depend on it — Angular hasn't loaded the module yet.
-
-**Fix:** provide `CallInitService` in `AppModule` (eager), even if call components live in a lazy module. The service runs at boot; the components load on demand. This is documented further in `references/lazy-loading-pitfalls.md`.
-
----
-
-## Route guard for active calls
-
-If the user navigates away from the ongoing-call component mid-call, the call should end:
-
-```ts
-// can-deactivate.guard.ts
-import { Injectable } from "@angular/core";
-import { CanDeactivate } from "@angular/router";
-import { CometChatCalls } from "@cometchat/calls-sdk-javascript";
-import { OngoingCallComponent } from "./ongoing-call.component";
-
-@Injectable({ providedIn: "root" })
-export class CallDeactivateGuard implements CanDeactivate<OngoingCallComponent> {
-  canDeactivate(component: OngoingCallComponent): boolean {
-    if (!component.callActive) return true;
-    const confirmed = window.confirm("End the active call?");
-    if (confirmed) {
-      CometChatCalls.leaveSession();
-    }
-    return confirmed;
-  }
-}
-```
-
-Register on the route:
-
-```ts
-{ path: "calls/ongoing/:id", component: OngoingCallComponent, canDeactivate: [CallDeactivateGuard] }
-```
-
----
-
-## When NOT to go custom in Angular
-
-Same as React/RN — kit defaults cover 80%+. NgZone wrangling is real overhead; prefer styling props on `<cometchat-ongoing-call>` first. Custom is for design-system requirements that the kit's CSS variable overrides can't reach.