How to use the @angular/platform-browser.BrowserModule.withServerTransition function in @angular/platform-browser

import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';

import { FlexLayoutServerModule } from '@angular/flex-layout/server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';

import { AppComponent } from './app.component';
import { appId, AppModule } from './app.module';

/**
 * App server module for node platform.
 */
@NgModule({
    imports: [
        BrowserModule.withServerTransition({ appId }),
        BrowserTransferStateModule,
        HttpClientModule,

        AppModule,

        ServerModule,
        ServerTransferStateModule,
        ModuleMapLoaderModule,
        NoopAnimationsModule,

        FlexLayoutServerModule
    ],
    bootstrap: [AppComponent]
})
export class AppServerModule { }

import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { UnauthorizedComponent } from './unauthorized/unauthorized.component';
import { CoreModule } from './core/core.module';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    CounterComponent,
    FetchDataComponent,
    UnauthorizedComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
      { path: 'unauthorized', component: UnauthorizedComponent },
      { path: '**', redirectTo: '' }
    ]),
    CoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule.withServerTransition({
            appId: 'teanjs-universal'
        }),
        BrowserAnimationsModule,
        NoopAnimationsModule,
        MatButtonModule,
        MatCheckboxModule,
        AppRoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { CoreModule } from 'ish-core/core.module';

import { AppComponent } from './app.component';
import { QuotingRoutingModule } from './extensions/quoting/pages/quoting-routing.module';
import { AppNotFoundRoutingModule } from './pages/app-not-found-routing.module';
import { AppRoutingModule } from './pages/app-routing.module';
import { ShellModule } from './shell/shell.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule.withServerTransition({ appId: 'intershop-pwa' }),
    BrowserAnimationsModule,
    CoreModule,
    ShellModule,
    AppRoutingModule,
    QuotingRoutingModule,
    AppNotFoundRoutingModule,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

NavbarComponent,
    AppComponent,
    PageNotFoundComponent,
    HomeComponent,
    ProductComponent,
    CartComponent,
    CheckoutComponent,
    OrdersComponent,
    ProfileComponent,
    GroupByPipe,
    EllipsisPipe,
    LoginComponent,
    AddNewComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'amazon' }),
    HttpClientModule,
    TransferHttpCacheModule,
    CommonModule,
    FormsModule,
    RouterModule.forRoot(routes),
    HttpClientJsonpModule,
    NgbRatingModule,
    NgbDropdownModule,
    NgbModalModule,
    NgxPaginationModule,
    SimpleNotificationsModule.forRoot(),
    BrowserAnimationsModule
  ],
  providers: [
    { provide: 'BASE_URL', useFactory: getBaseUrl },
    AuthGuard,

SettingsComponent,
		ServersComponent,
		ServersContainerComponent,
		ServersListComponent,
		ServersListItemComponent,
		ServersListHeaderComponent,
		ServerFilterComponent,
		ServerTagFilterComponent,
		ServersDetailComponent,
		DirectConnectComponent,
		PlayerAvatarComponent,
		ColorizePipe,
		EscapePipe
	],
	imports:      [
		BrowserModule.withServerTransition({ appId: 'cfx-ui' }),
		FormsModule,
		HttpModule,
		AppRoutingModule,
		VirtualScrollerModule,
		MomentModule,
		HttpClientModule,
		TranslationModule.forRoot(l10nConfig),
		Angulartics2Module.forRoot(),
		LinkyModule,
		MetaModule.forRoot({
			provide: MetaLoader,
			useFactory: (metaFactory)
		}),
	],
	providers:    [
		ServersService,

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}

export const httpInterceptorProviders = [
  { provide: HTTP_INTERCEPTORS, useClass: AppInterceptor, multi: true },
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AppRoutingModule,
    BrowserAnimationsModule,
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    ClarityModule,
    CoreModule,
    HttpClientModule,
    HomeModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    AuthModule,
  ],
  providers: [httpInterceptorProviders],
  bootstrap: [AppComponent]
})

HomeComponent,
    OutputTableComponent,
    ChildinputsComponent,
    AboutComponent,
    ContactComponent,
    LegalComponent,
    DelayingSocialSecurity8ReturnComponent,
    ArticlesHomeComponent,
    SimilarPIAsComponent,
    SpousalBenefitCalculationComponent,
    ChildInCareSpousalComponent,
    CalculateRetirementBenefitComponent,
    SpousalWithRetirementComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    HttpClientModule,
    FormsModule,
    CollapseModule.forRoot(),
    BsDropdownModule.forRoot(),
    CsvModule,
    SharedModule,
    AppRoutingModule,
  ],
  exports: [],
  providers: [BenefitService, BirthdayService, PresentValueService, EarningsTestService, MortalityService, SolutionSetService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import {PlatformModule} from '@ngx-unicorns/ngx-platform';

@NgModule({
  declarations: [
    RootComponent,
    HomeComponent,
    HeaderComponent,
    MenuComponent,
    StarWarsListComponent,
    StarWarsDetailComponent,
    PokemonListComponent,
    PokemonDetailComponent,
    DisplayTextPipe
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'windev-universal' }),
    FormsModule,
    HttpModule,
    RouterModule.forRoot(ROUTES),
    PlatformModule.forRoot()
  ],
  bootstrap: [RootComponent],
  providers: [
    StarWarsService,
    PokemonService,
    ElectronService,
    DesktopIntegrationService,
    SeoService,
    {
      provide: ShareService,
      useFactory: shareServiceFactory,
      deps: shareServiceFactoryDeps

import { TheOrangeAllianceComponent } from './app.component';
import { AppModule } from './app.module';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  bootstrap: [TheOrangeAllianceComponent],
  imports: [
    BrowserModule.withServerTransition({appId: 'toa-webapp'}),
    AppModule,
  ]
})
export class AppBrowserModule {}