chore: updated dev ssr application based on official docs

packages/components-dev/ssr/README.md

@@ -0,0 +1,20 @@
+# SSR dev application
+
+Development application for testing SSR features of Koobiq Angular Components.
+
+Based on [Angular SSR example](https://github.com/angular/angular/tree/18.2.14/adev/src/content/examples/ssr) from the [official documentation](https://v18.angular.dev/guide/ssr).
+
+## Development
+
+Make sure you have the [correct version](.nvmrc) of Node.js installed (we recommend use [nvm](https://github.com/nvm-sh/nvm)).
+
+```bash
+# Setup Node.js
+nvm use
+
+# Install dependencies
+yarn install
+
+# Run application
+yarn run dev:ssr
+```

packages/components-dev/ssr/config.server.ts

@@ -0,0 +1,9 @@
+import { mergeApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import config from './config';
+
+export default mergeApplicationConfig(config, {
+    providers: [
+        provideServerRendering()
+    ]
+});

packages/components-dev/ssr/config.ts

@@ -0,0 +1,14 @@
+import { provideHttpClient, withFetch } from '@angular/common/http';
+import { ApplicationConfig } from '@angular/core';
+import { provideClientHydration } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideRouter } from '@angular/router';
+
+export default <ApplicationConfig>{
+    providers: [
+        provideRouter([]),
+        provideHttpClient(withFetch()),
+        provideClientHydration(),
+        provideAnimations()
+    ]
+};

packages/components-dev/ssr/main.server.ts

@@ -1,13 +1,5 @@
-import { bootstrapApplication, provideClientHydration, withEventReplay } from '@angular/platform-browser';
-import { provideServerRendering } from '@angular/platform-server';
-import { provideRouter } from '@angular/router';
+import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';
+import config from './config.server';
 import { DevApp } from './module';
 
-export default () =>
-    bootstrapApplication(DevApp, {
-        providers: [
-            provideClientHydration(withEventReplay()),
-            provideRouter([]),
-            provideServerRendering()
-        ]
-    });
+export default (context: BootstrapContext) => bootstrapApplication(DevApp, config, context);

packages/components-dev/ssr/main.ts

@@ -1,12 +1,5 @@
-import { bootstrapApplication, provideClientHydration } from '@angular/platform-browser';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { provideRouter } from '@angular/router';
+import { bootstrapApplication } from '@angular/platform-browser';
+import config from './config';
 import { DevApp } from './module';
 
-bootstrapApplication(DevApp, {
-    providers: [
-        provideRouter([]),
-        provideAnimations(),
-        provideClientHydration()
-    ]
-}).catch((error) => console.error(error));
+bootstrapApplication(DevApp, config).catch((err) => console.error(err));

packages/components-dev/ssr/server.ts

@@ -10,14 +10,14 @@ function app(): express.Express {
     const serverDistFolder = dirname(fileURLToPath(import.meta.url));
     const browserDistFolder = resolve(serverDistFolder, '../browser');
     const indexHtml = join(serverDistFolder, 'index.server.html');
-
     const commonEngine = new CommonEngine();
 
     server.set('view engine', 'html');
     server.set('views', browserDistFolder);
 
     // Example Express Rest API endpoints
-    // server.get('/api/**', (req, res) => { });
+    // server.get('/api/**', (req, res) => {});
+
     // Serve static files from /browser
     server.get(
         '**',