Angular 19 模块化项目混合渲染配置求助

1. 配置路由级渲染策略 #

在app.module.ts的路由配置中，为需要客户端渲染的路由添加rendererType: 'client'标识，默认路由保持SSR渲染：

// app.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 导入你的组件
import { HomeComponent } from './components/home/home.component';
import { ClientOnlyComponent } from './components/client-only/client-only.component';

const routes: Routes = [
  // 默认使用SSR渲染
  { path: '', component: HomeComponent },
  // 指定该路由使用客户端渲染
  {
    path: 'client-only',
    component: ClientOnlyComponent,
    rendererType: 'client'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 确保ServerModule配置正确 #

你的app.module.server.ts当前配置已经符合要求，无需修改，但要确保AppModule中已经导入了上述路由模块：

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 {}

3. 修改server.ts实现路由识别 #

在项目根目录的server.ts中，添加路由渲染类型判断逻辑，当匹配到客户端渲染路由时，直接返回静态index.html；其他路由执行SSR渲染：

// server.ts
import { APP_BASE_HREF } from '@angular/common';
import { Router } from '@angular/router';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { existsSync } from 'fs';
import { join } from 'path';
import { AppServerModule } from './src/main.server';

const app = express();

// 替换为你的项目编译后的browser目录路径
const distFolder = join(process.cwd(), 'dist/your-project-name/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

// 注册Angular Universal引擎
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule,
}));

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

// 处理静态资源
app.get('*.*', express.static(distFolder, {
  maxAge: '1y'
}));

// 混合渲染核心逻辑
app.get('*', (req, res) => {
  // 获取当前请求对应的路由配置
  const router = AppServerModule.injector.get(Router);
  const matchedRoute = router.config.find(route => {
    // 匹配精确路由或通配符路由
    return route.path === req.path.slice(1) || route.path === '**';
  });

  if (matchedRoute?.rendererType === 'client') {
    // 客户端渲染：直接返回静态index.html
    res.sendFile(join(distFolder, indexHtml));
  } else {
    // SSR渲染：执行服务器端渲染逻辑
    res.render(indexHtml, {
      req,
      providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }]
    });
  }
});

// 启动服务器
const port = process.env['PORT'] || 4000;
app.listen(port, () => {
  console.log(`Node Express server listening on http://localhost:${port}`);
});

4. 验证配置 #

1. 启动项目：执行npm run dev:ssr
2. 访问SSR路由（如首页）：查看页面源码，能看到服务器渲染生成的完整HTML内容
3. 访问客户端渲染路由（如/client-only）：查看页面源码，仅能看到Angular根容器标记，页面内容会在客户端加载后渲染

内容的提问来源于stack exchange，提问作者Sparrow_ua