Angular 2 Universal Application

Server-Side Rendering

Installation

npm install

Serve

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

Development

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

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)
- Use a UniversalCache instead of regular Http, to save certain requests so they aren't re-ran again on the Client. (Example useage here)
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.

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).