Angular中SSG是否允许HTTP请求？相关错误及替代预渲染方案咨询

1. SSG路由组件能否发起API调用？ #

可以，但要注意预渲染阶段的上下文限制。你遇到的NullInjectorError: No provider for InjectionToken REQUEST!，是因为SSG在静态生成页面时，没有实时的HTTP请求上下文，无法提供REQUEST这类依赖注入令牌。

2. @Optional()无法满足需求的原因 #

添加@Optional()会让REQUEST注入为null，导致你无法通过请求路径（如/fr）判断语言，自然无法获取对应翻译内容。

3. 可行解决方案 #

方案一：用TransferState在预渲染时传递翻译数据 #

在服务器端预渲染阶段，提前根据路由前缀获取翻译，通过TransferState把数据传递给客户端，避免组件直接依赖REQUEST：

服务器端逻辑（server.ts）

import { TransferState, makeStateKey } from '@angular/platform-browser';
import { Request } from 'express';

const TRANSLATIONS_KEY = makeStateKey('pageTranslations');

app.get('*', (req: Request, res) => {
  // 从请求路径判断语言
  const lang = req.path.startsWith('/fr') ? 'fr' : 'en';
  
  // 调用翻译API获取对应语言内容
  fetch(`https://your-translation-api.com/${lang}`)
    .then(resp => resp.json())
    .then(translations => {
      const transferState = new TransferState();
      transferState.set(TRANSLATIONS_KEY, translations);
      
      res.render('index', {
        req,
        res,
        providers: [
          { provide: TransferState, useValue: transferState }
        ]
      });
    });
});

组件中获取翻译数据

import { Component, OnInit } from '@angular/core';
import { TransferState, makeStateKey } from '@angular/platform-browser';

const TRANSLATIONS_KEY = makeStateKey('pageTranslations');

@Component({
  selector: 'app-translated-page',
  templateUrl: './translated-page.component.html'
})
export class TranslatedPageComponent implements OnInit {
  translations: Record<string, string> = {};

  constructor(private transferState: TransferState) {}

  ngOnInit(): void {
    // 从TransferState获取预渲染时的翻译数据
    this.translations = this.transferState.get(TRANSLATIONS_KEY, {});
    
    // 客户端导航时补充获取（可选）
    if (Object.keys(this.translations).length === 0) {
      const lang = window.location.pathname.startsWith('/fr') ? 'fr' : 'en';
      fetch(`https://your-translation-api.com/${lang}`)
        .then(resp => resp.json())
        .then(data => this.translations = data);
    }
  }
}

方案二：改用Angular Universal SSR #

如果需要依赖请求上下文动态获取翻译，SSR（服务器端渲染）更适合：每次请求都会在服务器端实时渲染页面，能完整获取REQUEST对象，无需额外适配。

组件中直接使用REQUEST获取语言并调用API

import { Component, OnInit, Inject } from '@angular/core';
import { REQUEST } from '@nguniversal/express-engine/tokens';
import { Request } from 'express';

@Component({
  selector: 'app-translated-page',
  templateUrl: './translated-page.component.html'
})
export class TranslatedPageComponent implements OnInit {
  translations: Record<string, string> = {};

  constructor(@Inject(REQUEST) private request: Request) {}

  ngOnInit(): void {
    const lang = this.request.path.startsWith('/fr') ? 'fr' : 'en';
    fetch(`https://your-translation-api.com/${lang}`)
      .then(resp => resp.json())
      .then(data => this.translations = data);
  }
}

方案三：混合渲染策略 #

对不需要动态翻译的页面用SSG，需要动态翻译的页面单独配置SSR，在angular.json或路由配置中指定不同的渲染方式。

总结 #

• SSG可以发起API调用，但要避免依赖请求上下文，用TransferState传递预渲染数据。
• 若必须依赖请求路径动态获取内容，SSR是更直接的选择。

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