{"id":20531936,"url":"https://github.com/lennybakkalian/ngx-trpc","last_synced_at":"2025-08-07T18:29:09.799Z","repository":{"id":258873146,"uuid":"875204504","full_name":"lennybakkalian/ngx-trpc","owner":"lennybakkalian","description":"Angular tRPC client with SSR, RxJS, Signals and Subscriptions Support","archived":false,"fork":false,"pushed_at":"2024-12-26T14:21:14.000Z","size":551,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-22T12:47:55.931Z","etag":null,"topics":["angular","realtime-messaging","rxjs","ssr","trpc"],"latest_commit_sha":null,"homepage":"https://npmjs.com/ngx-trpc","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lennybakkalian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-19T11:17:52.000Z","updated_at":"2025-03-22T00:05:19.000Z","dependencies_parsed_at":"2024-10-26T11:37:59.133Z","dependency_job_id":"071ab1c5-6f2f-47d5-bb5a-c178dfb10ed0","html_url":"https://github.com/lennybakkalian/ngx-trpc","commit_stats":null,"previous_names":["lennybakkalian/ngx-trpc"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lennybakkalian%2Fngx-trpc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lennybakkalian%2Fngx-trpc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lennybakkalian%2Fngx-trpc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lennybakkalian%2Fngx-trpc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lennybakkalian","download_url":"https://codeload.github.com/lennybakkalian/ngx-trpc/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248830888,"owners_count":21168362,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","realtime-messaging","rxjs","ssr","trpc"],"created_at":"2024-11-16T00:11:06.674Z","updated_at":"2025-04-14T06:21:39.468Z","avatar_url":"https://github.com/lennybakkalian.png","language":"TypeScript","funding_links":[],"categories":["Recently Updated","Architecture and Advanced Topics"],"sub_categories":["[Nov 30, 2024](/content/2024/11/30/README.md)","Server-Side Rendering"],"readme":"# Angular tRPC Client 🚀\n\n## Features\n- **Full Type Safety**: Enjoy end-to-end type safety for all your API calls.\n- **SSR-Ready**: Optimized for Angular Universal and Server-Side Rendering (SSR).\n- **Reactive Streams**: Utilize RxJS for handling API responses and WebSocket streams like a pro.\n- **Subscriptions**: Native support for subscriptions using WebSockets, fully integrated with RxJS.\n\n\n## Table of Contents\n- [Inspiration](#inspiration-)\n- [Getting Started](#getting-started-)\n- [Server Side Rendering](#server-side-rendering)\n- [TODOs](#todos-)\n- [Disclaimer](#disclaimer-)\n- [Example Implementation](https://github.com/lennybakkalian/ngx-trpc/tree/main/projects/example)\n\n## Inspiration 💡\n\nThis project was inspired by the amazing work of [`Dafnik/ngx-trpc`](https://github.com/Dafnik/ngx-trpc) and [`@analogjs/trpc`](https://github.com/analogjs/analog/tree/main/packages/trpc). It builds upon the same principles of type-safe API communication and seamless Angular integration, with added features such as WebSocket subscriptions.\n\n## Disclaimer ⚠️\n\nSince the REQUEST token is [reintroduced](https://github.com/angular/angular-cli/pull/28463) in v19, this library is compatible only with that version.\n\nThis project is a **work in progress**. Features and APIs may change as development continues. Use at your own risk, and expect frequent updates. Contributions and feedback are always welcome!\n\n---\n\n## Getting Started 🚀\n\nTo start using the Angular tRPC Client in your project, install it via npm:\n\n```bash\nnpm i ngx-trpc\n```\n\n### Step 1: Create a Global Injection Token\n\nFirst, define a global injection token using the `AppRouter` type from your tRPC backend. This will allow you to inject your tRPC client throughout your Angular app.\n\n```typescript\nimport { createTrpcInjectionToken } from 'ngx-trpc';\n\nexport const TRPC = createTrpcInjectionToken\u003cAppRouter\u003e();\n```\n\n### Step 2: Add tRPC Configuration to app.config.ts\nNext, provide the tRPC client and httpClient in your `app.config.ts` file. ([example](./projects/example/src/app/app.config.ts))\n```typescript\nimport { provideTrpc } from 'ngx-trpc';\n\nprovideHttpClient(withFetch())\nprovideTrpc(TRPC, { options })\n```\n\n### Step 3: Use Queries as RxJS Observables in Components\nYou can now use the TRPC injection token to call tRPC queries as RxJS observables inside your components. Here's an example of how to call the hello query.\n```typescript\nimport { TRPC } from '../path/to/injection-token';\n\n@Component({\n  selector: 'app-demo',\n  template: '{{ demoQuery$ | async | json }}',\n})\nexport class DemoComponent {\n  readonly trpc = inject(TRPC);\n  \n  readonly demoQuery$ = this.trpc.hello.query();\n}\n```\n\n## Known Issues\n* **Headers are not forwarded when performing requests in ssr.**\n\n  _Add this provider to your `app.config.server.ts` file to fix this issue:_\n  ```typescript\n  provideServerRoutesConfig([{path: '**', renderMode: RenderMode.Server}])\n  ```\n\n## TODOs 📝\n\n- [ ] Additional Unit Tests for SSR and WebSocket Subscriptions.\n- [ ] Improve Error Handling and Logging.\n- [ ] Handle subscriptions server-side. Currently, subscriptions are only supported client-side.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flennybakkalian%2Fngx-trpc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flennybakkalian%2Fngx-trpc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flennybakkalian%2Fngx-trpc/lists"}