{"id":"3ad1de5f-65ff-43e9-9c3e-63e8f88301cc","shortId":"PM5yqW","kind":"skill","title":"cometchat-angular-calls","tagline":"CometChat Calls SDK integration for Angular 12-15 apps. Wraps the @cometchat/calls-sdk-javascript SDK in Angular service + component patterns. Covers dual-SDK init via APP_INITIALIZER, the Angular UI Kit's <cometchat-call-buttons> / <cometchat-incoming-call> / <cometchat-ongoing-","description":"## Purpose\n\nProduction-grade voice + video calling for Angular 12-15 apps. Loaded by `cometchat-calls` when `framework === \"angular\"`. Operates in two modes:\n\n- **Standalone** — calls is the product. `@cometchat/chat-sdk-javascript` (signaling) + `@cometchat/calls-sdk-javascript` (WebRTC) wrapped in Angular services. Custom call screens.\n- **Additive** — calls layered onto an existing CometChat Angular UI Kit integration. Adds `<cometchat-call-buttons>` inline, mounts `<cometchat-incoming-call>` at the root of `AppComponent`.\n\n**Read these other skills first:**\n- `cometchat-calls` — dispatcher (modes, hard rules, anti-patterns)\n- `cometchat-angular-core` — `UIKitSettingsBuilder`, `APP_INITIALIZER` init pattern, login order, `environment.ts` credentials\n- `cometchat-angular-patterns` — lazy loading, route guards, standalone-vs-NgModule integration\n\n**Ground truth:**\n- SDK source — `~/Downloads/calls-sdk/calls-sdk-javascript-5/package/`\n- Angular sample app — `~/Downloads/calls-sdk/calls-sdk-javascript-5/sample-apps/cometchat-calls-sample-app-angular/`\n- Existing skill — `cometchat-angular-features` (calls section will move into here)\n- Public docs — https://www.cometchat.com/docs/calls/javascript/overview (Angular wrapper docs are sparse — sample app is canonical)\n\n---\n\n## 1. Hard rules — Angular specialization\n\n### 1.0 Calls SDK login is its own step (v5+)\n\nAngular uses the same JS SDKs as React. The v5 Calls SDK has its own auth state, separate from the Chat SDK. After `CometChat.login(uid, AUTH_KEY)` succeeds, you MUST also call `await CometChatCalls.login(uid, AUTH_KEY)` — without it, the FIRST calls API call throws **\"auth token cannot be null\"**.\n\n```ts\n// auth.service.ts\nimport { Injectable } from \"@angular/core\";\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\nimport { CometChatCalls } from \"@cometchat/calls-sdk-javascript\";\n\n@Injectable({ providedIn: \"root\" })\nexport class AuthService {\n  async login(uid: string): Promise<void> {\n    await CometChat.login(uid, environment.cometchatAuthKey);\n    // v5 Calls SDK requires a separate login. Don't skip.\n    await CometChatCalls.login(uid, environment.cometchatAuthKey);\n    // Production: await CometChatCalls.loginWithAuthToken(authTokenFromBackend);\n  }\n}\n```\n\n**Surprises:**\n- The Chat SDK persists login via localStorage; the **Calls SDK does NOT** across page reloads in Angular (it stores its session in localStorage too, but state can drift). Always check `CometChatCalls.getLoggedInUser()` on app bootstrap and re-login if null.\n- Run the login inside an Angular zone — if you bypass `NgZone` and the login resolves from a Web Worker context (rare), change detection won't fire downstream. Default `await` in a service method is fine.\n\n### 1.1 Dual-SDK contract\n\nSame web shape, wrapped in services:\n\n```ts\n// call-init.service.ts\nimport { Injectable } from \"@angular/core\";\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\nimport { CometChatCalls } from \"@cometchat/calls-sdk-javascript\";\nimport { environment } from \"../../environments/environment\";\n\n@Injectable({ providedIn: \"root\" })\nexport class CallInitService {\n  private initialized = false;\n\n  async init(): Promise<void> {\n    if (this.initialized) return;\n\n    // Chat SDK — required for ringing\n    const appSettings = new CometChat.AppSettingsBuilder()\n      .subscribePresenceForAllUsers()\n      .setRegion(environment.cometchat.region)\n      .build();\n    await CometChat.init(environment.cometchat.appId, appSettings);\n\n    // Calls SDK — WebRTC session\n    const callAppSettings = new CometChatCalls.CallAppSettingsBuilder()\n      .setAppId(environment.cometchat.appId)\n      .setRegion(environment.cometchat.region)\n      .build();\n    CometChatCalls.init(callAppSettings);\n\n    this.initialized = true;\n  }\n}\n```\n\nWired via `APP_INITIALIZER` in `app.module.ts`:\n\n```ts\n{\n  provide: APP_INITIALIZER,\n  useFactory: (svc: CallInitService) => () => svc.init(),\n  deps: [CallInitService],\n  multi: true,\n}\n```\n\n### 1.2 VoIP push — N/A on Angular web (same as React)\n\nSame as `cometchat-react-calls` rule 1.2 — browsers don't have VoIP push. Web Push (Service Worker + `Notification`) is opt-in fallback.\n\n### 1.3 Lifecycle — `getUserMedia` cleanup\n\nSame as web. Custom WebRTC surfaces must `getTracks().forEach(t => t.stop())` on hangup. The `<cometchat-ongoing-call>` selector handles it for additive mode.\n\n### 1.4 Server-minted auth tokens\n\n`cometchat-angular-production` covers this. Production calls use `CometChat.login(authToken)`, not `CometChat.login(uid, authKey)`.\n\n### 1.5 Hangup cleanup — see rule 1.3 + zone consistency\n\nWhen a Calls SDK callback fires outside Angular's zone, the UI doesn't update. Standard fix:\n\n```ts\nimport { NgZone } from \"@angular/core\";\n\nexport class OngoingCallComponent {\n  constructor(private zone: NgZone) {}\n\n  ngOnInit() {\n    CometChatCalls.joinSession(token, settings, container);  // v5 canonical (startSession is a deprecated shim)\n\n    // Wrap any UI-mutating callback in NgZone.run\n    callListener.onCallEnded = () => {\n      this.zone.run(() => {\n        this.callEnded = true;\n        this.cleanup();\n      });\n    };\n  }\n\n  cleanup() {\n    CometChatCalls.leaveSession();\n    this.stream?.getTracks().forEach(t => t.stop());\n  }\n}\n```\n\nWithout `NgZone.run`, change detection doesn't fire and the UI looks frozen until the next user interaction.\n\n**⚠️ Where does the WebRTC `#callContainer` live? Two valid patterns; pick one explicitly.**\n\nThe container `<div>` must exist in the DOM when `CometChatCalls.joinSession(token, settings, container)` runs. Angular's `@if` (or `*ngIf`) gates this — get the gate wrong and the call surface never renders. Two patterns work; the second is recommended for new code:\n\n#### Pattern A — Single-component, gated by `@if (phase === 'ongoing')`\n\nThe container lives inside the same component that owns call state. Race: after `phase.set('ongoing')`, the next microtask runs BEFORE Angular's zone-driven render, so `@ViewChild` is still null. Use a **full task tick**, not a microtask:\n\n```ts\nthis.phase.set('ongoing');\n\n// ❌ WRONG — microtask runs before Angular renders the @if block\n// await Promise.resolve();\n\n// ✅ RIGHT — full task tick gives Angular's change detector time to mount the container\nawait new Promise((r) => setTimeout(r, 0));\n\nconst container = this.callContainer?.nativeElement;\nif (!container) throw new Error('Call container not ready.');\nawait CometChatCalls.joinSession(callToken, callSettings, container);\n```\n\nValidated 2026-05-13 against a Next.js peer.\n\n#### Pattern B — Separate `OngoingCallComponent`, parent-conditional mount (RECOMMENDED)\n\nThe container lives in its own component, and the **parent** decides whether to instantiate that component (not an inner `@if` inside the child template). This sidesteps the race entirely:\n\n```html\n<!-- app.component.html — parent gates the whole overlay component -->\n<router-outlet />\n\n@if (state.isInCall()) {\n  <app-ongoing-call />\n}\n@if (state.isIncoming()) {\n  <app-incoming-call-overlay />\n}\n```\n\n```html\n<!-- ongoing-call.component.html — NO inner @if, container always exists when this component is mounted -->\n<div class=\"oc-shell\">\n  <div #callContainer class=\"oc-container\"></div>\n  <button (click)=\"endCall()\">End call</button>\n</div>\n```\n\n```ts\n// ongoing-call.component.ts\n@Component({ /* ... */, changeDetection: ChangeDetectionStrategy.OnPush })\nexport class OngoingCallComponent implements AfterViewInit, OnDestroy {\n  @ViewChild('callContainer', { static: true })\n  private callContainer!: ElementRef<HTMLDivElement>;\n\n  protected readonly state = inject(CallStateService);\n\n  async ngAfterViewInit(): Promise<void> {\n    // No setTimeout(0) needed — the component is only instantiated when\n    // the parent's @if (state.isInCall()) flips true. The @ViewChild is\n    // guaranteed resolved by the time ngAfterViewInit fires.\n    await this.state.startWebRtcSession(this.callContainer.nativeElement);\n  }\n\n  ngOnDestroy(): void {\n    this.state.endWebRtcSessionOnly();\n  }\n}\n```\n\n**Why Pattern B is race-free:** the component is only INSTANTIATED when `state.isInCall()` becomes true. `ngAfterViewInit` fires after the view tree is built, by which point `#callContainer` exists. No `setTimeout 0` workaround needed.\n\n**Anti-pattern caught 2026-05-14:** mounting `<app-ongoing-call />` unconditionally with `@if (state.isInCall())` INSIDE the child template. `{static: true}` becomes a lie — the element isn't in the DOM at view-init on first mount → `ngAfterViewInit` throws `TypeError: Cannot read properties of undefined (reading 'nativeElement')` → `provideAppInitializer` rejects → bootstrap \"completes with error\" but the app still renders with stale initial signals.\n\n### 1.6 Permissions — browser handles `getUserMedia`\n\nSame as web. Surface `NotAllowedError` and `NotFoundError` to a clear UI message. HTTPS required (or localhost).\n\n### 1.7 IncomingCall mounted at app root\n\n`<cometchat-incoming-call>` belongs in `AppComponent`'s template, ABOVE `<router-outlet>`:\n\n```html\n<!-- app.component.html -->\n<cometchat-incoming-call></cometchat-incoming-call>\n<router-outlet></router-outlet>\n```\n\nInside a feature-module template means the listener disappears on route change → calls only ring when that route is active. Same canonical bug as React.\n\nFor lazy-loaded features that include calls, the dispatcher in `cometchat-angular-patterns` shows the eager-load-only pattern for the calls module.\n\n**⚠️ Mixed-stack receiver inconsistency (validated 2026-05-15).** If your Angular app is the RECEIVER in a mixed-stack scenario (mobile kit-based caller → Angular custom UI receiver), confirm a **single active session per UID** before relying on `onIncomingCallReceived`. Symptom: server records the incoming call (visible in REST `GET /users/{uid}/calls`), but the listener never fires on the active Angular tab — typically because a stale session for the same UID elsewhere is eating the call-delivery routing. Workaround:\n\n```bash\n# Evict all sessions for the receiver UID before testing\ncurl -X DELETE 'https://<APP_ID>.api-<REGION>.cometchat.io/v3/users/<uid>/auth_tokens' \\\n  -H 'appId: <APP_ID>' \\\n  -H 'apiKey: <REST_API_KEY>'\n```\n\nThen hard-refresh the Angular tab so a fresh login mints a clean token. The reverse direction (Angular caller → mobile receiver) works without this workaround. Tracked for v4.3 investigation; full context in `project_pixel_to_angular_ringing_inconsistency` memory entry.\n\n### 1.8 Signals required for cross-service state under OnPush\n\nValidated 2026-05-14 on Angular 21.2.0. Single biggest \"looks-correct-but-fails-silently\" bug in this stack.\n\n```ts\n// ❌ Plain property — captured at component construction. With OnPush, the\n//    template re-reads the captured value only when an explicit re-render\n//    happens. If the service sets it later, the template stays stuck on\n//    the initial value forever.\n@Injectable({ providedIn: 'root' })\nexport class CallInitService {\n  loggedInUid: string | null = null;\n  async init() { /* ... */ this.loggedInUid = 'cometchat-uid-5'; }\n}\n\n// In a component with OnPush, this looks reactive but isn't:\nprotected readonly loggedInUid = this.callInit.loggedInUid;\n// Template: {{ loggedInUid ?? 'connecting…' }}   → stuck on \"connecting…\" forever\n\n// ✅ Signal — reactive readers re-render on .set()\n@Injectable({ providedIn: 'root' })\nexport class CallInitService {\n  readonly loggedInUid = signal<string | null>(null);\n  async init() { /* ... */ this.loggedInUid.set('cometchat-uid-5'); }\n}\n\n// In the component (still OnPush):\nprotected readonly loggedInUid = this.callInit.loggedInUid;\n// Template: {{ loggedInUid() ?? 'connecting…' }}   → updates within the next microtask\n```\n\n**Rule:** ANY service state that the template observes MUST be a signal (or an observable consumed via the `async` pipe / `toSignal`). Plain properties don't trigger OnPush change detection from outside the component's input/event surface.\n\nCross-service state set during `provideAppInitializer` is the classic case — by the time the component is constructed, the service property may or may not be set, and even if it isn't yet, a later `.set()` would never reach the template under OnPush.\n\n### 1.9 `provideAppInitializer` failures are silent — surface them in the UI\n\nModern Angular bootstrap \"completes\" even when `provideAppInitializer` throws — the error logs to `console.error` and the app still mounts in a partial state. Visible symptom: UI renders but cross-service state is stuck at initial values.\n\nBest practice — make init errors visible:\n\n```ts\n@Injectable({ providedIn: 'root' })\nexport class CallInitService {\n  readonly loggedInUid = signal<string | null>(null);\n  readonly initError = signal<string | null>(null);\n  readonly initStep = signal<string>('not-started');\n\n  async init(): Promise<void> {\n    try {\n      this.initStep.set('chat-init');\n      await CometChat.init(/* ... */);\n\n      this.initStep.set('calls-init');\n      await CometChatCalls.init(/* ... */);\n\n      this.initStep.set('chat-login');\n      await CometChat.login(/* ... */);\n\n      this.initStep.set('calls-login');\n      // ERR_ALREADY_LOGGED_IN is common on HMR — tolerate it\n      try {\n        await CometChatCalls.login(/* ... */);\n      } catch (e: any) {\n        const code = e?.code ?? e?.message ?? '';\n        if (!/already/i.test(String(code))) throw e;\n        console.warn('[CallInitService] calls.login non-fatal:', e);\n      }\n\n      this.loggedInUid.set(uid);\n      this.initStep.set('ready');\n    } catch (e: any) {\n      const msg = e?.message ?? e?.code ?? JSON.stringify(e);\n      console.error('[CallInitService] init failed at step', this.initStep(), e);\n      this.initError.set(`Failed at \"${this.initStep()}\": ${msg}`);\n      throw e;  // re-throw so APP_INITIALIZER still logs the failure\n    }\n  }\n}\n```\n\nThen render `initError` in the root template:\n\n```html\n@if (initError(); as err) {\n  <div class=\"init-error\">Init failed: {{ err }}</div>\n}\n```\n\nWithout this surface, a single bug deep in init causes the dev to spend 20+ minutes guessing where the failure is. Validated 2026-05-14 — the `initStep` instrumentation immediately revealed an `ngAfterViewInit` ViewChild bug that had previously looked like a \"stuck on connecting\" without any clue.\n\n### 1.10 `ERR_ALREADY_LOGGED_IN` on HMR is non-fatal\n\n`CometChatCalls.login` is intolerant of re-login during dev HMR cycles. Wrap in a tolerant catch that only re-throws non-\"already\" errors (see 1.9 code above). The chat-side session survives HMR, so the calls session can ride on it.\n\n---\n\n## 2. Setup\n\n### Install\n\n```bash\nnpm install @cometchat/chat-sdk-javascript @cometchat/calls-sdk-javascript\n# additive mode: @cometchat/chat-uikit-angular is already installed\n```\n\n### `app.module.ts` (NgModule path)\n\n```ts\nimport { NgModule, APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA } from \"@angular/core\";\nimport { CometChatUIKitModule } from \"@cometchat/chat-uikit-angular\";   // additive mode\nimport { CallInitService } from \"./services/call-init.service\";\n\n@NgModule({\n  imports: [\n    CometChatUIKitModule,                     // additive mode only\n  ],\n  providers: [\n    {\n      provide: APP_INITIALIZER,\n      useFactory: (svc: CallInitService) => () => svc.init(),\n      deps: [CallInitService],\n      multi: true,\n    },\n  ],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],          // required by UI Kit selectors\n})\nexport class AppModule {}\n```\n\n### Standalone components (Angular 14+)\n\n```ts\n// main.ts\nbootstrapApplication(AppComponent, {\n  providers: [\n    {\n      provide: APP_INITIALIZER,\n      useFactory: (svc: CallInitService) => () => svc.init(),\n      deps: [CallInitService],\n      multi: true,\n    },\n  ],\n});\n```\n\nThe standalone-component path skips `CometChatUIKitModule` — instead, individual standalone selectors are imported per-component.\n\n---\n\n## 3. Components catalog\n\n### Calls SDK primitives (used in standalone or custom components)\n\nSame shape as `cometchat-react-calls` Section 3 — `CometChatCalls.init`, `generateToken(sessionId)` (single arg in v5; auth is internal after login), `joinSession(token, settings, htmlElement)` (v5 canonical; `startSession` is a deprecated shim), `leaveSession()` (v5 canonical; `endSession()` is deprecated), `CallSettingsBuilder`, etc. The audit-verified API surface is documented in `cometchat-react-calls` and applies unchanged in Angular (same JS SDK).\n\n### UI Kit selectors (additive mode — `@cometchat/chat-uikit-angular`)\n\n| Selector | Purpose |\n|---|---|\n| `<cometchat-call-buttons [user]=\"u\">` | Voice + video buttons (typically inside `<cometchat-message-header>`) |\n| `<cometchat-incoming-call>` | Root-mounted listener |\n| `<cometchat-outgoing-call>` | Auto-mounted on initiate |\n| `<cometchat-ongoing-call>` | Active call view |\n| `<cometchat-call-logs (itemClick)=\"onLogClick($event)\">` | Paginated history |\n\n`CUSTOM_ELEMENTS_SCHEMA` (or full module imports) must be in the consuming module — same rule as the chat selectors.\n\n---\n\n## 4. Standalone integration\n\nWhen `product === \"voice-video\"` and there is no existing UI Kit.\n\n**Split by calling mode — these are two different shapes:**\n\n### 4a. Standalone — Session mode (meeting-room UX, no ringing)\n\nCalls SDK ONLY. NO Chat SDK. Matches the upstream sample at `~/Downloads/calls-sdk/calls-sdk-javascript-5/sample-apps/cometchat-calls-sample-app-angular/`. The skill scaffolds:\n\n1. **`services/call-init.service.ts`** — `CometChatCalls.init({ appId, region, authKey })` ONLY. No `CometChat.init`. Exposed via `provideAppInitializer`. Pass `authKey` at init time so `CometChatCalls.login(uid)` needs no second arg.\n2. **`pages/join-session/join-session.component.ts`** — UID picker (dev mode) + \"Start meeting\" / \"Join meeting\" + the meeting-room container (`@if (inMeeting()) { <div class=\"meeting-container\" #meetingContainer></div> }`). Container CSS: `position: fixed; width: 100vw; height: 100vh`. `CometChatCalls.joinSession(token, {}, container.nativeElement)` with empty settings. See `references/call-session.md` for the full canonical pattern.\n3. **Routing** — `/meet/:sessionId` route registered with `data: { reuseRoute: false }`.\n4. **`environment.ts`** — credentials block.\n5. **HTTPS check** — warns if dev server is HTTP non-localhost.\n\n**Why no Chat SDK:** session mode never touches the Chat SDK call entity. Initializing both SDKs adds two failure modes (Chat init, Chat login race) for zero benefit. The upstream Angular sample confirms this — it never imports `@cometchat/chat-sdk-javascript`.\n\n### 4b. Standalone — Ringing mode (CallButtons + Incoming/Outgoing/Ongoing kit selectors)\n\nDual-SDK: Chat SDK signaling channel + Calls SDK media channel. The skill scaffolds:\n\n1. **`services/call-init.service.ts`** — Chat SDK + Calls SDK init (sequential), exposed via `APP_INITIALIZER`.\n2. **`components/call-button/call-button.component.ts`** — Voice + video buttons, `[user]` input, emits `(callInitiated)`.\n3. **`pages/ongoing-call/ongoing-call.component.ts`** — `(deactivate)` route guard cleans up if user navigates away mid-call. WebRTC view via direct `CometChatCalls.joinSession`. Rule 1.5 cleanup.\n4. **`pages/call-logs/call-logs.component.ts`** — `/calls` route, paginated via `CallLogRequestBuilder`.\n5. **`AppComponent` template** — `<cometchat-incoming-call>` (or a custom incoming-call equivalent in standalone mode) above `<router-outlet>`.\n6. **Routing** — `/calls` and `/ongoing-call/:sessionId` routes registered in `app-routing.module.ts`.\n7. **`environment.ts`** — credentials block (rule from `cometchat-angular-core`).\n8. **Optional Web Push** — Service Worker registration via `@angular/service-worker` if user opts in.\n\n## 5. Additive integration\n\nWhen `cometchat-angular-core` integration already exists. The skill:\n\n1. Adds `@cometchat/calls-sdk-javascript`.\n2. Patches existing `init.service.ts` (or whatever the project named it) to add `CometChatCalls.init` after `CometChat.init`.\n3. Adds `<cometchat-incoming-call>` to `AppComponent` template (rule 1.7).\n4. Wires `<cometchat-call-buttons [user]=\"user\">` inside the existing message-header template if not already present (often auto-rendered by `<cometchat-message-header>` when `[user]` is set).\n5. Optionally adds a `/calls` route for `<cometchat-call-logs>`.\n\n## 6. Anti-patterns\n\n1. **Initializing in a feature module's `ngOnInit`** instead of `APP_INITIALIZER` / `provideAppInitializer`. The chat SDK auth context isn't ready when the component tries to use it. APP_INITIALIZER blocks bootstrap until init succeeds.\n2. **Mounting `<cometchat-incoming-call>` inside a feature module's component.** Disappears on route change. Mount in AppComponent (rule 1.7).\n3. **Skipping `NgZone.run` for SDK callbacks.** UI doesn't update on call-end. Rule 1.5.\n4. **Skipping `CUSTOM_ELEMENTS_SCHEMA`.** Selectors render but Angular logs \"is not a known element\" errors and breaks zone-aware bindings.\n5. **Using `CometChatCalls.joinSession` without `await CometChatCalls.generateToken`** — same anti-pattern as React.\n6. **Lazy-loading the calls module.** Calls must be initialized at bootstrap; lazy-loading defers init past the point where calls might already be coming in. Eager-load anything that imports `CallInitService`.\n7. **Running over HTTP non-localhost.** `getUserMedia` denies; `ng serve` is HTTPS-capable via `--ssl`.\n8. **Plain properties on services consumed by OnPush components** (rule 1.8). Captured-at-construction state stays stuck on the initial value forever. Use signals.\n9. **Inner `@if (state.isInCall())` inside the ongoing-call component's own template** (rule 1.5 Pattern B anti-pattern). Makes `{static: true}` `@ViewChild('callContainer')` a lie — `ngAfterViewInit` reads `undefined.nativeElement`. Gate at the parent.\n10. **Letting `provideAppInitializer` failures bubble silently** (rule 1.9). App mounts in a half-initialized state; UI looks like it's \"stuck connecting.\" Always surface an `initError` signal in the UI.\n11. **Failing on `ERR_ALREADY_LOGGED_IN`** during HMR (rule 1.10). Common during dev; wrap `CometChatCalls.login` in a tolerant catch.\n\n## 7. Verification checklist\n\n**Static:**\n\n- [ ] `@cometchat/chat-sdk-javascript` and `@cometchat/calls-sdk-javascript` in `package.json`\n- [ ] `APP_INITIALIZER` / `provideAppInitializer` registered in `app.module.ts` or `app.config.ts`\n- [ ] `CallInitService.init` calls Chat SDK init then Calls SDK init (sequential)\n- [ ] `CallInitService.loggedInUid` is a `signal<string | null>` (NOT a plain property) — rule 1.8\n- [ ] `CallInitService` exposes `initError: signal<string | null>` and the root template renders it — rule 1.9\n- [ ] `CometChatCalls.login` wrapped in tolerant catch for `ERR_ALREADY_LOGGED_IN` — rule 1.10\n- [ ] `CUSTOM_ELEMENTS_SCHEMA` in the consuming module\n- [ ] `<cometchat-incoming-call>` in AppComponent template above `<router-outlet>` (or split-component Pattern B per rule 1.5 — `@if (state.isInCall())` / `@if (state.isIncoming())` parent-conditional mount)\n- [ ] All SDK callbacks that mutate UI are wrapped in `NgZone.run`\n- [ ] Hangup path includes `CometChatCalls.leaveSession()` + track stops\n- [ ] `environment.ts` has `cometchat: { appId, region, authKey }` (dev) or token-endpoint config (prod)\n- [ ] Module-level `initialized` flag in CallInitService\n- [ ] Node version ≥ 20.19 or ≥ 22.12 (Angular CLI 21+ requirement)\n\n**Runtime (browser):**\n\n- [ ] Outgoing call connects, two-way audio + video\n- [ ] Incoming call rings on a separate route within the same app\n- [ ] Camera light off within 2 seconds of hangup\n- [ ] Route navigation during call cleanly disconnects (deactivate guard runs)\n- [ ] HTTPS or localhost only\n\n## 8. Pointers\n\n- `cometchat-angular-core` — UIKitSettingsBuilder, APP_INITIALIZER pattern, environment.ts\n- `cometchat-angular-components` — full UI Kit selector catalog (additive mode)\n- `cometchat-angular-patterns` — lazy loading, route guards, standalone-vs-NgModule\n- `cometchat-angular-production` — server-minted tokens, external-backend recipes (Express/Hono/Firebase/Vercel)\n- `cometchat-angular-troubleshooting` — CUSTOM_ELEMENTS_SCHEMA, zone issues, SSR/Universal","tags":["cometchat","angular","calls","skills","agent-skills","ai-agent","chat","claude-code","cursor","messaging","nextjs","react"],"capabilities":["skill","source-cometchat","skill-cometchat-angular-calls","topic-agent-skills","topic-ai-agent","topic-chat","topic-claude-code","topic-cometchat","topic-cursor","topic-messaging","topic-nextjs","topic-react","topic-react-native","topic-ui-kit"],"categories":["cometchat-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/cometchat/cometchat-skills/cometchat-angular-calls","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add cometchat/cometchat-skills","source_repo":"https://github.com/cometchat/cometchat-skills","install_from":"skills.sh"}},"qualityScore":"0.463","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 27 github stars · SKILL.md body (24,142 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:04:47.729Z","embedding":null,"createdAt":"2026-05-18T07:04:19.602Z","updatedAt":"2026-05-18T19:04:47.729Z","lastSeenAt":"2026-05-18T19:04:47.729Z","tsv":"'-05':778,931,1079,1230,1666 '-13':779 '-14':932,1231,1667 '-15':12,49,1080 '/../environments/environment':389 '/already/i.test':1576 '/auth_tokens':1172 '/calls':1126,2220,2241,2342 '/docs/calls/javascript/overview':164 '/downloads/calls-sdk/calls-sdk-javascript-5/package':143 '/downloads/calls-sdk/calls-sdk-javascript-5/sample-apps/cometchat-calls-sample-app-angular':147,2023 '/meet':2091 '/ongoing-call':2243 '/services/call-init.service':1779 '/users':1124 '/v3/users/':1171 '0':757,861,923 '1':174,2027,2175,2285,2349 '1.0':179 '1.1':361 '1.10':1689,2603,2677 '1.2':457,474 '1.3':491,541 '1.4':515 '1.5':536,2216,2416,2542,2697 '1.6':986 '1.7':1007,2309,2400 '1.8':1218,2513,2651 '1.9':1450,1725,2569,2665 '10':2562 '100vh':2075 '100vw':2073 '11':2593 '12':11,48 '14':1813 '2':1743,2051,2187,2288,2384,2776 '20':1657 '20.19':2744 '2026':777,930,1078,1229,1665 '21':2749 '21.2.0':1234 '22.12':2746 '3':1846,1866,2089,2196,2303,2401 '4':1978,2099,2218,2310,2417 '4a':2002 '4b':2153 '5':1303,1352,2103,2225,2272,2338,2439 '6':2239,2345,2451 '7':2249,2486,2613 '8':2259,2503,2793 '9':2528 'across':298 'activ':1040,1106,1134,1947 'add':90,2131,2286,2299,2304,2340 'addit':79,513,1751,1774,1783,1922,2273,2813 'afterviewinit':842 'alreadi':1554,1691,1722,1755,2281,2327,2475,2597,2673 'also':218 'alway':314,2585 'angular':3,10,19,32,47,58,74,86,115,128,144,152,165,177,188,302,331,462,523,551,647,704,730,742,1059,1083,1099,1135,1182,1195,1213,1233,1461,1812,1915,2145,2257,2278,2425,2747,2797,2806,2817,2829,2842 'angular/core':243,377,565,1769 'angular/service-worker':2267 'anti':111,927,2347,2447,2546 'anti-pattern':110,926,2346,2446,2545 'anyth':2482 'api':230,1168,1902 'apikey':1176 'app':13,29,50,118,146,171,318,441,447,979,1011,1084,1475,1622,1763,1788,1820,2185,2359,2377,2570,2622,2771,2800 'app-routing.module.ts':2248 'app.config.ts':2629 'app.module.ts':444,1757,2627 'appcompon':97,1015,1817,2226,2306,2398,2686 'appid':1174,2030,2725 'appli':1912 'appmodul':1809 'appset':411,421 'arg':1871,2050 'async':258,399,856,1297,1346,1388,1527 'audio':2759 'audit':1900 'audit-verifi':1899 'auth':203,213,223,233,519,1874,2365 'auth.service.ts':239 'authkey':535,2032,2040,2727 'authservic':257 'authtoken':531 'authtokenfrombackend':284 'auto':1943,2331 'auto-mount':1942 'auto-rend':2330 'await':220,263,277,282,354,418,735,751,771,886,1535,1541,1547,1564,2443 'awar':2437 'away':2206 'b':785,894,2544,2694 'backend':2837 'base':1097 'bash':1155,1746 'becom':906,944 'belong':1013 'benefit':2142 'best':1496 'biggest':1236 'bind':2438 'block':734,2102,2252,2379 'bootstrap':319,973,1462,2380,2463 'bootstrapappl':1816 'break':2434 'browser':475,988,2752 'bubbl':2566 'bug':1043,1243,1648,1676 'build':417,434 'built':915 'button':828,1930,1935,2191,2315 'bypass':335 'call':4,6,45,55,64,77,80,105,154,180,198,219,229,231,268,294,422,472,528,546,660,693,767,832,1033,1053,1070,1119,1151,1539,1551,1737,1849,1864,1910,1929,1948,1952,1995,2012,2126,2168,2179,2209,2233,2314,2413,2456,2458,2473,2536,2631,2636,2754,2762,2783 'call-deliveri':1150 'call-end':2412 'call-init.service.ts':373 'callappset':427,436 'callback':548,590,2406,2708 'callbutton':2157 'callcontain':626,845,849,919,2552 'caller':1098,1196 'calliniti':2195 'callinitservic':395,451,454,1292,1339,1508,1582,1604,1777,1792,1795,1824,1827,2485,2652,2741 'callinitservice.init':2630 'callinitservice.loggedinuid':2640 'calllistener.oncallended':593 'calllogrequestbuild':2224 'calls-init':1538 'calls-login':1550 'calls.login':1583 'callset':774 'callsettingsbuild':1896 'callstateservic':855 'calltoken':773 'camera':2772 'cannot':235,964 'canon':173,579,1042,1884,1892,2087 'capabl':2500 'captur':1250,1262,2515 'captured-at-construct':2514 'case':1416 'catalog':1848,2812 'catch':1566,1592,1715,2612,2670 'caught':929 'caus':1652 'chang':347,607,744,1032,1397,2395 'changedetect':836 'changedetectionstrategy.onpush':837 'channel':2167,2171 'chat':208,287,405,1533,1545,1730,1976,2016,2117,2124,2135,2137,2164,2177,2363,2632 'chat-init':1532 'chat-login':1544 'chat-sid':1729 'check':315,2105 'checklist':2615 'child':815,940 'class':256,394,567,839,1291,1338,1507,1808 'classic':1415 'clean':1190,2201,2784 'cleanup':494,538,598,2217 'clear':1000 'cli':2748 'click':829 'clue':1688 'code':673,1570,1572,1578,1600,1726 'come':2477 'cometchat':2,5,37,54,85,104,114,127,151,245,379,470,522,1058,1301,1350,1862,1908,1928,1951,2256,2277,2313,2724,2796,2805,2816,2828,2841 'cometchat-angular-cal':1 'cometchat-angular-compon':2804 'cometchat-angular-cor':113,2255,2276,2795 'cometchat-angular-featur':150 'cometchat-angular-pattern':126,1057,2815 'cometchat-angular-product':521,2827 'cometchat-angular-troubleshoot':2840 'cometchat-cal':53,103 'cometchat-call-button':1927,2312 'cometchat-call-log':1950 'cometchat-ongo':36 'cometchat-react-cal':469,1861,1907 'cometchat-uid':1300,1349 'cometchat.appsettingsbuilder':413 'cometchat.init':419,1536,2035,2302 'cometchat.io':1170 'cometchat.io/v3/users/':1169 'cometchat.login':211,264,530,533,1548 'cometchat/calls-sdk-javascript':16,70,251,385,1750,2287,2619 'cometchat/chat-sdk-javascript':68,247,381,1749,2152,2617 'cometchat/chat-uikit-angular':1753,1773,1924 'cometchatcal':249,383 'cometchatcalls.callappsettingsbuilder':429 'cometchatcalls.generatetoken':2444 'cometchatcalls.getloggedinuser':316 'cometchatcalls.init':435,1542,1867,2029,2300 'cometchatcalls.joinsession':574,642,772,2076,2214,2441 'cometchatcalls.leavesession':599,2719 'cometchatcalls.login':221,278,1565,1700,2045,2608,2666 'cometchatcalls.loginwithauthtoken':283 'cometchatuikitmodul':1771,1782,1836 'common':1558,2604 'complet':974,1463 'compon':21,678,690,799,808,835,864,900,1252,1306,1355,1402,1421,1811,1833,1845,1847,1857,2372,2391,2511,2537,2692,2807 'components/call-button/call-button.component.ts':2188 'condit':790,2704 'config':2733 'confirm':1103,2147 'connect':1321,1324,1364,1685,2584,2755 'consist':543 'console.error':1472,1603 'console.warn':1581 'const':410,426,758,1569,1595 'construct':1253,1423,2517 'constructor':569 'consum':1385,1970,2508,2683 'contain':577,635,645,685,750,759,763,768,775,794,2065,2068 'container.nativeelement':2078 'context':345,1208,2366 'contract':365 'core':116,2258,2279,2798 'correct':1239 'cover':23,525 'credenti':125,2101,2251 'cross':1223,1407,1488 'cross-servic':1222,1406,1487 'css':2069 'curl':1165 'custom':76,498,1100,1765,1799,1856,1959,2230,2419,2678,2844 'cycl':1710 'data':2096 'deactiv':2198,2786 'decid':803 'deep':1649 'default':353 'defer':2467 'delet':1167 'deliveri':1152 'deni':2494 'dep':453,1794,1826 'deprec':583,1888,1895 'detect':348,608,1398 'detector':745 'dev':1654,1708,2055,2108,2606,2728 'differ':2000 'direct':1194,2213 'disappear':1029,2392 'disconnect':2785 'dispatch':106,1055 'doc':161,167 'document':1905 'doesn':556,609,2408 'dom':640,953 'downstream':352 'drift':313 'driven':708 'dual':25,363,2162 'dual-sdk':24,362,2161 'e':1567,1571,1573,1580,1587,1593,1597,1599,1602,1610,1617 'eager':1064,2480 'eager-load':2479 'eager-load-on':1063 'eat':1148 'element':948,1766,1800,1960,2420,2431,2679,2845 'elementref':850 'elsewher':1146 'emit':2194 'empti':2080 'end':831,2414 'endcal':830 'endpoint':2732 'endsess':1893 'entir':821 'entiti':2127 'entri':1217 'environ':387 'environment.cometchat.appid':420,431 'environment.cometchat.region':416,433 'environment.cometchatauthkey':266,280 'environment.ts':124,2100,2250,2722,2803 'equival':2234 'err':1553,1639,1642,1690,2596,2672 'error':766,976,1469,1500,1723,2432 'etc':1897 'even':1434,1464 'event':1956 'evict':1156 'exist':84,148,637,920,1990,2282,2290,2320 'explicit':633,1267 'export':255,393,566,838,1290,1337,1506,1807 'expos':2036,2183,2653 'express/hono/firebase/vercel':2839 'extern':2836 'external-backend':2835 'fail':1241,1606,1612,1641,2594 'failur':1452,1627,1662,2133,2565 'fallback':490 'fals':398,2098 'fatal':1586,1699 'featur':153,1023,1050,2353,2388 'feature-modul':1022 'fine':360 'fire':351,549,611,885,909,1131 'first':102,228,959 'fix':560,2071 'flag':2739 'flip':874 'foreach':503,602 'forev':1286,1325,2525 'framework':57 'free':898 'fresh':1186 'frozen':616 'full':717,738,1207,1963,2086,2808 'gate':652,656,679,2558 'generatetoken':1868 'get':654,1123 'gettrack':502,601 'getusermedia':493,990,2493 'give':741 'grade':42 'ground':139 'guarante':879 'guard':133,2200,2787,2822 'guess':1659 'h':1173,1175 'half':2575 'half-initi':2574 'handl':510,989 'hangup':507,537,2716,2779 'happen':1271 'hard':108,175,1179 'hard-refresh':1178 'header':2323 'height':2074 'histori':1958 'hmr':1560,1695,1709,1734,2601 'html':822,827,1019,1635 'htmlelement':1882 'http':2111,2489 'https':1003,2104,2499,2789 'https-capabl':2498 'immedi':1671 'implement':841 'import':240,244,248,374,378,382,386,562,1761,1770,1776,1781,1842,1965,2151,2484 'includ':1052,2718 'incom':1118,2232,2761 'incoming-cal':2231 'incoming/outgoing/ongoing':2158 'incomingcal':1008 'inconsist':1076,1215 'individu':1838 'init':27,120,400,957,1298,1347,1499,1528,1534,1540,1605,1640,1651,2042,2136,2181,2382,2468,2634,2638 'init.service.ts':2291 'initerror':1516,1630,1637,2588,2654 'initi':30,119,397,442,448,984,1284,1494,1623,1764,1789,1821,1946,2128,2186,2350,2360,2378,2461,2523,2576,2623,2738,2801 'initstep':1522,1669 'inject':241,252,375,390,854,1287,1334,1503 'inlin':91 'inmeet':2067 'inner':811,2529 'input':2193 'input/event':1404 'insid':329,687,813,938,1020,1937,2318,2386,2532 'instal':1745,1748,1756 'instanti':806,867,903 'instead':1837,2357 'instrument':1670 'integr':8,89,138,1980,2274,2280 'interact':621 'intern':1876 'intoler':1702 'investig':1206 'isn':949,1313,1437,2367 'issu':2848 'itemclick':1954 'join':2059 'joinsess':1879 'js':192,1917 'json.stringify':1601 'key':214,224 'kit':34,88,1096,1805,1920,1992,2159,2810 'kit-bas':1095 'known':2430 'later':1277,1441 'layer':81 'lazi':130,1048,2453,2465,2819 'lazy-load':1047,2452,2464 'leavesess':1890 'let':2563 'level':2737 'lie':946,2554 'lifecycl':492 'light':2773 'like':1681,2580 'listen':1028,1129,1941 'live':627,686,795 'load':51,131,1049,1065,2454,2466,2481,2820 'localhost':1006,2114,2492,2791 'localstorag':292,308 'log':1470,1555,1625,1692,1953,2426,2598,2674 'loggedinuid':1293,1317,1320,1341,1360,1363,1510 'login':122,182,259,273,290,323,328,339,1187,1546,1552,1706,1878,2138 'look':615,1238,1310,1680,2579 'looks-correct-but-fails-sil':1237 'main.ts':1815 'make':1498,2548 'match':2018 'may':1427,1429 'mean':1026 'media':2170 'meet':2007,2058,2060,2063 'meeting-room':2006,2062 'memori':1216 'messag':1002,1574,1598,2322 'message-head':2321 'method':358 'microtask':701,722,727,1369 'mid':2208 'mid-cal':2207 'might':2474 'mint':518,1188,2833 'minut':1658 'mix':1073,1091 'mixed-stack':1072,1090 'mobil':1094,1197 'mode':62,107,514,1752,1775,1784,1923,1996,2005,2056,2120,2134,2156,2237,2814 'modern':1460 'modul':1024,1071,1964,1971,2354,2389,2457,2684,2736 'module-level':2735 'mount':92,748,791,933,960,1009,1477,1940,1944,2385,2396,2571,2705 'move':157 'msg':1596,1615 'multi':455,1796,1828 'must':217,501,636,1378,1966,2459 'mutat':589,2710 'n/a':460 'name':2296 'nativeel':761,970 'navig':2205,2781 'need':862,925,2047 'never':662,1130,1444,2121,2150 'new':412,428,672,752,765 'next':619,700,1368 'next.js':782 'ng':2495 'ngafterviewinit':857,884,908,961,1674,2555 'ngif':651 'ngmodul':137,1758,1762,1780,2826 'ngondestroy':889 'ngoninit':573,2356 'ngzone':336,563,572 'ngzone.run':592,606,2403,2715 'node':2742 'non':1585,1698,1721,2113,2491 'non-fat':1584,1697 'non-localhost':2112,2490 'not-start':1524 'notallowederror':995 'notfounderror':997 'notif':485 'npm':1747 'null':237,325,714,1295,1296,1344,1345,1513,1514,1519,1520,2645,2657 'observ':1377,1384 'often':2329 'ondestroy':843 'one':632 'ongo':38,683,698,725,2535 'ongoing-cal':2534 'ongoing-call.component.ts':834 'ongoingcallcompon':568,787,840 'onincomingcallreceiv':1113 'onlogclick':1955 'onpush':1227,1255,1308,1357,1396,1449,2510 'onto':82 'oper':59 'opt':488,2270 'opt-in':487 'option':2260,2339 'order':123 'outgo':2753 'outsid':550,1400 'own':692 'package.json':2621 'page':299 'pages/call-logs/call-logs.component.ts':2219 'pages/join-session/join-session.component.ts':2052 'pages/ongoing-call/ongoing-call.component.ts':2197 'pagin':1957,2222 'parent':789,802,870,2561,2703 'parent-condit':788,2702 'partial':1480 'pass':2039 'past':2469 'patch':2289 'path':1759,1834,2717 'pattern':22,112,121,129,630,665,674,784,893,928,1060,1067,2088,2348,2448,2543,2547,2693,2802,2818 'peer':783 'per':1108,1844,2695 'per-compon':1843 'permiss':987 'persist':289 'phase':682 'phase.set':697 'pick':631 'picker':2054 'pipe':1389 'pixel':1211 'plain':1248,1391,2504,2648 'point':918,2471 'pointer':2794 'posit':2070 'practic':1497 'present':2328 'previous':1679 'primit':1851 'privat':396,570,848 'prod':2734 'product':41,67,281,524,527,1982,2830 'production-grad':40 'project':1210,2295 'promis':262,401,753,858,1529 'promise.resolve':736 'properti':966,1249,1392,1426,2505,2649 'protect':851,1315,1358 'provid':446,1786,1787,1818,1819 'provideappiniti':971,1412,1451,1466,2038,2361,2564,2624 'providedin':253,391,1288,1335,1504 'public':160 'purpos':39,1926 'push':459,480,482,2262 'r':754,756 'race':695,820,897,2139 'race-fre':896 'rare':346 're':322,1259,1269,1330,1619,1705,1719 're-login':321,1704 're-read':1258 're-rend':1268,1329 're-throw':1618,1718 'reach':1445 'react':195,466,471,1045,1863,1909,2450 'reactiv':1311,1327 'read':98,965,969,1260,2556 'reader':1328 'readi':770,1591,2369 'readon':852,1316,1340,1359,1509,1515,1521 'receiv':1075,1087,1102,1161,1198 'recip':2838 'recommend':670,792 'record':1116 'references/call-session.md':2083 'refresh':1180 'region':2031,2726 'regist':2094,2246,2625 'registr':2265 'reject':972 'reli':1111 'reload':300 'render':663,709,731,981,1270,1331,1485,1629,2332,2423,2662 'requir':270,407,1004,1220,1802,2750 'resolv':340,880 'rest':1122 'return':404 'reuserout':2097 'reveal':1672 'revers':1193 'ride':1740 'right':737 'ring':409,1035,1214,2011,2155,2763 'room':2008,2064 'root':95,254,392,1012,1289,1336,1505,1633,1939,2660 'root-mount':1938 'rout':132,1031,1038,1153,2090,2093,2199,2221,2240,2245,2343,2394,2767,2780,2821 'rule':109,176,473,540,1370,1973,2215,2253,2308,2399,2415,2512,2541,2568,2602,2650,2664,2676,2696 'run':326,646,702,728,2487,2788 'runtim':2751 'sampl':145,170,2021,2146 'scaffold':2026,2174 'scenario':1093 'schema':1767,1798,1801,1961,2421,2680,2846 'screen':78 'sdk':7,17,26,141,181,199,209,269,288,295,364,406,423,547,1850,1918,2013,2017,2118,2125,2163,2165,2169,2178,2180,2364,2405,2633,2637,2707 'sdks':193,2130 'second':668,2049,2777 'section':155,1865 'see':539,1724,2082 'selector':509,1806,1840,1921,1925,1977,2160,2422,2811 'separ':205,272,786,2766 'sequenti':2182,2639 'serv':2496 'server':517,1115,2109,2832 'server-mint':516,2831 'servic':20,75,357,371,483,1224,1274,1372,1408,1425,1489,2263,2507 'services/call-init.service.ts':2028,2176 'session':306,425,1107,1141,1158,1732,1738,2004,2119 'sessionid':1869,2092,2244 'set':576,644,1275,1333,1410,1432,1442,1881,2081,2337 'setappid':430 'setregion':415,432 'settimeout':755,860,922 'setup':1744 'shape':368,1859,2001 'shim':584,1889 'show':1061 'side':1731 'sidestep':818 'signal':69,985,1219,1326,1342,1381,1511,1517,1523,2166,2527,2589,2643,2655 'silent':1242,1454,2567 'singl':677,1105,1235,1647,1870 'single-compon':676 'skill':101,149,2025,2173,2284 'skill-cometchat-angular-calls' 'skip':276,1835,2402,2418 'sourc':142 'source-cometchat' 'spars':169 'special':178 'spend':1656 'split':1993,2691 'split-compon':2690 'ssl':2502 'ssr/universal':2849 'stack':1074,1092,1246 'stale':983,1140 'standalon':63,135,1810,1832,1839,1854,1979,2003,2154,2236,2824 'standalone-compon':1831 'standalone-vs-ngmodul':134,2823 'standard':559 'start':1526,2057 'startsess':580,1885 'state':204,311,694,853,1225,1373,1409,1481,1490,2518,2577 'state.isincall':824,873,905,937,2531,2699 'state.isincoming':826,2701 'static':846,942,2549,2616 'stay':1280,2519 'step':186,1608 'still':713,980,1356,1476,1624 'stop':2721 'store':304 'string':261,1294,1343,1512,1518,1577,2644,2656 'stuck':1281,1322,1492,1683,2520,2583 'subscribepresenceforallus':414 'succeed':215,2383 'surfac':500,661,994,1405,1455,1645,1903,2586 'surpris':285 'surviv':1733 'svc':450,1791,1823 'svc.init':452,1793,1825 'symptom':1114,1483 't.stop':505,604 'tab':1136,1183 'task':718,739 'templat':816,941,1017,1025,1257,1279,1319,1362,1376,1447,1634,2227,2307,2324,2540,2661,2687 'test':1164 'this.callcontainer':760 'this.callcontainer.nativeelement':888 'this.callended':595 'this.callinit.loggedinuid':1318,1361 'this.cleanup':597 'this.initerror.set':1611 'this.initialized':403,437 'this.initstep':1609,1614 'this.initstep.set':1531,1537,1543,1549,1590 'this.loggedinuid':1299 'this.loggedinuid.set':1348,1588 'this.phase.set':724 'this.state.endwebrtcsessiononly':891 'this.state.startwebrtcsession':887 'this.stream':600 'this.zone.run':594 'throw':232,764,962,1467,1579,1616,1620,1720 'tick':719,740 'time':746,883,1419,2043 'token':234,520,575,643,1191,1880,2077,2731,2834 'token-endpoint':2730 'toler':1561,1714,2611,2669 'topic-agent-skills' 'topic-ai-agent' 'topic-chat' 'topic-claude-code' 'topic-cometchat' 'topic-cursor' 'topic-messaging' 'topic-nextjs' 'topic-react' 'topic-react-native' 'topic-ui-kit' 'tosign':1390 'touch':2122 'track':1203,2720 'tree':913 'tri':1530,1563,2373 'trigger':1395 'troubleshoot':2843 'true':438,456,596,847,875,907,943,1797,1829,2550 'truth':140 'ts':238,372,445,561,723,833,1247,1502,1760,1814 'two':61,628,664,1999,2132,2757 'two-way':2756 'typeerror':963 'typic':1137,1936 'u':1932 'ui':33,87,555,588,614,1001,1101,1459,1484,1804,1919,1991,2407,2578,2592,2711,2809 'ui-mut':587 'uid':212,222,260,265,279,534,1109,1125,1145,1162,1302,1351,1589,2046,2053 'uikitsettingsbuild':117,2799 'unchang':1913 'uncondit':934 'undefin':968 'undefined.nativeelement':2557 'updat':558,1365,2410 'upstream':2020,2144 'use':189,529,715,1852,2375,2440,2526 'usefactori':449,1790,1822 'user':620,1931,2192,2204,2269,2316,2317,2335 'ux':2009 'v4.3':1205 'v5':187,197,267,578,1873,1883,1891 'valid':629,776,1077,1228,1664 'valu':1263,1285,1495,2524 'verif':2614 'verifi':1901 'version':2743 'via':28,291,440,1386,2037,2184,2212,2223,2266,2501 'video':44,1934,1985,2190,2760 'view':912,956,1949,2211 'view-init':955 'viewchild':711,844,877,1675,2551 'visibl':1120,1482,1501 'voic':43,1933,1984,2189 'voice-video':1983 'void':890 'voip':458,479 'vs':136,2825 'warn':2106 'way':2758 'web':343,367,463,481,497,993,2261 'webrtc':71,424,499,625,2210 'whatev':2293 'whether':804 'width':2072 'wire':439,2311 'within':1366,2768,2775 'without':225,605,1200,1643,1686,2442 'won':349 'work':666,1199 'workaround':924,1154,1202 'worker':344,484,2264 'would':1443 'wrap':14,72,369,585,1711,2607,2667,2713 'wrapper':166 'wrong':657,726 'www.cometchat.com':163 'www.cometchat.com/docs/calls/javascript/overview':162 'x':1166 'yet':1439 'zero':2141 'zone':332,542,553,571,707,2436,2847 'zone-awar':2435 'zone-driven':706","prices":[{"id":"d79c4ed4-ccfa-453c-9f3a-a22909bc1730","listingId":"3ad1de5f-65ff-43e9-9c3e-63e8f88301cc","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"cometchat","category":"cometchat-skills","install_from":"skills.sh"},"createdAt":"2026-05-18T07:04:19.602Z"}],"sources":[{"listingId":"3ad1de5f-65ff-43e9-9c3e-63e8f88301cc","source":"github","sourceId":"cometchat/cometchat-skills/cometchat-angular-calls","sourceUrl":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-angular-calls","isPrimary":false,"firstSeenAt":"2026-05-18T07:04:19.602Z","lastSeenAt":"2026-05-18T19:04:47.729Z"}],"details":{"listingId":"3ad1de5f-65ff-43e9-9c3e-63e8f88301cc","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cometchat","slug":"cometchat-angular-calls","github":{"repo":"cometchat/cometchat-skills","stars":27,"topics":["agent-skills","ai-agent","chat","claude-code","cometchat","cursor","messaging","nextjs","react","react-native","ui-kit"],"license":null,"html_url":"https://github.com/cometchat/cometchat-skills","pushed_at":"2026-05-18T05:04:24Z","description":"Add CometChat chat to any React, Next.js, React Native, Angular, Android, iOS, or Flutter project through your AI coding agent. Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and 50+ more agents.","skill_md_sha":"5962e78f98bee48d5ed574e853f02b6b81e56a48","skill_md_path":"skills/cometchat-angular-calls/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-angular-calls"},"layout":"multi","source":"github","category":"cometchat-skills","frontmatter":{"name":"cometchat-angular-calls","license":"MIT","description":"CometChat Calls SDK integration for Angular 12-15 apps. Wraps the @cometchat/calls-sdk-javascript SDK in Angular service + component patterns. Covers dual-SDK init via APP_INITIALIZER, the Angular UI Kit's <cometchat-call-buttons> / <cometchat-incoming-call> / <cometchat-ongoing-call> / <cometchat-call-logs> selectors, getRTCToken, getUserMedia handling, route-guard placement, NgZone correctness for SDK callbacks, and additive-vs-standalone modes.","compatibility":"Angular 12-15 (LTS focus on 15); @cometchat/calls-sdk-javascript ^4.x; @cometchat/chat-sdk-javascript ^4.x; @cometchat/chat-uikit-angular ^4.x (additive mode)"},"skills_sh_url":"https://skills.sh/cometchat/cometchat-skills/cometchat-angular-calls"},"updatedAt":"2026-05-18T19:04:47.729Z"}}