Universal (isomorphic) javascript support for Angular2
TypeScript JavaScript
Permalink
Failed to load latest commit information.
.github chore(github): Issue template updates (#504) Aug 8, 2016
custom_typings chore: revert old typings Aug 9, 2016
examples (chore): add new naming convention for modules (#559) Oct 3, 2016
helpers chore(build): add gulp tasks, jasmine, and build helpers Jul 12, 2016
modules fix(node-renderer): fix propertyValue for numbers (#633) Dec 20, 2016
spec/support chore(build): add gulp tasks, jasmine, and build helpers Jul 12, 2016
.editorconfig chore(.editorconfig): remove newline for .json Aug 7, 2015
.gitignore feat(universal): AOT support (#560) Oct 5, 2016
.npmignore feat(universal): AOT support (#560) Oct 5, 2016
.travis.yml feat(travis.yml): use npm scripts (#538) Sep 17, 2016
CHANGELOG.md docs(changelog): 1.0.6 Sep 15, 2016
CONTRIBUTING.md chore(example): clean up unmaintained examples folder Jul 12, 2016
DEVELOPER.md docs: add getting started guide Jan 27, 2016
DOCUMENTATION.md (chore): add new naming convention for modules (#559) Oct 3, 2016
LICENSE chore(License): update year to range Mar 7, 2016
README.md docs(readme): add universal-cli info (#651) Jan 8, 2017
build-utils.spec.js chore(build): add gulp tasks, jasmine, and build helpers Jul 12, 2016
build-utils.spec.ts chore(build): update dependencies (#548) Sep 21, 2016
build-utils.ts refactor(universal): --noImplicitAny support (#620) Nov 16, 2016
gulpfile.ts refactor(universal): --noImplicitAny support (#620) Nov 16, 2016
index.d.ts chore(typings): Remove typings - Add @types (#479) Jul 15, 2016
package.json chore: lock typescript version (#644) Dec 16, 2016
tsconfig.json refactor(universal): --noImplicitAny support (#620) Nov 16, 2016
tslint.json refactor: lint Sep 9, 2016

README.md

Current Status: Merging Universal into Angular core

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

Universal Angular 2

Universal Angular 2

Universal (isomorphic) JavaScript support for Angular 2.

Table of Contents


Documentation

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

  • Minimal webpack angular2 & universal starter
  • Installation: Clone the above repo, npm i && npm start to fire it up.

* ASP.NET Core :: Universal Starter repo

  • Installation: Clone the above repo, npm i && dotnet restore (VStudio will run these automatically when opening the project)
  • Launch files included for both VSCode & VStudio to run/debug automatically (press F5).

* Angular Universal CLI repo

  • Universal-CLI is fork from Angular-CLI. It is a separate package because the Core-CLI team is not able to maintain non-core functionality.
  • npm install -g universal-cli and once installed: ung new PROJECT_NAME
  • Useage instructions here

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"
  • Try to limit or avoid using setTimeout. It will slow down the server-side rendering process. Make sure to remove them ngOnDestroy in Components.
    • Also for RxJs timeouts, make sure to cancel their stream on success, for they can slow down rendering as well.
  • 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 element the src attribute is reflected as the src property of the element type HTMLImageElement.

Modules

Universal

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

Videos

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

preboot.js

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

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)

License

MIT License