How to add server rendering in Angular Universal project

Question

Help me please to understand how to use server rendering in Angular Universal.

What I've done. I visited Angular Universal official site. Setup Node.js. Downloaded recommended project Angular 2 Webpack Starter. I'm working on Mac so use "> sudo npm install" to install node_modules. Add server.js as recommended. Run "> node server.js" - however it doesn't work.

If I run "> npm start" the server starts on localhost:3000 - but it seems there are no server rendering. If I look at HTML-page there are only Angular's index.html.

What should I do to add the server rendering capabilities in the project?

Thanks a lot.

I found a good starting project at github.com/angular/universal-starter — Kirill
– Kirill, Commented Feb 24, 2017 at 15:01

MostafaMashayekhi · Accepted Answer · 2017-02-21 11:38:20Z

1

easy way is clone source code of below link and read documentation of how to run project github angular universal

scotch.io

answered Feb 21, 2017 at 11:38

MostafaMashayekhi

29.2k3 gold badges23 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Burak Tasci · Accepted Answer · 2017-04-18 12:35:52Z

1

Meanwhile, you can have a look on this example app (Angular 4.0.0, Universal support, Webpack, and a little more) https://github.com/ng-seed/universal

Will definitely give you more or less an idea about how to get it running.

edited Apr 18, 2017 at 12:35

answered Mar 29, 2017 at 7:43

Burak Tasci

91712 silver badges19 bronze badges

Comments

Wahrenheit Sucher · Accepted Answer · 2019-04-19 15:28:36Z

Since Angular 7 you can run this CLI command

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

this command does all the work and makes all the files and file changes necessary to do Angular Universal.

then build the app,

npm run build:ssr

then run the server with this command (default port is 4000)

npm run serve:ssr

And now your Angular 7 project is now using Angular Universal

As for Angular 6 you can use this guide to make the website in Universal

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

The linked wiki is essentially writing everything by hand compared to running the commands stated above.

Or as mentioned above by Kirill you can also just download a starting project.

Kirill · Accepted Answer · 2017-06-27 11:51:12Z

0

I found a solution. I have downloaded a good starting project at github.com/angular/universal-starter with server rendering support.

answered Jun 27, 2017 at 11:51

Kirill

6,0747 gold badges51 silver badges71 bronze badges

1 Comment

cdalxndr Over a year ago

project is deprecated

Collectives™ on Stack Overflow

How to add server rendering in Angular Universal project

4 Answers 4

Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Related