无法使用 Angular Universal (SSR) 呈现内容内容

Question

我正在使用 Contentful CMS 开发一个需要 SSR 的 Angular 应用程序。我已按照Angular Universal 中提到的所有步骤进行操作。但它只是渲染静态内容，而不是来自 Contentful 的动态内容。我也尝试过 TransferState API，但它不适用于 Contentful。我的代码是

app.server.module.ts

import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ServerTransferStateModule,
    ModuleMapLoaderModule,
   ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

server.ts

import 'zone.js/dist/zone-node';

import * as express from 'express';
import {join} from 'path';

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/browser');

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap} =             
require('./dist/server/main');

const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync('./dist/browser/index.html').toString();
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;

// Our Universal express-engine (found @                 
https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

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

// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
// Serve static files from /browser
app.get('*.*', express.static(DIST_FOLDER, {
  maxAge: '1y'
}));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render('index', { req });
});

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});

contentful.service.ts

private client = createClient({
    space: ENV.contentful.spaceId,
    accessToken: ENV.contentful.token
  });

我是做错了什么还是需要为 Contentful 做些不同的事情？

提前致谢。

Answer 1

Contentful SDK 不使用 Angular 的 HttpClient 模块来获取数据，因此默认情况下 TransferState API 不会工作。

您首先需要使用 axios 的适配器，如下所述：https://github.com/contentful/contentful.js/blob/master/ADVANCED.md#angular-universal

然后在你的app.module.ts 中使用TransferHttpCacheModule：https://github.com/angular/universal/blob/master/docs/transfer-http.md

Answer 2

我已经通过使用 Contentful API 而不是它的 SDK 解决了这个问题。 将其 API 与 HttpClient 一起使用。

API 参考： https://www.contentful.com/developers/docs/references/content-delivery-api/

注意：在 HttpClient 中使用完整的 API url，无需任何代理。