How to seamlessly provide Client IP address on both SSR runtime and Client side in Angular 18?

I'm working with Angular 18 and need to retrieve the client's IP address during both server-side rendering (SSR) and client-side rendering. I've come across this answer on how to achieve this with Angular Universal, but Angular 18 no longer uses Angular Universal for SSR.

The approach in the answer involves checking the platform (SSR vs client) and handling the IP retrieval manually, which feels cumbersome and redundant. Is there a more seamless or efficient way to fetch the client's IP address without having to constantly check the current platform? I imagine this can be achieved with ValueProvider but I struggled to find an example.

Ideally, I’m looking for a solution that works across both SSR and client runtime without duplicating code or adding unnecessary complexity.

something like this?

(client) app.config.ts

const CLIENT_IP: ValueProvider = {
provide: 'CLIENT_IP_ADDRESS',
useValue: 'get ip here'
};

export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(
routes,
withPreloading(PreloadAllModules),
withInMemoryScrolling({
scrollPositionRestoration: 'top',
anchorScrolling: 'enabled',
})
),
provideGoogleAnalytics(environment.googleTagId),
CLIENT_IP,
],
};


(server side) app.config.server.ts

const CLIENT_IP: ValueProvider = {
provide: 'CLIENT_IP_ADDRESS',
useValue: 'get ip here'
};

const serverConfig: ApplicationConfig = {
providers: [provideServerRendering(), CLIENT_IP],
};

export const config = mergeApplicationConfig(appConfig, serverConfig);

Continue reading...