Настройка приложения Angular 4+ на стороне сервера с Loopback/Strongloop

Question

У меня есть Loopback-сервер в качестве бэкэнда для моего углового приложения, и он прекрасно работает. Чтобы улучшить SEO в моем приложении, я хочу сделать приложение на сервере (ssr).

У меня есть угловое приложение в папке клиента приложения сервера loopback

В папке /client/dist хранятся сгенерированные угловые файлы. В папке /client/frontend находится исходное приложение.

мой вопрос как настроить tsconfig.json файл. Мои angularCompilerOptions выглядят так:

    "angularCompilerOptions": {
        "genDir": "../dist",
        "entryModule": "./src/app/app.module#AppModule"
    }

Кроме того, я сгенерировал app.server.module.ts файл внутри src/app/ папка для экспорта AppServerModule,

import {NgModule} from "@angular/core";
import {ServerModule} from "@angular/platform-server";
import {AppModule} from "./app.module";
import {AppComponent} from "./app.component";


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

и server.ts файл внутри папки src/:

import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { platformServer, renderModuleFactory } from '@angular/platform-server'
import { enableProdMode } from '@angular/core'
import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app.server.module.ngfactory'
import * as express from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';

const PORT = 4000;

enableProdMode();

const app = express();

let template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString();

app.engine('html', (_, options, callback) => {
  const opts = { document: template, url: options.req.url };

  renderModuleFactory(AppServerModuleNgFactory, opts)
    .then(html => callback(null, html));
});

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

app.get('*.*', express.static(join(__dirname, '..', 'dist')));

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(PORT, () => {
  console.log(`listening on http://localhost:${PORT}!`);
});

мой вопрос:

• мне действительно нужен экспресс-сервер внутри server.ts файл?
• я могу сказать петлю, чтобы обслуживать файлы, уже предоставленные?
• Как я могу добиться SSR с помощью Loopback?

просто для полноты: я использую angular 5.2.0 а также loopback 3.x

спасибо за все полезные ответы

Answer 1

С Angular вы должны использовать Universal, если хотите сделать приложение оптимизированным для SEO.

Если вы хотите другой вариант, то GoogleChrome недавно запустил Rendertron. Он обслуживает отображаемые страницы для ботов.