为服务器端渲染实现Angular Universal
为服务器端渲染实现Angular Universal
提问于 2021-03-13 18:14:12
我正在尝试通过运行以下命令在我的Angular应用程序中实现服务器端渲染
ng add @ng-toolkit/universal
但是一旦我运行这个命令，我就会得到下面的错误
错误:堆栈跟踪不是函数错误:如果您认为不应该发生此错误，请在此处填写错误报告：https://github.com/maciejtreder/ng-toolkit/issues/new信息:堆栈跟踪已发送到跟踪系统。没什么可做的。
请让我知道我错过了什么
回答 1
Stack Overflow用户
发布于 2021-03-13 19:32:44
尝试这种方法
$ 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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66612272
复制相关文章
相似问题
腾讯云开发者
