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

问题描述：

我需要将Angular 4 Web应用程序转换为 Angular Universal 这样做的原因是目前，该Web应用程序无法通过Google正确索引(以及Facebook社交预览缩略图)，因为它是一个单页应用程序并在客户端呈现.所以现在我需要实现Angular Universal服务器侧渲染.

I have a requirement to convert Angular 4 web app to Angular Universal.The reason for that is currently, the web app is not able to be properly indexed by Google (and Facebook social previews thumbnails) because it's a single page app and rendered on the client side.So now I need to implement Angular Universal, server-side rendering.

我了解如何使用 来创建新的Angular Universal应用视频系列 .

I got the knowledge of how to create a new Angular Universal app using this great video series.

问题:能否请您告诉我将现有的转换应用程序转换为Angular Universal应用程序所要遵循的方向.也许是一个不错的URL或步骤，或者任何受到高度赞赏的方向.

Question: Can you please tell me the direction which I have to follow the convert existing app as an Angular Universal one.Maybe a nice URL or steps or whatever the direction will be highly appreciated.

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

Note: Here angular version is not a problem.Either 2 or 4.

答

来自网络档案备份)

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

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

Edit /src/app/app.module.ts and change the BrowserModule import to 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"节点之后添加以下内容

Edit /tsconfig.json and after the "compilerOptions" node add the following

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

编辑package.json并通过添加"prestart"并更改"start"

Edit package.json and change the "scripts" section by adding "prestart" and altering "start"

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

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

You can now type npm run start in your console/terminal window and it will build everything and start serving on port 4000.

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

It doesn't watch the source or do hot-module-replacing etc, but once the server is running you can also type ng serve (assuming you are using the @angular/cli npm package) in another window and edit your single-page-app as you normally would and use npm run start only when rebuilding or changing server code.

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

相关推荐