使用Angular Universal进行服务器端渲染

Angular Universal是Angular框架的一个扩展，它允许我们在服务器上进行渲染，生成的HTML可以被搜索引擎抓取和索引，从而提供更好的SEO支持。在本文中，我将介绍如何使用Angular Universal进行服务器端渲染。

安装Angular Universal

要使用Angular Universal，我们首先需要安装它。在命令行中运行以下命令来安装Angular Universal的npm包：

npm install @angular/platform-server @nguniversal/module-map-ngfactory-loader --save

创建服务器源文件

接下来，我们需要创建一个服务器源文件来处理服务器端渲染。在项目的根目录下创建一个名为server.ts的文件，并添加以下内容：

import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import { enableProdMode } from '@angular/core';
import { renderModuleFactory } from '@angular/platform-server';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import * as express from 'express';
import { readFileSync } from 'fs';

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

enableProdMode();

const app = express();

const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');

app.engine('html', (_, options, callback) => {
  renderModuleFactory(AppServerModuleNgFactory, {
    document: template,
    url: options.req.url,
    extraProviders: [provideModuleMap(LAZY_MODULE_MAP)]
  }).then(html => {
    callback(null, html);
  });
});

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

定义Angular模块

接下来，我们需要定义一个Angular模块来处理渲染逻辑。在项目的根目录下创建一个名为app.server.module.ts的文件，并添加以下内容：

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ModuleMapLoaderModule
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule { }

配置构建脚本

最后，我们需要更新Angular项目的构建脚本来构建服务器端渲染所需的文件。在package.json中，将以下内容添加到scripts部分：

"scripts": {
  "build:server": "ng build --prod && ng run your-app:server",
  "serve:ssr": "node server.js"
}

运行服务器

现在我们可以运行服务器并在浏览器中查看渲染的页面。在命令行中运行以下命令：

npm run build:server
npm run serve:ssr

访问http://localhost:4000，你应该能够看到服务器端渲染的Angular应用程序。你可以在开发者工具的查看源代码选项中检查渲染的HTML内容。

结论

Angular Universal为我们提供了服务器端渲染的能力，使我们的Angular应用程序可以更好地支持SEO。在本文中，我们学习了如何安装Angular Universal，并创建了服务器源文件和定义了Angular模块。最后，我们更新了构建脚本并运行了服务器。

本文来自极简博客，作者：风吹麦浪，转载请注明原文链接：使用Angular Universal进行服务器端渲染