fix: SSR with the new standalone

- instead of using custom loader for browser and server, to use just one for both
- this has a problem that the translations files will be loaded in the frontend, which we will fix with hydration in a future commit

Author: robertIsaac

server.ts

@@ -4,9 +4,9 @@ import { ngExpressEngine } from '@nguniversal/express-engine';
 import * as express from 'express';
 import { join } from 'path';
 
-import { AppServerModule } from './src/main.server';
 import { APP_BASE_HREF } from '@angular/common';
 import { existsSync } from 'fs';
+import bootstrap from './src/main.server';
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {
@@ -16,7 +16,7 @@ export function app(): express.Express {
 
   // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
   server.engine('html', ngExpressEngine({
-    bootstrap: AppServerModule,
+    bootstrap,
   }));
 
   server.set('view engine', 'html');

src/app/app.config.server.ts

@@ -0,0 +1,11 @@
+import { provideServerRendering } from '@angular/platform-server';
+import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
+import { appConfig } from './app.config';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering()
+  ]
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

src/app/app.config.ts

@@ -0,0 +1,34 @@
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppRoutingModule, routes } from './app-routing.module';
+import { CollapseModule } from 'ngx-bootstrap/collapse';
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+import { translateBrowserLoaderFactory } from './core/utils/translate-browser.loader';
+import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { LocalizeParser, LocalizeRouterModule, LocalizeRouterSettings } from '@gilsdav/ngx-translate-router';
+import { localizeBrowserLoaderFactory } from './core/utils/localize-browser.loader';
+import { Location } from '@angular/common';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    importProvidersFrom(BrowserModule, AppRoutingModule, CollapseModule.forRoot(), BsDropdownModule.forRoot(), TranslateModule.forRoot({
+      defaultLanguage: 'en',
+      loader: {
+        provide: TranslateLoader,
+        useFactory: translateBrowserLoaderFactory,
+        deps: [HttpClient],
+      },
+    }), LocalizeRouterModule.forRoot(routes, {
+      parser: {
+        provide: LocalizeParser,
+        useFactory: localizeBrowserLoaderFactory,
+        deps: [TranslateService, Location, LocalizeRouterSettings, HttpClient],
+      },
+      initialNavigation: true,
+    })),
+    provideAnimations(),
+    provideHttpClient(withInterceptorsFromDi()),
+  ],
+};

src/app/app.server.module.ts

@@ -1,56 +1,21 @@
 import { LocalizeParser, LocalizeRouterSettings } from '@gilsdav/ngx-translate-router';
-import { Routes } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Location } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { makeStateKey, StateKey, TransferState } from '@angular/platform-browser';
 import { LocalizeRouterHttpLoader } from '@gilsdav/ngx-translate-router-http-loader';
-
-export class LocalizeBrowserLoader extends LocalizeParser {
-  private translateService: TranslateService;
-  private LocalLocation: Location;
-  private localizeRouterSettings: LocalizeRouterSettings;
-
-  constructor(
-    translateService: TranslateService,
-    location: Location,
-    settings: LocalizeRouterSettings,
-    private data: any,
-  ) {
-    super(translateService, location, settings);
-    this.translateService = translateService;
-    this.LocalLocation = location;
-    this.localizeRouterSettings = settings;
-  }
-
-  public load(routes: Routes): Promise<any> {
-    return new Promise((resolve: any) => {
-      this.locales = this.data.locales;
-      this.prefix = this.data.prefix;
-      this.init(routes).then(resolve);
-    });
-  }
-}
+import { environment } from '../../../environments/environment';
 
 export function localizeBrowserLoaderFactory(
   translate: TranslateService,
   location: Location,
   settings: LocalizeRouterSettings,
   httpClient: HttpClient,
-  transferState: TransferState,
 ): LocalizeParser {
-  const key: StateKey<number> = makeStateKey<number>(
-    'transfer-locales',
+  return new LocalizeRouterHttpLoader(
+    translate,
+    location,
+    settings,
+    httpClient,
+    `${environment.appUrl}assets/locales.json`,
   );
-  const data = transferState.get(key, null);
-  if (data) {
-    return new LocalizeBrowserLoader(translate, location, settings, data);
-  } else {
-    return new LocalizeRouterHttpLoader(
-      translate,
-      location,
-      settings,
-      httpClient,
-    );
-  }
 }

src/app/core/utils/localize-browser.loader.ts

@@ -1,37 +1,9 @@
-import { Observable } from 'rxjs';
-import { TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { HttpClient } from '@angular/common/http';
-import { makeStateKey, StateKey, TransferState } from '@angular/platform-browser';
-
-export class TranslateBrowserLoader implements TranslateLoader {
-  constructor(
-    private http: HttpClient,
-    private transferState: TransferState,
-  ) {
-  }
-
-  public getTranslation(lang: string): Observable<unknown> {
-    const key: StateKey<number> = makeStateKey<number>(
-      'transfer-translate-' + lang,
-    );
-    const data = this.transferState.get(key, null);
-
-    // if none found, http load as fallback
-    if (data) {
-      return new Observable((observer) => {
-        observer.next(data);
-        observer.complete();
-      });
-    } else {
-      return new TranslateHttpLoader(this.http).getTranslation(lang);
-    }
-  }
-}
+import { environment } from '../../../environments/environment';
 
 export function translateBrowserLoaderFactory(
   httpClient: HttpClient,
-  transferState: TransferState,
-): TranslateBrowserLoader {
-  return new TranslateBrowserLoader(httpClient, transferState);
+): TranslateHttpLoader {
+  return new TranslateHttpLoader(httpClient, `${environment.appUrl}assets/i18n/`);
 }

src/app/core/utils/localize-server.loader.ts

@@ -1,2 +1,3 @@
 export const environment = {
+  appUrl: 'http://localhost:4200/'
 };

src/app/core/utils/translate-browser.loader.ts

@@ -1 +1,7 @@
-export { AppServerModule } from './app/app.server.module';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { config } from './app/app.config.server';
+
+const bootstrap = () => bootstrapApplication(AppComponent, config);
+
+export default bootstrap;