如何使用angular 4 开发Server端rendering 程序, Friendly SEO.

我最近在一个新的项目中想使用angular 4来写前端，但是现在不是所有的搜索引擎都支持动态文本的，所以最好的办法就是在服务端输出完整的html代码，目前angular可以支持nodejs, .net core的服务端渲染了，我目前对.net core 服务端渲染不是很熟悉，下面的例子是Nodejs 使用express部署 angular4 进行服务端渲染。

创建angular项目，使用@angular/cli 组件来创建参考：http://www.cnblogs.com/sgciviolence/p/6441497.html

> ng new ang4-seo --routing
> cd ang4-seo

服务端渲染必须添加platform-server引用，和animations引用

> npm install --save @angular/platform-server @angular/animations

然后修改/src/app/app.module.ts文件

@NgModule({
declarations: [
AppComponent
],
imports: [
 BrowserModule.withServerTransition({appId: 'ang4-seo-pre'}),
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})

　　

创建/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 { }

创建Express Server, /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}!`); });

　　

TypeScript Config 修改

{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "es2015",
"baseUrl": "",
"types": []
},
"exclude": [
"server.ts",    // 这里
"test.ts",
"**/*.spec.ts"
]
}

　　然后, 打开 /tsconfig.json 添加 angularCompilerOptions:

{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2016",
"dom"
]
},
"angularCompilerOptions": {                             // 这里
"genDir": "./dist/ngfactory",
"entryModule": "./src/app/app.module#AppModule"
}
}

　

修改package.json

{
//
// Other properties removed for brevity
//

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

//
// Other properties removed for brevity
//

}

ng build --prod && ngc 会先编译项目。

服务端运行：

> npm run start

[/code]

开发调试，运行

> ng serve

文章参考来自:
https://coursetro.com/posts/code/68/Make-your-Angular-App-SEO-Friendly-(Angular-4-+-Universal)