Language: TypeScript

<img src="https://cloud.githubusercontent.com/assets/1016365/10639063/138338bc-7806-11e5-8057-d34c75f3cafc.png" alt="Universal Angular 2" height="320"/>

Angular 2 Universal Starter Universal Angular 2

Server-Side Rendering for Angular 2

A minimal Angular 2 starter for Universal JavaScript using TypeScript 2 and Webpack 2

If you're looking for the Angular Universal repo go to angular/universal



  • npm install


  • npm start to build your client app and start a web server
  • npm run build to prepare a distributable bundle


  • run npm start and npm run watch in two separate terminals to build your client app, start a web server, and allow file changes to update in realtime

Watch files

  • npm run watch to build your client app and start a web server

AoT and Prod

  • npm run build:prod:ngc to compile the ngfactory files and build prod

Universal "Gotchas"

When building Universal components in Angular 2 there are a few things to keep in mind.

  • To use templateUrl or styleUrls you must use angular2-template-loader in your TS loaders.
    • This is already setup within this starter repo. Look at the webpack.config file here for details & implementation.
  • window, document, navigator, and other browser types - do not exist on the server - so using them, or any library that uses them (jQuery for example) will not work. You do have some options, if you truly need some of this functionality:
    • If you need to use them, consider limiting them to only your main.client and wrapping them situationally with the imported isBrowser / isNode features from Universal. import { isBrowser, isNode } from 'angular2-universal';
    • Another option is using DOM from "@angular/platform-browser"
  • Don't manipulate the nativeElement directly. Use the Renderer. We do this to ensure that in any environment we're able to change our view.
constructor(element: ElementRef, renderer: Renderer) {
  renderer.setElementStyle(element.nativeElement, 'font-size', 'x-large');
  • The application runs XHR requests on the server & once again on the Client-side (when the application bootstraps)
  • Know the difference between attributes and properties in relation to the DOM.
  • Keep your directives stateless as much as possible. For stateful directives, you may need to provide an attribute that reflects the corresponding property with an initial string value such as url in img tag. For our native <img src=""> element the src attribute is reflected as the src property of the element type HTMLImageElement.

Brotli Compression Support

To enable Brotli compression for server response with fallback for gzip. Install the following packages

npm install --save-dev iltorb accepts @types/accepts express-interceptor memory-cache @types/memory-cache

and replace the following code from src/server.aot.ts.

  import * as compression from 'compression';



import * as mcache from 'memory-cache';
const { gzipSync } = require('zlib');
const accepts = require('accepts');
const { compressSync } = require('iltorb');
const interceptor = require('express-interceptor');

app.use(interceptor((req, res)=>({
  // don't compress responses with this request header
  isInterceptable: () => (!req.headers['x-no-compression']),
  intercept: ( body, send ) => {
    const encodings  = new Set(accepts(req).encodings());
    const bodyBuffer = new Buffer(body);
    // url specific key for response cache
    const key = '__response__' + req.originalUrl || req.url;
    let output = bodyBuffer;
    // check if cache exists
    if (mcache.get(key) === null) {
      // check for encoding support
      if (encodings.has('br')) {
        // brotli
        res.setHeader('Content-Encoding', 'br');
        output = compressSync(bodyBuffer);
        mcache.put(key, {output, encoding: 'br'});
      } else if (encodings.has('gzip')) {
        // gzip
        res.setHeader('Content-Encoding', 'gzip');
        output = gzipSync(bodyBuffer);
        mcache.put(key, {output, encoding: 'gzip'});
    } else {
      const { output, encoding } = mcache.get(key);
          res.setHeader('Content-Encoding', encoding);

this will check the support, compress and cache the response.

Edge case of server compatibility with Promise polyfills

If you have node modules with promise polyfill dependency on server - there is chance to get the following exception:

Error: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.

It occurs because Zone.js Promise implementation is not detected as Promise by some polyfills (e.g. es6-promise before 4.x).

To sort it out, you need such polyfills initialized before zone.js. Zone.js is initialized in 'angular2-universal-polyfills' import of server.ts. So import problematic modules before this line.


Design Doc


Angular 2 Universal Patterns - ng-conf, May 2016
Angular 2 Universal Patterns

Angular Universal Source Code - ReadTheSource, January 2016
Angular Universal Source Code

Full Stack Angular 2 - AngularConnect, Oct 2015
Full Stack Angular 2

Angular 2 Server Rendering - Angular U, July 2015
Angular 2 Server Rendering


Control server-rendered page and transfer state before client-side web app loads to the client-side-app.


MIT License

Project Statistics

Sourcerank 1
Repository Size 294 KB
Stars 0
Forks 0
Watchers 0
Open issues 0
Dependencies 58
Contributors 35
Tags 1
Last updated
Last pushed

Top Contributors See all

PatrickJS Mark Pieszak Hongbo Miao Gourav Sharma Omar Gaayeb Andrew Lu Bhargav patel anotherjsguy Mikkel Damm John Brandes Brendan Jace Eric Glasser Wassim Chegham Tamás Csaba Micooz Lee Dmitry Vasilyev Mario Martinez Philippe MARTIN Oleg Romanovskyi

Recent Tags See all

v1.0.1 November 05, 2015

Something wrong with this page? Make a suggestion

Last synced: 2017-04-06 14:47:44 UTC

Login to resync this repository