Angular 14集成NgUniversal后SSR页面无限加载问题求助

核心排查方向：ngx-translate SSR配置缺陷 #

无限加载无报错，大概率是Server端渲染时异步任务未完成或依赖浏览器API导致阻塞，针对ngx-translate的常见问题逐一排查：

1. 修正app.server.module.ts的TranslateModule配置 #

确保Server端使用专属的TranslateLoader，完全规避浏览器环境依赖：

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { ServerTranslateLoader } from './server-translate.loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';

export function createTranslateLoader(http: HttpClient) {
  // 注意Server端语言文件路径要对应构建后的browser目录
  return new ServerTranslateLoader(http, './dist/your-project/browser/assets/i18n', '.json');
}

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      },
      // 强制Server端用默认语言同步渲染，避免异步加载阻塞
      defaultLanguage: 'zh-CN'
    })
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

配套的ServerTranslateLoader必须纯服务端兼容：

import { TranslateLoader } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export class ServerTranslateLoader implements TranslateLoader {
  constructor(private http: HttpClient, private prefix: string, private suffix: string) {}

  getTranslation(lang: string): Observable<any> {
    return this.http.get(`${this.prefix}/${lang}${this.suffix}`);
  }
}

2. 修复server.ts中的语言初始化逻辑 #

禁止在Server端调用浏览器专属的语言检测逻辑（比如从localStorage取语言），直接从请求参数/头获取或用默认值：

import { APP_BASE_HREF } from '@angular/common';
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();

const distFolder = join(process.cwd(), 'dist/your-project/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

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) => {
  // 从URL参数或请求头取语言，无则用默认
  const lang = req.query.lang || req.headers['accept-language']?.split(',')[0] || 'zh-CN';
  
  res.render(indexHtml, {
    req,
    providers: [
      { provide: APP_BASE_HREF, useValue: req.baseUrl },
      // 给Server端注入预设置的语言，避免TranslateService异步阻塞
      {
        provide: 'REQUEST_LANG',
        useValue: lang
      }
    ]
  });
});

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

3. 清理组件中的浏览器API依赖 #

检查首页组件是否在ngOnInit/构造函数中使用window、document、localStorage等浏览器专属API，这些会导致Server端渲染挂起。解决方式：

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      // 仅在浏览器环境执行浏览器相关逻辑
      const savedLang = localStorage.getItem('user-lang');
      // ...
    }
  }
}

4. 强制Server端同步加载语言文件 #

若以上配置仍无效，可在app.server.module.ts中直接预加载语言文件，彻底避免异步阻塞：

// 在AppServerModule的providers数组中添加
{
  provide: TranslateService,
  useFactory: () => {
    const translate = new TranslateService(null, null, null);
    translate.setDefaultLang('zh-CN');
    // 同步加载本地语言文件（仅Server端可用）
    const langData = require(`../assets/i18n/zh-CN.json`);
    translate.setTranslation('zh-CN', langData);
    translate.use('zh-CN');
    return translate;
  }
}

额外排查步骤 #

• 验证package.json的SSR启动命令是否指向正确的构建产物：

  "scripts": {
    "serve:ssr": "node dist/your-project/server/main.js"
  }
  

• 清空dist目录后重新构建：ng build --prod && ng run your-project:server:production
• 检查Node进程是否卡住，用ps aux | grep node查看，必要时重启进程

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