{"id":51377191,"url":"https://github.com/BeGj/ngx-trpc-client","last_synced_at":"2026-07-05T21:00:32.231Z","repository":{"id":325111805,"uuid":"1099881300","full_name":"BeGj/ngx-trpc-client","owner":"BeGj","description":null,"archived":false,"fork":false,"pushed_at":"2026-06-21T21:17:17.000Z","size":719,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-07-01T23:28:33.626Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/BeGj.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-19T15:03:40.000Z","updated_at":"2026-06-25T16:28:22.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/BeGj/ngx-trpc-client","commit_stats":null,"previous_names":["begj/angular-trpc","begj/ngx-trpc-client"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/BeGj/ngx-trpc-client","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BeGj%2Fngx-trpc-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BeGj%2Fngx-trpc-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BeGj%2Fngx-trpc-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BeGj%2Fngx-trpc-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BeGj","download_url":"https://codeload.github.com/BeGj/ngx-trpc-client/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BeGj%2Fngx-trpc-client/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35168795,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-05T02:00:06.290Z","response_time":100,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2026-07-03T14:00:27.940Z","updated_at":"2026-07-05T21:00:32.221Z","avatar_url":"https://github.com/BeGj.png","language":"TypeScript","funding_links":[],"categories":["Architecture and Advanced Topics"],"sub_categories":["HTTP"],"readme":"# ngx-trpc-client\n\nForked from https://github.com/analogjs/analog/tree/beta/packages/trpc because of https://github.com/analogjs/analog/issues/1894\n\n## Getting started\n\n### Server\n\n- If you are using Angular SSR you may look at the demo application for how to add trpc to your existing AngularSSR express api, or visit https://trpc.io/docs/server/adapters/express\n- If you are hosting TRPC in a separate express or other framework, please look at the TRPC documentation for how to set it up using your framework.\n\nIf you would like to have AngularSSR with other API frameworks than Express you may get some inspiration from this repo https://github.com/JeanMeche/ssr-v19 where they showcase AngularSSR with Elysia, Fastify, H3, Hono and ExpressJs. I hope that repo is still maintained by the time you read this.\n\nThe important part is to know the server url and route in the client, and to be able to import your appRouter type into the frontend.\n\n### Client\n\n#### Install\n\n`pnpm install ngx-trpc-client superjson @trpc/server`\n\n`@trpc/server` is a peer dependency — you need it for the `AppRouter` type import. The library supports `@trpc/server` v10 and v11.\n\n#### Configure\n\nCreate a file like [trpc-client.ts](./projects/demo/src/app/trpc-client.ts) with import to your AppRouter type and route to your trpc endpoint\n\nShould look like\n\n```ts\n// trpc-client.ts\nimport { AppRouter } from '../trpc/appRouter'; // Imported from wherever you have your TRPC server in your repo/monorepo.\nimport { createTrpcClient } from 'ngx-trpc-client';\nimport SuperJSON from 'superjson';\n\nexport const { provideTrpcClient, TrpcClient } = createTrpcClient\u003cAppRouter\u003e({\n  url: '/api/trpc', // Remember to set the right route\n  options: {\n    transformer: SuperJSON,\n  },\n});\n```\n\n#### Providers\n\nAdd `provideTrpcClient()` to your [app.config.ts](./projects/demo/src/app/app.config.ts) imported from file above.\n\n```ts\n// app.config.ts\nimport {\n  ApplicationConfig,\n  provideBrowserGlobalErrorListeners,\n  provideZonelessChangeDetection,\n} from '@angular/core';\nimport { provideRouter } from '@angular/router';\n\nimport { routes } from './app.routes';\nimport { provideClientHydration, withEventReplay } from '@angular/platform-browser';\nimport { provideTrpcClient } from './trpc-client'; // This line, but your path\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideBrowserGlobalErrorListeners(),\n    provideZonelessChangeDetection(),\n    provideRouter(routes),\n    provideClientHydration(withEventReplay()),\n    provideTrpcClient(), // and this line\n  ],\n};\n```\n\n#### Usage\n\nInject `TrpcClient` where needed like in [blog.ts](./projects/demo/src/app/pages/blog/blog.ts)\n\nExample:\n\n```ts\n// blog.component.ts\nimport { Component, inject } from '@angular/core';\nimport { TrpcClient } from '../../trpc-client';\nimport { rxResource, toSignal } from '@angular/core/rxjs-interop';\nimport { ActivatedRoute } from '@angular/router';\nimport { map } from 'rxjs';\n\n@Component({\n  selector: 'app-blog',\n  imports: [],\n  templateUrl: './blog.html',\n  styleUrl: './blog.css',\n})\nexport class Blog {\n  private trpc = inject(TrpcClient); // Inject TRPC\n  private route = inject(ActivatedRoute);\n\n  private blogId = toSignal(this.route.params.pipe(map((params) =\u003e Number(params['blogId']))));\n\n  postResource = rxResource({\n    stream: ({ params }) =\u003e\n      this.trpc.post.getPosts.query({\n        // Use it wherever you want\n        blogId: params.blogId,\n      }),\n    params: () =\u003e ({ blogId: this.blogId() }),\n  });\n}\n```\n\n## Why do you need this library to use TRPC with Angular?\n\nUsing TRPC with Angular is not very well documented, but if you are not using AngularSSR then it is pretty straight forward to get it working. You may use this repo as an example for your own implementation, or install it and use the client with most bugs fixed out of the box.\n\nThis library improves tRPC's integration with Angular using RxJs and ensures that requests are not duplicated on the server when prerendering and on the client. This is a typical problem you meet when you try to do it yourself without this library.\n\n## Why use TRPC\n\nWith TRPC you get strongly typed API requests, so you don't have to either hope your API input and output parameters won't change and break your application, or run manual and tiresome OpenAPI generators. When you change inputs or outputs in TRPC the types will instantly change in the frontend code and show you errors before runtime.\n\nTRPC is not for everyone, but if you use a BFF (Backend-For-Frontend) pattern we have found it extremely useful.\n\n# Contribution\n\nLibrary is open for contributions! Please make an issue or a pull request\n\n## Getting started contributing\n\n- Clone the repo or a fork of it `git clone git@github.com:BeGj/ngx-trpc-client.git`\n- Install dependencies using pnpm `pnpm i`. If you dont have pnpm install it using npm or corepack\n- Build library to dist `ng build ngx-trpc-client`\n- Serve the demo application if you want `ng serve`\n\n## TODO\n\n- [x] Upgrade to TRPC v11 like this https://github.com/analogjs/analog/pull/1826\n- [x] Fix duplicate TRPC request during ssr like this https://github.com/analogjs/analog/pull/1822\n- [x] Publish as npm package\n- [x] Set up pipelines\n\n## Prettier\n\n- Run `pnpm format` to format code using prettier\n\n## Eslint\n\n- Run `pnpm lint` to lint code using eslint\n\n## Releasing\n\nReleases are published to npm automatically by the [Release workflow](.github/workflows/release.yml), triggered by pushing a `v*` git tag. The published version comes from `projects/ngx-trpc-client/package.json` — the tag only triggers the workflow, so the two must match.\n\nTo cut a release:\n\n1. **Bump the version** in the library package (run inside the library folder so it edits the right `package.json`):\n\n   ```bash\n   cd projects/ngx-trpc-client\n   npm version patch   # or minor / major — bumps package.json and creates a vX.Y.Z commit + tag\n   cd ../..\n   ```\n\n2. **Update the changelog.** Add a dated section to the root [`CHANGELOG.md`](CHANGELOG.md) matching the new version:\n\n   ```markdown\n   ## [0.0.2] - 2026-06-21\n\n   ### Added\n\n   - ...\n   ```\n\n   \u003e Only edit the root `CHANGELOG.md`. `build:lib` copies it into the package at build time, so `projects/ngx-trpc-client/CHANGELOG.md` is generated and gitignored.\n\n3. **Push the commit and the tag:**\n\n   ```bash\n   git push \u0026\u0026 git push --tags\n   ```\n\nPushing the tag runs the release, which enforces three gates before publishing and fails fast if any is unmet:\n\n1. The tag (`vX.Y.Z`) matches the version in `projects/ngx-trpc-client/package.json`.\n2. `CHANGELOG.md` has a dated `## [X.Y.Z] - \u003cdate\u003e` entry for that version.\n3. CI passes (lint, build, test).\n\nPublishing uses npm **OIDC trusted publishing** — no `NPM_TOKEN` secret is needed and provenance is attached automatically. This relies on a one-time setup on npmjs.com: the `ngx-trpc-client` package → **Settings → Trusted Publisher** must point at repository `BeGj/ngx-trpc-client` and workflow `release.yml`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBeGj%2Fngx-trpc-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBeGj%2Fngx-trpc-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBeGj%2Fngx-trpc-client/lists"}