[Deprecated] Angular 2+ ES6 Universal Webpack Babel starter
<img src="https://cloud.githubusercontent.com/assets/1016365/10639063/138338bc-7806-11e5-8057-d34c75f3cafc.png" alt="Universal Angular 2 ES6" height="320"/>
Server-Side Rendering for Angular 2+ in ES6 (using Babel)
A minimal Angular 2+ starter for Universal JavaScript using ES6/Babel and Webpack 2
Recommend : If you're looking for Universal Starter written in TypeScript go to angular/universal-starter 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 servernpm run build
to prepare a distributable bundlenpm 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 realtimenpm run watch
to build your client app and start a web servernpm run build:prod:ngc
to compile the ngfactory files and build prodWhen building Universal components in Angular 2 there are a few things to keep in mind.
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:
import { isBrowser, isNode } from 'angular2-universal'
;DOM
from "@angular/platform-browser"
templateUrl
or styleUrls
you must use angular2-template-loader
in your TS loaders.
setTimeout
. It will slow down the server-side rendering process. Make sure to remove them ondestroy
in Components.
constructor(element: ElementRef, renderer: Renderer) {
renderer.setElementStyle(element.nativeElement, 'font-size', 'x-large');
}
<img src="">
element the src attribute is reflected as the src property of the element type HTMLImageElement.Nothing's ever perfect, but please let me know by creating an issue (make sure there isn't an existing one about it already), and we'll try and work out a fix for it! If you have any good ideas, or want to contribute, feel free to either make an Issue with the Proposal, or just make a PR from your Fork.
To enable Brotli compression for server response with fallback for gzip replace the following code from src/server.aot.ts
import * as compression from 'compression';
app.use(compression());
with
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);
send(output);
}
send(output);
}
})));
this will check the support, compress and cache the response.
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.
Angular 2 Universal Patterns - ng-conf, May 2016
Angular Universal Source Code - ReadTheSource, January 2016
Full Stack Angular 2 - AngularConnect, Oct 2015
Angular 2 Server Rendering - Angular U, July 2015
Control server-rendered page and transfer state before client-side web app loads to the client-side-app.