This 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.
Whats used in the repo:
- Angular 16
- Standalone Components
- Universal
- Hydration
- NgExpressEngine
- Custom Webpack
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.
The 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)
Angular can easily support this pattern in Angular Universal with little effort.
$ npm install
$ npm run dev:ssrgo to localhost
Initial load uses transfer state. When you navigate to another page the back to Home we will make an RPC to get the updated state
- /app/home/ServerService/example.service.server.ts: ServerService example
- /server/main.ts: server RPC endpoint
- /app/app.config.browser: client RPC requests
If we had Angular support then the api would look like this (a lot less code)
Production ready version
- WIP #2
- Preview
Screen.Recording.2023-06-07.at.11.42.34.PM.mov
- use webpack to auto-generate ServerServices
- create @server folder in src that will be all server services and components
- use angular TransferState
- batch client requests
- batch server requests
- server commponents
- hook into router to batch requests for server components
- mixed server in client components and vice versa
- server and client caching
- UI over http