413439b784
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@44433 d315682c-612b-4755-9ff5-7f18f6832af3 |
||
---|---|---|
.. | ||
src | ||
.editorconfig | ||
.gitignore | ||
README.md | ||
app.json | ||
nodemon.json | ||
npm-shrinkwrap.json.stable | ||
package.json | ||
tsconfig.json | ||
webpack.config.ts |
README.md
<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
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
Universal "Gotchas"
- To use
templateUrl
orstylesUrl
you must useangular2-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
do not exist on the server - so using them, or any library that uses them (jQuery for example) will not work.- 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';
- The application runs XHR requests on the server & once again on the Client-side (when the application bootstraps)
- Use a UniversalCache to save certain requests so they aren't re-ran again on the Client.
Upcoming Universal features
- SeoServices
- Universal fixes for Angular Core 2.1.1
- AoT funcionality is still a work-in-progress, but is available as of 2.1.0-rc1
Installation
npm install
Serve
npm start
to build your client app and start a web servernpm run build
to prepare a distributable bundle
Development
- run
npm start
andnpm 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
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.
Documentation
Videos
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
preboot.js
Control server-rendered page and transfer state before client-side web app loads to the client-side-app.