Universal (isomorphic) javascript support for Angular2

Module License: MIT

Added by: Sam Deering





Stars: 2573

Watchers: 2573

Forks: 324



Module Description

Build Status npm version Join the chat at https://gitter.im/angular/universal Issue Stats Issue Stats

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

Universal Angular 2

Universal (isomorphic) JavaScript support for Angular 2.

Table of Contents


Universal Documentation & Guide

  • Featuring an overview, installation process, and key concepts for creating Universal Angular applications.
  • For those intersted in how it all got started, and the goals of Universal check out the Original Design Doc (from 2015)

Getting Started

* NodeJS :: Universal Starter repo

* ASP.NET Core :: Universal Starter repo



Manage your application lifecycle and serialize changes while on the server to be sent to the client.


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.

Best Practices

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

  • Know the difference between attributes and properties in relation to the DOM.
  • 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');
  • Don't use any of the browser types provided in the global namespace such as navigator or document. Anything outside of Angular will not be detected when serializing your application into html. If you need access to these types please consider using DOM from "angular2/src/platform/dom/dom_adapter"
  • 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.

What's in a name?

We believe that using the word "universal" is correct when referring to a JavaScript Application that runs in more environments than the browser. (inspired by Universal JavaScript)


MIT License

Module stats last updated: 2018-01-15 16:00:06

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!