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

Question

我正在使用需要 SSR 的 Contentful CMS 开发 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
  });

我是做错了什么还是需要一些不同的内容来满足？

提前致谢。

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。

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

Cannot Render Contentful content by using Angular Universal (SSR)

contentful

server-side-rendering

angular-universal

angular

app.server.module.ts

server.ts

contentful.service.ts