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.

Answer 1

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

Answer 2

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

scotch.io

Answer 3

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.

Answer 4

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.