我正在尝试通过运行命令在我的 Angular 应用程序中实现服务器端渲染
ng 添加@ng-toolkit/universal
但是一旦我运行此命令,我就会收到以下错误
错误:newTree.optimize 不是函数 错误:如果您认为不应发生此错误,请在此处填写错误报告:https://github.com/maciejtreder/ng-toolkit/issues/new 信息:堆栈跟踪已发送到跟踪系统。 无事可做。
请告诉我我错过了什么
答案 0 :(得分:0)
试试这个方法
$ 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-browser,它允许您从服务器交付 Angular 应用程序。
在 Express 服务器中,来自客户端的获取应用程序页面的请求由 ngExpressEngine 处理。这只需调用 renderModuleFactory() 函数即可。
回到你的终端,确保你在你的 Angular 项目中并运行以下命令:
npm run build:ssr
npm run serve:ssr