{"id":15655357,"url":"https://github.com/patrickjs/angular-server-services","last_synced_at":"2025-05-04T08:34:56.808Z","repository":{"id":171174149,"uuid":"647485423","full_name":"PatrickJS/angular-server-services","owner":"PatrickJS","description":"example Angular Service Services","archived":false,"fork":false,"pushed_at":"2024-01-28T05:44:47.000Z","size":638,"stargazers_count":25,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-30T21:33:20.655Z","etag":null,"topics":["angular","angular-universal","rsc"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PatrickJS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-05-30T22:16:30.000Z","updated_at":"2023-12-02T22:08:44.000Z","dependencies_parsed_at":"2024-01-28T06:35:41.087Z","dependency_job_id":"77fd5ee9-99b9-4584-a095-d46003326635","html_url":"https://github.com/PatrickJS/angular-server-services","commit_stats":null,"previous_names":["patrickjs/angular-server-services"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PatrickJS%2Fangular-server-services","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PatrickJS%2Fangular-server-services/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PatrickJS%2Fangular-server-services/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PatrickJS%2Fangular-server-services/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PatrickJS","download_url":"https://codeload.github.com/PatrickJS/angular-server-services/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252136027,"owners_count":21700019,"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","angular-universal","rsc"],"created_at":"2024-10-03T12:58:25.346Z","updated_at":"2025-05-03T02:57:05.477Z","avatar_url":"https://github.com/PatrickJS.png","language":"TypeScript","readme":"# Angular Server Services 🍑\n\nThis project presents an example of Angular Server Services implementation, utilizing proxying for client services to make RPC (Remote Procedure Calls) to the server service. The goal of this example is to demonstrate how easily these services can be auto-generated, potentially reducing half of your existing codebase.\n\nWhats used in the repo:\n* Angular 16\n* Standalone Components\n* Universal\n* Hydration\n* NgExpressEngine\n* Custom Webpack\n\n\u003e Please note, we are currently using injection-js to bypass the Angular injector and micotask to force zone.js to wait on the server-side. This workarounds are only needed  to workaround how Angular bootstraps and manages the apps on the server. I am also creating my own TransferState service just for this demo.\n\n## Why\n\nThe goal is to replicate GraphQL or RSC by moving all domain logic that lives in these services to the server. We want to do this so we can utilize caching on the server and remove all client code for these services (usually half your codebase)\n\nAngular can easily support this pattern in Angular Universal with little effort.\n\n## Start\n\n```bash\n$ npm install\n$ npm run dev:ssr\n```\ngo to [localhost ](http://localhost:4200/)\n\n\u003cimg alt=\"Screenshot 2023-05-30 at 7 32 35 PM\" src=\"https://github.com/PatrickJS/angular-server-services/assets/1016365/0650cfff-a0be-479f-a799-d18f3169f8c4\"\u003e\n\n\nInitial load uses transfer state. When you navigate to another page the back to Home we will make an RPC to get the updated state\n\n* [/app/home/ServerService/example.service.server.ts](https://github.com/PatrickJS/angular-server-services/blob/main/src/app/home/ServerService/example.service.server.ts): ServerService example\n* [/server/main.ts](https://github.com/PatrickJS/angular-server-services/blob/e5deec3011d17c1f7301b848eb3f88d268ea8454/server/main.ts#L36...L45): server RPC endpoint\n* [/app/app.config.browser](https://github.com/PatrickJS/angular-server-services/blob/main/src/app/app.config.browser.ts#L10...L38): client RPC requests\n\nIf we had Angular support then the api would look like this (a lot less code)\n* [branch for ideal api](https://github.com/PatrickJS/angular-server-services/tree/ideal-api)\n* [ExampleService](https://github.com/PatrickJS/angular-server-services/blob/ideal-api/src/%40server/Example.service.ts)\n* [HomeComponent](https://github.com/PatrickJS/angular-server-services/blob/ideal-api/src/app/home/home.component.ts#L4)\n\nProduction ready version\n* WIP https://github.com/PatrickJS/angular-server-services/pull/2\n* Preview\n\nhttps://github.com/PatrickJS/angular-server-services/assets/1016365/8b00d775-42c4-4d29-b79a-815906d35d04\n\n\n# TODO: production ready version\n- [x] use webpack to auto-generate ServerServices\n- [x] create @server folder in src that will be all server services and components\n- [x] use angular TransferState\n- [x] batch client requests\n- [x] batch server requests\n- [ ] server commponents\n- [ ] hook into router to batch requests for server components\n- [ ] mixed server in client components and vice versa\n- [ ] server and client caching\n- [ ] UI over http\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickjs%2Fangular-server-services","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatrickjs%2Fangular-server-services","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickjs%2Fangular-server-services/lists"}