时间戳

首页 > 解决方案 > 为服务器端渲染实现 Angular Universal

angular - 为服务器端渲染实现 Angular Universal

问题描述

我正在尝试通过运行命令在我的 Angular 应用程序中实现服务器端渲染

ng add @ng-toolkit/universal

但是一旦我运行这个命令，我就会得到以下错误

错误：newTree.optimize 不是函数错误：如果您认为不应该发生此错误，请在此处填写错误报告：https ://github.com/maciejtreder/ng-toolkit/issues/new 信息：stacktrace 有已发送至跟踪系统。无计可施。

请让我知道我错过了什么

标签： angularserver-side-renderingangular-universal

解决方案

试试这个方法

$ ng add @nguniversal/express-engine --clientProject {{ name of your project }}

此命令将安装所需的软件包并添加设置 SSR 所需的各种文件：

src/main.server.ts,
src/app/app.server.module.ts,
tsconfig.server.json,
webpack.server.config.js,
server.ts,

它还将相应地更新以下文件：

package.json,
angular.json,
src/main.ts,
src/app/app.module.ts

该命令还将为您启动 Express 服务器。打开 server.ts 文件；您应该看到以下代码：

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

import * as express from 'express';
import {join} from 'path';

// Express server
const app = express();

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

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap} = require('./dist/server/main');

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

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

// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
// Serve static files from /browser
app.get('*.*', express.static(DIST_FOLDER, {
  maxAge: '1y'
}));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render('index', { req });
});

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

如您所见，文件夹设置为 dist/browser 文件夹，其中包含客户端捆绑包，并且是在构建应用程序时创建的。服务器默认侦听 4000 端口并拦截可能的获取 HTML 和静态文件的请求。

通用应用程序使用 @angular/platform-server 包而不是 @angular/platform-b​​rowser，它允许您从服务器交付 Angular 应用程序。

在 Express 服务器中，来自客户端的获取应用程序页面的请求由 ngExpressEngine 处理。这只需调用 renderModuleFactory() 函数即可。

返回您的终端，确保您在 Angular 项目中并运行以下命令：

npm run build:ssr 
npm run serve:ssr

推荐阅读