如何在Angular Universal项目中添加服务器渲染

时间:2017-02-18 22:49:37

标签: angular-universal server-rendering

请帮助我了解如何在Angular Universal中使用服务器渲染。

我做了什么。我访问了Angular Universal官方网站。设置Node.js.下载推荐项目Angular 2 Webpack Starter。 我在Mac上工作,所以请使用"> sudo npm install"安装node_modules。 按照建议添加server.js.运行"> node server.js" - 但它不起作用。

如果我跑"> npm start"服务器在localhost:3000上启动 - 但似乎没有服务器呈现。如果我查看HTML页面,只有Angular的index.html。

如何在项目中添加服务器渲染功能?

非常感谢。

4 个答案:

答案 0 :(得分:1)

简单方法是下面链接的克隆源代码,并阅读如何运行项目的文档 github angular universal

scotch.io

答案 1 :(得分:1)

与此同时,你可以看看这个example app(Angular 4.0.0,Universal support,Webpack,还有更多)https://github.com/ng-seed/universal

肯定会让你或多或少地了解如何让它运行。

答案 2 :(得分:1)

自Angular 7起,您可以运行此CLI命令

npm run build:stage

此命令完成所有工作,并进行Angular Universal所需的所有文件和文件更改。

然后构建应用,

ng add @nguniversal/express-engine --clientProject yourprojectname

然后使用此命令运行服务器(默认端口为4000)

npm run build:ssr

现在您的Angular 7项目现在正在使用Angular Universal

关于Angular 6,您可以使用本指南在Universal网站上构建

https://github.com/angular/angular-cli/wiki/stories-universal-rendering

与运行上述命令相比,链接的Wiki本质上是手工编写所有内容。

或者正如Kirill所述,您也可以下载一个开始的项目。

答案 3 :(得分:0)

我找到了解决方案。我已经在github.com/angular/universal-starter下载了一个良好的启动项目,并提供了服务器渲染支持。