Не удается воспроизвести контент с использованием Angular Universal (SSR) - PullRequest
Новая
       101

Не удается воспроизвести контент с использованием Angular Universal (SSR)

0 голосов
/ 07 апреля 2020

Я работаю над приложением angular с Contentful CMS, которое должно быть SSR. Я выполнил все шаги, упомянутые здесь Angular Универсальный . Но это просто рендеринг контента stati c, а не динамического контента c из 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?

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 09 мая 2020

Я решил проблему, используя Contentful API вместо SDK. Используйте его API с HttpClient.

Справочник по API: https://www.contentful.com/developers/docs/references/content-delivery-api/

ПРИМЕЧАНИЕ. Используйте полный URL-адрес API в HttpClient без прокси.

0 голосов
/ 07 апреля 2020

Contentful SDK не использует Angular модуль HttpClient для извлечения данных, поэтому API-интерфейс TransferState не будет работать по умолчанию.

Сначала вам потребуется использовать адаптер для топора ios, как указано здесь: https://github.com/contentful/contentful.js/blob/master/ADVANCED.md#angular -универсал

А затем используйте TransferHttpCacheModule в вашем app.module.ts: https://github.com/angular/universal/blob/master/docs/transfer-http.md

...