fix: with platform-browser, provideZoneChangeDetection belongs in app.module.ts

With Angular 21, provideZoneChangeDetection is required, otherwise our
microphone buttons don't work properly, but with the deprecated
platform-browser-dynamic, that belonged in main.ts, while with the
recommended platform-browser, it has to be moved to the NgModule's
provides in app.module.ts.

Author: joanise

packages/angular-demo/src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from "@angular/core";
+import { NgModule, provideZoneChangeDetection } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
 
 import { AppComponent } from "./app.component";
@@ -10,7 +10,7 @@ defineCustomElements();
 @NgModule({
   declarations: [AppComponent],
   imports: [BrowserModule, NgxRAWebComponentModule],
-  providers: [],
+  providers: [provideZoneChangeDetection()],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

packages/angular-demo/src/main.ts

@@ -1,10 +1,7 @@
-import { provideZoneChangeDetection } from "@angular/core";
 import { platformBrowser } from "@angular/platform-browser";
 
 import { AppModule } from "./app/app.module";
 
 platformBrowser()
-  .bootstrapModule(AppModule, {
-    applicationProviders: [provideZoneChangeDetection()],
-  })
+  .bootstrapModule(AppModule)
   .catch((err) => console.error(err));

packages/studio-web/src/app/app.module.ts

@@ -1,7 +1,11 @@
 import { ToastrModule } from "ngx-toastr";
 
 import { provideHttpClient } from "@angular/common/http";
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  NgModule,
+  provideZoneChangeDetection,
+} from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
@@ -53,7 +57,7 @@ defineCustomElements();
     NgxRAWebComponentModule,
     SharedModule,
   ],
-  providers: [provideHttpClient()],
+  providers: [provideHttpClient(), provideZoneChangeDetection()],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })

packages/studio-web/src/main.ts

@@ -1,5 +1,5 @@
-import { enableProdMode, provideZoneChangeDetection } from "@angular/core";
 import { platformBrowser } from "@angular/platform-browser";
+import { enableProdMode } from "@angular/core";
 
 import { AppModule } from "./app/app.module";
 import { environment } from "./environments/environment";
@@ -9,7 +9,5 @@ if (environment.production) {
 }
 
 platformBrowser()
-  .bootstrapModule(AppModule, {
-    applicationProviders: [provideZoneChangeDetection()],
-  })
+  .bootstrapModule(AppModule)
   .catch((err: any) => console.error(err));