Wie bringe ich Angular 19 SSR dazu, mit .NET 6 zu funktionieren? ⇐ C#

[Anonymous]

Ich konvertiere meine CSR-Angular-App mit .NET 6 in SSR. Jetzt hat das .NET-Backend Probleme, die Dateien für das Frontend bereitzustellen. Alle Dateien werden erstellt und korrekt in den richtigen Verzeichnissen abgelegt. Siehe Ausschnitte für Setup-Dateien unten.

Code: Select all

angular.json

:

Code: Select all

"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/my-app/server",
"main": "src/main.server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
...
}
},

"serve-ssr": {
"builder": "@angular-devkit/build-angular:ssr-dev-server",
"options": {
"host": "localhost",
"port": 44492,
"ssl": true,
"sslCert": "%APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem",
"sslKey": "%APPDATA%\\ASP.NET\\https\\%npm_package_name%.key",
"proxyConfig": "proxy.conf.js"
},
"configurations": {
"development": {
"browserTarget": "my-app:build:development",
"serverTarget": "my-app:server:development"
},
"production": {
"browserTarget": "my-app:build:production",
"serverTarget": "my-app:server:production"
}
},
"defaultConfiguration": "development"
},

Code: Select all

tsconfig.server.json

:

Code: Select all

{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./dist/my-app/server",
"target": "es2022",
"module": "es2022",
"moduleResolution": "node",
"types": ["node"],
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
},
"files": [
"src/main.server.ts"
],
"angularCompilerOptions": {
"enableIvy": true
}
}

Code: Select all

main.server.ts

:

Code: Select all

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { serverAppConfig } from './app/app.config.server';

const bootstrap = () => bootstrapApplication(AppComponent, serverAppConfig);

export default bootstrap;

Code: Select all

server.ts

:

Code: Select all

import 'zone.js/node';

import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr/node';
import * as express from 'express';
import { existsSync } from 'node:fs';
import { join } from 'node:path';
import AppServerModule from './src/main.server';

// Define paths
const distFolder = join(process.cwd(), 'dist', 'my-app', 'browser');
const serverFolder = join(process.cwd(), 'dist', 'my-app', 'server');
const indexHtml = existsSync(join(distFolder, 'index.original.html'))
? join(distFolder, 'index.original.html')
: join(distFolder, 'index.html');

// Initialize CommonEngine for SSR
const commonEngine = new CommonEngine();

export function app(): express.Express {
const server = express();

server.set('view engine', 'html');
server.set('views', distFolder);

// 📚 Static Files Serving
server.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));

// 📚 Angular SSR Rendering
server.get('*', (req, res, next) => {
const { protocol, originalUrl, baseUrl, headers } = req;

commonEngine
.render({
bootstrap: AppServerModule,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: distFolder,
providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
})
.then((html) => res.send(html))
.catch((err) => {
console.error('SSR Error:', err);
next(err);
});
});

return server;
}

// 📚 Start the Server
function run(): void {
const port = process.env['PORT'] || 44492;

const server = app();
server.listen(port, () =>  {
console.log(`✅ Node Express server listening on http://localhost:${port}`);
});
}

// 📚 Ensure Server Only Runs in Standalone Mode
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
console.log('✅ Module Filename:', moduleFilename);
console.log('✅ Current Filename:', __filename);
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
console.log('✅ Running the SSR server...');
run();
}

export default AppServerModule;

Code: Select all

Program.cs

(das funktionierte mit CSR):

Code: Select all

app.UseStaticFiles(new StaticFileOptions
{
OnPrepareResponse = ctx =>
{
ctx.Context.Response.Headers.Append("Cache-Control", "public,max-age=31536000");
}
});

app.UseRouting();
app.UseAuthorization();

app.MapControllerRoute(
name: "default",
pattern: "{controller}/{action=Index}/{id?}");

app.MapFallbackToFile("index.html");

Code: Select all

.csproj

Datei:

Code: Select all

net6.0
enable
false
ClientApp\
https://localhost:44492
npm run dev:ssr
enable