将角4 web应用程序转换为角通用应用程序

Question

我有一个要求将角4网页应用转换为角万向.The的原因，因为目前，这个web应用无法被Google (和Facebook社交预览缩略图)正确地索引，因为它是一个单一页面应用程序，并且在客户端side.So上呈现，现在我需要实现角环球，服务器端渲染。

我了解了如何使用这个伟大的视频系列创建一个新的角通用应用程序。

问题：，你能告诉我，我必须遵循的方向，转换现有的应用程序作为一个角度通用one.Maybe，一个很好的网址或步骤，或任何方向都将受到高度赞赏。

注:这里的角版不是problem.Either，2或4。

Answer 1

来自这个博客 (web存档备份 )

第一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并通过添加"prestart"和更改"start"来更改"start"部分

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

您现在可以在控制台/终端窗口中键入npm run start，它将构建所有内容并开始在端口4000上服务。

它不监视源代码或执行热模块替换等操作，但是一旦服务器运行，您也可以在另一个窗口中键入ng serve (假设您使用的是@角形/cli npm包)，并像通常那样编辑您的单页应用程序，并且只在重建或更改服务器代码时使用npm run start。

Answer 2

角通用是一个更好的选择与更好的SEO索引。您已经提出了非常好的关注，目前的角度4项目迁移到环球。然而，随着ANgular 4的发布，他们已经将其打包成通用版本。我会写一个关于它的教程，并与你分享它很快。

但是，您可以尝试ng-universal-cli？https://www.npmjs.com/package/ng-universal-cli。

这样，您就可以使用一个命令ngu new <project-name>来设置新的角4 Univeral项目。

然后，可以将现有的项目文件移动到这个新创建的项目中。