Angular Integration

<meta name="userplane:workspace" content="YOUR_WORKSPACE_ID" />
<script type="module" src="https://cdn.userplane.io/embed/script.js"></script>

// src/app/initializers/userplane.initializer.ts
import { initialize } from '@userplane/sdk';
import { environment } from '../../environments/environment';

export function provideUserplane() {
  return () => {
    initialize({ workspaceId: environment.userplaneWorkspaceId });
  };
}

// src/app/app.config.ts
import { ApplicationConfig, APP_INITIALIZER } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideUserplane } from './initializers/userplane.initializer';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    {
      provide: APP_INITIALIZER,
      useFactory: provideUserplane,
      multi: true,
    },
  ],
};

// src/environments/environment.ts
export const environment = {
  production: false,
  userplaneWorkspaceId: 'ws_abc123',
};

// src/environments/environment.prod.ts
export const environment = {
  production: true,
  userplaneWorkspaceId: 'ws_abc123',
};

// src/app/guards/auth.guard.ts
import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { ActivatedRouteSnapshot } from '@angular/router';

export const authGuard: CanActivateFn = (route: ActivatedRouteSnapshot) => {
  const router = inject(Router);
  const authService = inject(AuthService);

  if (!authService.isAuthenticated()) {
    const queryParams: Record<string, string> = {};

    for (const [key, value] of Object.entries(route.queryParams)) {
      if (key.startsWith('userplane-') && typeof value === 'string') {
        queryParams[key] = value;
      }
    }

    router.navigate(['/login'], { queryParams });
    return false;
  }

  return true;
};

// src/app/initializers/userplane.initializer.ts
import { initialize, set } from '@userplane/sdk';
import { environment } from '../../environments/environment';

export function provideUserplane() {
  return () => {
    initialize({ workspaceId: environment.userplaneWorkspaceId });
    set('environment', environment.production ? 'production' : 'development');
  };
}

cd examples/angular && npm install && ng serve