将Angular 4 Web应用程序转换为Angular Universal应用程序

Question

我需要将Angular 4 Web应用程序转换为Angular Universal.原因是目前,Web应用程序无法被Google(以及Facebook社交预览缩略图)正确编入索引,因为它是单页应用程序并在客户端.所以现在我需要实现Angular Universal,服务器端渲染.

我了解了如何使用这个精彩的视频系列创建一个新的Angular Universal应用程序.

问题:您能否告诉我我必须遵循将现有应用转换为Angular Universal的方向.可能是一个不错的URL或步骤或任何方向将受到高度赞赏.

注意:这里角度版本不是问题.2或者是.或者4.

Answer 1

来自此博客(网络存档备份)

第一 npm install --save @angular/platform-server @angular/animations

编辑/src/app/app.module.ts并更改BrowserModule导入BrowserModule.withServerTransition({appId: 'your-app-name'}),

创建一个文件 /src/app/app.server.module.ts

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}!`);
});

编辑/src/tsconfig.app.json并添加server.ts到exclude数组中

编辑/tsconfig.json并在"compilerOptions"节点添加以下内容后

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

通过添加和更改来编辑package.json和更改该"scripts"部分"prestart""start"

"prestart": "ng build --prod && ngc",
"start": "ts-node src/server.ts"

您现在可以输入npm run start您的控制台/终端窗口,它将构建所有内容并开始在端口4000上提供服务.

它不会查看源代码或进行热模块替换等,但是一旦服务器运行,您还可以ng serve在另一个窗口中键入(假设您正在使用@ angular/cli npm软件包)并编辑单页面应用程序像往常一样,npm run start仅在重建或更改服务器代码时使用.