[Angular] Example using multiple endpoints

[Ryan Tibbetts]

Is your feature request addressing a specific problem? Please elaborate.

The current Angular example showcases the "ConnectModule" utilizing a single base URL, which functions flawlessly for Unary. However, it appears that managing multiple instances of transports is possible in React, but the procedure for achieving this in a framework like Angular remains unclear. I couldn't find a clear demonstration of this functionality in React either, although this might stem from my limited familiarity with React.

Describe the solution you'd like

I am eager to see an Angular demonstration illustrating the setup of multiple transports/ConnectModules for various URL endpoints or how to access multiple routes on the baseurl (if feasible). This constraint doesn't seem inherent to connect-es, but I haven't come across any documentation detailing the approach or at least not in a straightforward manner from my perspective.

Please specify whether the request is for Connect for Web or Connect for Node.js.

This request pertains to Connect for Web.

Describe alternatives you've considered

In my experimentation, I've tried crafting distinct configurations of ConnectModule calls targeting different baseurls. However, upon importing these configurations into the desired component, it seems that each call overrides the previous one, resulting in only the most recent baseurl being utilized.

Another approach that yielded partial success involved creating a unary call configuration as per the documentation for various components. This enabled multiple instances without overwriting each other; however, it limited me to invoking only one endpoint per parent-level component.

I believe there should be a more intuitive method within Angular to achieve this goal, but it currently surpasses my comprehension. Given the potential significance of this functionality for gRPC Web, I believe it would be beneficial to incorporate a clear explanation within the Angular documentation (and possibly across all frameworks).

Update
Something like:

const fooElizaClient = createObservableClient(ElizaService, createTransport({ baseUrl: "https://foo.com/" });
const barElizaClient = createObservableClient(ElizaService, createTransport({ baseUrl: "https://bar.com/" });

Works for Angular, but I wonder if there isn't a way we can demonstrate using @NgModule, which seems like a more angular way to do it.

Additional context
For reference, this is the Angular example I am referring to: https://github.com/connectrpc/examples-es/blob/main/angular/src/app/app.module.ts
Also, this documentation was reviewed as well: https://connectrpc.com/docs/web/getting-started/

[Sri Krishna]

Works for Angular, but I wonder if there isn't a way we can demonstrate using @NgModule, which seems like a more angular way to do it.

Providing and consuming two different values of the same type and providing values via an NgModule are not connect specific, but are related to how dependency injection works in Angular. Hence it shouldn't be an example of using connect.