Remove ng modules

angular/src/app/app.component.spec.ts

@@ -1,21 +1,18 @@
 import { TestBed } from "@angular/core/testing";
 import { AppComponent } from "./app.component";
 import { FormsModule } from "@angular/forms";
-import { ElizaProvider } from "src/connect/client.provider";
+import { provideConnect } from "src/connect/connect.module";
 import { ELIZA } from "src/connect/tokens";
-import { ConnectModule } from "src/connect/connect.module";
 
 describe("AppComponent", () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      providers: [ElizaProvider],
-      imports: [
-        AppComponent,
-        FormsModule,
-        ConnectModule.forRoot({
+      providers: [
+        provideConnect({
           baseUrl: "https://demo.connectrpc.com",
         }),
       ],
+      imports: [AppComponent, FormsModule],
     }).compileComponents();
   });
 

angular/src/app/app.component.ts

@@ -1,24 +1,21 @@
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { FormsModule } from "@angular/forms";
-import { ObservableClient } from "src/connect/observable-client";
-import { ElizaService } from "src/gen/connectrpc/eliza/v1/eliza_pb";
 import { ELIZA } from "../connect/tokens";
 
 interface Response {
   text: string;
   sender: "eliza" | "user";
 }
 
-// Note that with Angular v19, standalone components are the default so no
-// need for standalone: true here.
 @Component({
-  imports: [CommonModule, FormsModule],
   selector: "app-root",
-  templateUrl: "./app.component.html",
+  imports: [CommonModule, FormsModule],
   styleUrls: ["./app.component.css"],
+  templateUrl: "./app.component.html",
 })
 export class AppComponent {
+  client = inject(ELIZA);
   title = "Eliza";
   project = "Angular";
   statement: string = "";
@@ -28,12 +25,7 @@ export class AppComponent {
       sender: "eliza",
     },
   ];
-  introFinished: boolean = false;
-
-  constructor(
-    @Inject(ELIZA)
-    private client: ObservableClient<typeof ElizaService>,
-  ) {}
+  introFinished = false;
 
   onSend(event?: MouseEvent) {
     if (event) {

angular/src/app/app.config.ts

@@ -0,0 +1,12 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideConnect } from "../connect/connect.module";
+import { provideProtractorTestingSupport } from "@angular/platform-browser";
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideConnect({
+      baseUrl: "https://demo.connectrpc.com",
+    }),
+    provideProtractorTestingSupport(),
+  ],
+};

angular/src/connect/connect.module.ts

@@ -1,29 +1,59 @@
-import { ModuleWithProviders, NgModule } from "@angular/core";
-import { Interceptor } from "@connectrpc/connect";
-import { createConnectTransport } from "@connectrpc/connect-web";
-import { INTERCEPTORS, TRANSPORT } from "./tokens";
+import { inject, InjectionToken, Provider } from "@angular/core";
+import { Interceptor, Transport } from "@connectrpc/connect";
+import {
+  createConnectTransport,
+  createGrpcWebTransport,
+} from "@connectrpc/connect-web";
+import { DescService } from "@bufbuild/protobuf";
+import { createObservableClient, ObservableClient } from "./observable-client";
 
-@NgModule()
-export class ConnectModule {
-  public static forRoot(
-    connectOptions: Omit<
-      Parameters<typeof createConnectTransport>[0],
-      "interceptors"
-    >,
-  ): ModuleWithProviders<ConnectModule> {
-    return {
-      ngModule: ConnectModule,
-      providers: [
-        {
-          provide: TRANSPORT,
-          useFactory: (interceptors: Interceptor[]) =>
-            createConnectTransport({
-              ...connectOptions,
-              interceptors: interceptors,
-            }),
-          deps: [INTERCEPTORS],
-        },
-      ],
-    };
-  }
+const TRANSPORT = new InjectionToken<Transport>("connect.transport");
+
+export const INTERCEPTORS = new InjectionToken<Interceptor[]>(
+  "connect.interceptors",
+  {
+    factory: () => [],
+  },
+);
+
+export function createClientToken<T extends DescService>(
+  service: T,
+): InjectionToken<ObservableClient<T>> {
+  return new InjectionToken(`client for ${service.typeName}`, {
+    factory() {
+      return createObservableClient(service, inject(TRANSPORT));
+    },
+  });
+}
+
+export function provideConnect(
+  options: Omit<Parameters<typeof createConnectTransport>[0], "interceptors">,
+): Provider[] {
+  return [
+    {
+      provide: TRANSPORT,
+      useFactory: (interceptors: Interceptor[]) =>
+        createConnectTransport({
+          ...options,
+          interceptors,
+        }),
+      deps: [INTERCEPTORS],
+    },
+  ];
+}
+
+export function provideGrpcWeb(
+  options: Omit<Parameters<typeof createGrpcWebTransport>[0], "interceptors">,
+): Provider[] {
+  return [
+    {
+      provide: TRANSPORT,
+      useFactory: (interceptors: Interceptor[]) =>
+        createGrpcWebTransport({
+          ...options,
+          interceptors,
+        }),
+      deps: [INTERCEPTORS],
+    },
+  ];
 }

angular/src/connect/tokens.ts

@@ -1,17 +1,7 @@
-import { InjectionToken } from "@angular/core";
-import type { Interceptor, Transport } from "@connectrpc/connect";
 import { ElizaService } from "src/gen/connectrpc/eliza/v1/eliza_pb";
-import { ObservableClient } from "./observable-client";
+import { createClientToken } from "./connect.module";
 
-export const TRANSPORT = new InjectionToken<Transport>("connect.transport");
+// Create an injection token for the Eliza service client
+export const ELIZA = createClientToken(ElizaService);
 
-export const INTERCEPTORS = new InjectionToken<Interceptor[]>(
-  "connect.interceptors",
-  {
-    factory: () => [],
-  },
-);
-
-export const ELIZA = new InjectionToken<ObservableClient<typeof ElizaService>>(
-  ElizaService.name,
-);
+// Additional client tokens representing Connect services could be added here

angular/src/main.ts

@@ -1,12 +1,7 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from "./app/app.config";
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err),
+);