Angular 2 Universal - Server-side Rendering

Question

I was reading about Angular 2 Server side rendering with node.

But I cannot find an example or explain how should I do that. I need to render some pages with angular from server, any advice?

Answer 1

Well, look at this starter kit https://github.com/alexpods/angular2-universal-starter. It has server side rendering, web workers support (entire angular2 application is running in a web worker) , lazy loading (using webpack's code splitting) and many other things. I hope it will help you.

Disclosure: I'm its author.

Answer 2

This is the example the creators of angular-universal used in their talk, its a working repo -> https://github.com/angular/universal-starter/tree/angular-connect

And this is the talk - Full Stack Angular 2

Answer 3

Take a look here: https://universal.angular.io/

Looks like 'some' of the official documentation/site is now up. API docs are in the code but for quick reference see these links:

https://universal.angular.io/api/universal/index.html#typedoc-main-index https://universal.angular.io/api/preboot/globals.html

Nice third party overview and setup doc: https://mickaelkerjeanblog.wordpress.com/2016/05/02/angular-universal/

Answer 4

There's another example repo at https://github.com/ng-seed/universal showcasing both Universal and lean Angular on a single project.

This application uses platform-server delivered with Angular 4.0.0, and it could be a good starter/seed project until Angular provides some documentation about the use of platform-server.

Furthermore, it covers most of the features of angular2-webpack-starter by AngularClass such as async/lazy routes, SCSS compilation (both inline and external), dev/prod modes, AoT compilation via @ngtools/webpack, tests, TsLint/Codelyzer, @types and maybe more.

Disclosure: I'm the author too :)

Answer 5

I found this searching in July 2018 and thought it has probably changed since then. Now we're on Angular 6 and there's a good tutorial here for using it with firebase.

The angular docs are here: https://angular.io/guide/universal.

You have an app.server.module that imports ServerModule from @angular/platform-server and your regular app module:

imports: [
  ServerModule,
  AppModule
],

And in your normal AppModule you call withServerTransition when you import the BrowserModule.

BrowserModule.withServerTransition({ appId: APP_ID })

You have a separate main for server side rendering that just exports your server module:

export { AppServerModule } from './app/app.server.module';

The relevant part that runs the express server looks like this:

const { renderModuleFactory } = require('@angular/platform-server');
const { AppServerModuleNgFactory } = require('./dist/server/main');

const index = require('fs')
  .readFileSync(path.resolve(__dirname, './dist/browser/index.html'), 'utf8')
  .toString();

let app = express();

app.get('**', function(req, res) {
  renderModuleFactory(AppServerModuleNgFactory, {
    url: req.path,
    document: index
  }).then(html => res.status(200).send(html));
});

Answer 6

angular server side rendering step by step run below comment

Step 1: ->ng add @ng-toolkit/universal

step 2:->npm install

step 3:->npm run build:prod

step 4:->ng build --prod

step 5:->npm run server

step 6:-> run cmd and write the command ->curl http://localhost:4000

my server side angular application https://exampreparation.study

Answer 7

There are 2 kinds of Server side Rendering

Dynamic SSR (server-side rendering) & Static Pre-rendering

Dynamic SSR is the concept that there will be a live Node server spun up that whenever a Route is hit, it will dynamically generate and serialize the application — returning that String to the browser. Remember, you cannot put this is in AWS S3 or nginx or apache httpd, you need a node server running somewhere.

Static Pre-rendering is when we want to pre-render a list of routes, and create static files, (ie: index.html, about-us.html, etc) and then use a server of our choosing to serve up those files later on. You can deploy this using AWS S3 or nginx or apache httpd just like a normal angular app.

So how do we know which one to choose and when?

Pre-rendering will typically give you better performance since we’re not waiting for a server to hit all the necessary APIs within your application, and nothing has to be “serialized”, it already has all the serialized HTML of your application outputted for each one of the Routes files. Here’s a good list of questions that we consider with clients before considering which route we need to take.

When to use Static Pre-Rendering:

• Your application itself is rather Static. (or at least the Routes you’re trying to pre-render) For example: homepage | about us | contact us

• Very dynamic portions of your site (and ones that are behind a Login/Auth barrier) can be pointed to the normal Client-side rendered (CSR) version of your application, and Angular can bootstrap itself normally.

• Your application doesn’t update very often. Whenever some changes are needed on the static routes, you can simply run the build script again and republish the /dist folder containing all of your pre-rendered files.

When to use Dynamic SSR:

• Your application (and the routes you need to SSR) are very dynamic
• You have a list of “trending products” | “live data” | etc, that you need populated correctly for every server-side render.
• Your applications structure is rendered based on JSON files or a CMS where anything could change at any given moment.

Typically most applications will need static pre-rendering (since any routes behind an authentication-wall don’t gain much/any benefit from utilizing SSR, since one of the main purposes is the SEO gains, and improved perceived performance. Remember, you can always have certain aspects of your application not render during SSR, and have those dynamic portions populated during CSR!

Reference https://medium.com/@MarkPieszak/angular-universal-server-side-rendering-deep-dive-dc442a6be7b7

How to do either (As of Dec 2019)

For Dynamic SSR Just follow along https://angular.io/guide/universal

For Static Pre-rendering

https://stackoverflow.com/a/53725674/6785908

https://github.com/angular/angular/issues/23024