BM5 Diff | 16f-ssr (von 16-guards)

angular.json CHANGED Viewed

@@ -39,7 +39,15 @@
             "styles": [
               "src/styles.css"
             ],
-            "scripts": []
           },
           "configurations": {
             "production": {

             "styles": [
               "src/styles.css"
             ],
+            "scripts": [],
+            "server": "src/main.server.ts",
+            "prerender": {
+              "discoverRoutes": true,
+              "routesFile": "routes.txt"
+            },
+            "ssr": {
+              "entry": "src/server.ts"
+            }
           },
           "configurations": {
             "production": {

package.json CHANGED Viewed

@@ -7,7 +7,8 @@
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
-    "lint": "ng lint"
   },
   "private": true,
   "dependencies": {
@@ -19,9 +20,12 @@
     "@angular/forms": "^19.1.0",
     "@angular/platform-browser": "^19.1.0",
     "@angular/platform-browser-dynamic": "^19.1.0",
     "@angular/router": "^19.1.0",
     "angular-date-value-accessor": "^3.0.0",
     "book-monkey5-styles": "^1.0.4",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
@@ -30,7 +34,9 @@
     "@angular-devkit/build-angular": "^19.1.1",
     "@angular/cli": "^19.1.1",
     "@angular/compiler-cli": "^19.1.0",
     "@types/jasmine": "~5.1.0",
     "angular-eslint": "19.0.2",
     "eslint": "^9.16.0",
     "jasmine-core": "~5.5.0",
@@ -42,4 +48,4 @@
     "typescript": "~5.7.2",
     "typescript-eslint": "8.18.0"
   }
-}

     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
+    "lint": "ng lint",
+    "serve:ssr:book-monkey": "node dist/book-monkey/server/server.mjs"
   },
   "private": true,
   "dependencies": {
     "@angular/forms": "^19.1.0",
     "@angular/platform-browser": "^19.1.0",
     "@angular/platform-browser-dynamic": "^19.1.0",
+    "@angular/platform-server": "^19.1.0",
     "@angular/router": "^19.1.0",
+    "@angular/ssr": "^19.1.1",
     "angular-date-value-accessor": "^3.0.0",
     "book-monkey5-styles": "^1.0.4",
+    "express": "^4.18.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
     "@angular-devkit/build-angular": "^19.1.1",
     "@angular/cli": "^19.1.1",
     "@angular/compiler-cli": "^19.1.0",
+    "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
+    "@types/node": "^18.18.0",
     "angular-eslint": "19.0.2",
     "eslint": "^9.16.0",
     "jasmine-core": "~5.5.0",
     "typescript": "~5.7.2",
     "typescript-eslint": "8.18.0"
   }
+}

routes.txt ADDED Viewed

	@@ -0,0 +1,7 @@

+/
+/home
+/books
+/books/9783864909467
+/books/9783864907791
+/books/9783864906466
+/books/9783864903571

src/app/app.module.server.ts ADDED Viewed

	@@ -0,0 +1,14 @@

+import { NgModule } from '@angular/core';
+import { ServerModule } from '@angular/platform-server';
+import { AppModule } from './app.module';
+import { AppComponent } from './app.component';
+@NgModule({
+  imports: [
+    AppModule,
+    ServerModule,
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppServerModule {}

src/app/app.module.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { provideHttpClient, withInterceptorsFromDi, HTTP_INTERCEPTORS } from '@angular/common/http';
-import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -24,7 +24,8 @@ import { AuthInterceptor } from './shared/auth.interceptor';
       provide: HTTP_INTERCEPTORS,
       useClass: AuthInterceptor,
       multi: true
-    }
   ],
   bootstrap: [AppComponent]
 })

 import { NgModule } from '@angular/core';
 import { provideHttpClient, withInterceptorsFromDi, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { BrowserModule, provideClientHydration } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
       provide: HTTP_INTERCEPTORS,
       useClass: AuthInterceptor,
       multi: true
+    },
+    provideClientHydration()
   ],
   bootstrap: [AppComponent]
 })

src/main.server.ts ADDED Viewed

	@@ -0,0 +1 @@


1	+ export { AppServerModule as default } from './app/app.module.server';

src/server.ts ADDED Viewed

	@@ -0,0 +1,65 @@

+import { APP_BASE_HREF } from '@angular/common';
+import { CommonEngine, isMainModule } from '@angular/ssr/node';
+import express from 'express';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import AppServerModule from './main.server';
+const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+const browserDistFolder = resolve(serverDistFolder, '../browser');
+const indexHtml = join(serverDistFolder, 'index.server.html');
+const app = express();
+const commonEngine = new CommonEngine();
+/**
+ * Example Express Rest API endpoints can be defined here.
+ * Uncomment and define endpoints as necessary.
+ *
+ * Example:
+ * ```ts
+ * app.get('/api/**', (req, res) => {
+ *   // Handle API request
+ * });
+ * ```
+ */
+/**
+ * Serve static files from /browser
+ */
+app.get(
+  '**',
+  express.static(browserDistFolder, {
+    maxAge: '1y',
+    index: 'index.html'
+  }),
+);
+/**
+ * Handle all other requests by rendering the Angular application.
+ */
+app.get('**', (req, res, next) => {
+  const { protocol, originalUrl, baseUrl, headers } = req;
+  commonEngine
+    .render({
+      bootstrap: AppServerModule,
+      documentFilePath: indexHtml,
+      url: `${protocol}://${headers.host}${originalUrl}`,
+      publicPath: browserDistFolder,
+      providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
+    })
+    .then((html) => res.send(html))
+    .catch((err) => next(err));
+});
+/**
+ * Start the server if this module is the main entry point.
+ * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
+ */
+if (isMainModule(import.meta.url)) {
+  const port = process.env['PORT'] || 4000;
+  app.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}

tsconfig.app.json CHANGED Viewed

@@ -4,10 +4,14 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": []
   },
   "files": [
-    "src/main.ts"
   ],
   "include": [
     "src/**/*.d.ts"

   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
+    "types": [
+      "node"
+    ]
   },
   "files": [
+    "src/main.ts",
+    "src/main.server.ts",
+    "src/server.ts"
   ],
   "include": [
     "src/**/*.d.ts"

Differenzansicht 16f-ssrim Vergleich zu 16-guards

Differenzansicht 16f-ssr
im Vergleich zu 16-guards