Angular chat for zoneless and server-rendered apps

How do I keep chat out of the server render and the first bundle?

Import the TalkJS web components inside afterNextRender, not at the top of the file. Angular’s SSR guide says these hooks “are only executed on the browser and skipped on the server.”

Here’s what that changed in a fresh Angular 22.2.3 app with server rendering and prerendering turned on (ng new --ssr):

Turning SSR off won’t get you under the budget. Without SSR, the top-level import still made a 1.37 MB first bundle, and ng build failed the same way.

The second change is the stylesheet. Add @import '@talkjs/web-components/default.css'; to src/styles.css. When we imported the CSS from TypeScript instead, Angular 22 stopped on a type error (TS2882). Once we got past that error, the CSS was missing from the ng build output and the chat showed up unstyled.

What does the whole Angular chat component look like?

It’s one standalone component, a template, and one line of CSS. Install the web components and the Data API:

npm install @talkjs/web-components @talkjs/core

Add the stylesheet to src/styles.css:

@import '@talkjs/web-components/default.css';

Then the component, in src/app/app.ts. CUSTOM_ELEMENTS_SCHEMA lets Angular accept the <t-chatbox> tag. Replace <APP_ID> with your app ID, from the Settings page of your TalkJS dashboard.

import {
  Component,
  CUSTOM_ELEMENTS_SCHEMA,
  DestroyRef,
  afterNextRender,
  inject,
  signal,
} from '@angular/core';
import { getTalkSession, type ConversationListSubscription } from '@talkjs/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  styleUrl: './app.css',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class App {
  appId = '<APP_ID>';
  userId = 'frank';
  otherUserId = 'nina';
  conversationId = 'my_conversation';

  unreadCount = signal(0);

  constructor() {
    const destroyRef = inject(DestroyRef);
    let unreads: ConversationListSubscription | undefined;

    // Runs only in the browser, never during SSR or prerendering.
    afterNextRender(async () => {
      await import('@talkjs/web-components');

      const session = getTalkSession({ appId: this.appId, userId: this.userId });
      session.currentUser.createIfNotExists({ name: 'Frank' });
      session.user(this.otherUserId).createIfNotExists({ name: 'Nina' });
      const conversation = session.conversation(this.conversationId);
      conversation.createIfNotExists();
      conversation.participant(this.otherUserId).createIfNotExists();

      unreads = session.subscribeConversations(
        { filter: { isUnread: true } },
        (conversations) => this.unreadCount.set(conversations.length),
      );
    });

    destroyRef.onDestroy(() => unreads?.unsubscribe());
  }
}

And the template, src/app/app.html:

<p>Unread conversations: <strong data-testid="unread">{{ unreadCount() }}</strong></p>
<t-chatbox
  style="width: 100%; max-width: 400px; height: 600px;"
  [app-id]="appId"
  [user-id]="userId"
  [conversation-id]="conversationId"
/>

Adapted from the TalkJS Angular guide. We ran it in October 2026 on Angular 22.2.3 with @talkjs/web-components 0.3.12 and @talkjs/core 1.12.1, with SSR and prerendering on, and got a styled, live chat with no console errors. The template uses width: 100%; max-width: 400px because a fixed 400 px width overflowed a 390 px phone screen.

Nina

Angular chat example

Hi Nina, this is Frank from Angular 22 with SSR on

9:04 AM

Hi Frank, Nina replying via REST

9:04 AM

Thanks, Nina! Let’s try a few more messages.

9:05 AM

Sure, I’m here. What would you like to test next?

9:05 AM

Write a reply…

The <t-chatbox> tag is in the template before the import finishes, so the browser doesn’t know it yet. The [app-id], [user-id] and [conversation-id] bindings still worked once the import finished. In the test projects we tried, the sample users didn’t exist, so the code creates two, Frank and Nina.

Before launch, have your server sign a token for each user, pass it to the session with setToken, and turn on authentication in your dashboard settings, as the TalkJS authentication docs describe.