使用 Loopback/Strongloop 设置服务器端渲染 Angular 4+ 应用程序答案

【问题标题】：Setup Server Side Rendering Angular 4+ Application with Loopback/Strongloop使用 Loopback/Strongloop 设置服务器端渲染 Angular 4+ 应用程序
【发布时间】：2018-10-03 17:45:49
【问题描述】：

我有一个 Loopback-Server 作为我的 Angular 应用程序的后端，它运行良好。为了改善我的应用程序的 SEO，我想在服务器 (ssr) 上呈现应用程序。

我的 Angular 应用程序位于环回服务器应用程序的客户端文件夹中

/client/dist 文件夹是存储生成的 Angular 文件的位置。 /client/frontend 文件夹是源应用程序所在的位置。

我的问题是如何设置tsconfig.json 文件。我的 angularCompilerOptions 看起来像这样：

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

除此之外，我还在src/app/ 文件夹中生成了一个app.server.module.ts 文件来导出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 { }

还有一个位于 src/ 文件夹中的 server.ts 文件：

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 文件中的 express 服务器吗？
我可以告诉 loopback 为已经渲染的文件提供服务吗？
如何通过 Loopback 实现 SSR？

只是为了完整性：我正在使用 angular 5.2.0 和 loopback 3.x

感谢所有有用的答案

【问题讨论】：

这个问题解决了吗@hart？

标签： angular angular5 loopback server-side-rendering angular-loopback

【解决方案1】：

如果您想让应用对 SEO 友好，则必须使用 Angular 使用 Universal。

如果您想要其他选择，那么 GoogleChrome 最近推出了Rendertron。它将呈现的页面提供给 Bot。

【讨论】：