http://embed.plnkr.co/qZf6yv/

https://benmccormick.org/2015/09/14/es5-es6-es2016-es-next-whats-going-on-with-javascript-versioning/

http://onehungrymind.com/build-a-simple-website-with-angular-2/
http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/
https://scotch.io/tutorials/use-the-angular-cli-for-faster-angular-2-projects
https://www.smashingmagazine.com/2014/06/building-with-gulp/

compatibility
https://angular.io/docs/ts/latest/guide/browser-support.html

angular 2 project seed
https://github.com/angularclass/awesome-angular2#current-browser-support-for-angular-2
https://angularclass.github.io/angular2-webpack-starter/
https://github.com/AngularClass/angular2-webpack-starter
https://www.npmjs.com/package/angular2-webpack-starter
https://github.com/mgechev/angular-seed
https://github.com/NathanWalker/angular-seed-advanced
http://www.devacron.com/angular2-github-boilerplate-repositories/
http://stackoverflow.com/questions/29649578/available-yeoman-generator-for-angular-2

webpack
https://webpack.github.io/docs/
http://stackoverflow.com/questions/39548175/can-someone-explain-webpacks-commonschunkplugin
https://blog.madewithlove.be/post/webpack-your-bags/
http://webpack.github.io/analyse/

webpack lazy loading
not working for me
https://github.com/Quramy/angular2-load-children-loader
https://github.com/Quramy/ng2-lazy-load-demo

rxjs
http://blog.falafel.com/introduction-rxjs-angular2/
http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html

typings
https://github.com/typings/typings
https://neoheurist.wordpress.com/2016/06/20/definitely-typed/
https://blog.ionic.io/ionic-and-typings/
https://blog.mariusschulz.com/2014/05/19/using-typescripts-type-definition-files-to-get-tooling-support-for-plain-javascript

Migrating from 2.x to 3.0
http://getbootstrap.com/migration/

basics
https://egghead.io/lessons/typescript-installing-typescript-and-running-the-typescript-compiler-tsc?course=up-and-running-with-typescript
https://egghead.io/courses/angular-2-fundamentals
https://remysharp.com/2010/10/08/what-is-a-polyfill

basics javascript
https://www.safaribooksonline.com/library/view/learning-javascript-design/9781449334840/ch11.html
https://www.safaribooksonline.com/library/view/learning-javascript-design/9781449334840/ch11s01.html
https://www.safaribooksonline.com/library/view/learning-javascript-design/9781449334840/ch11s02.html
https://www.safaribooksonline.com/library/view/learning-javascript-design/9781449334840/ch11s03.html

nodejs
http://stackoverflow.com/questions/8455290/install-different-versions-of-nodejs
https://github.com/tj/n

initialize a node.js project (this creates package.json)
node init

sass vs less
https://css-tricks.com/sass-vs-less/

Immediately-Invoked Function Expression (IIFE)
http://benalman.com/news/2010/11/immediately-invoked-function-expression/

basics webpack
http://onehungrymind.com/build-a-simple-website-with-angular-2/
https://github.com/simpulton/angular2-website-routes.git
sudo npm list -g --depth=0
sudo npm install -verbose webpack -g
webpack --progress --colors -d
webpack --progress --colors -d --config webpack.config.js

http://semaphoreci.com/community/tutorials/setting-up-angular-2-with-webpack
https://github.com/gonzofish/semaphore-ng2-webpack.git
https://docs.npmjs.com/cli/search
npm search angular-in-memory-web-api
install dev dependencies:
npm install --dev -> deprecated, use the following below
npm install --only=dev
ERROR
	gigi@gigi-desktop:~/Projects/semaphore-ng2-webpack$ node start
	module.js:328
		throw err;
		^
	Error: Cannot find module '/********/Projects/semaphore-ng2-webpack/start'
		at Function.Module._resolveFilename (module.js:326:15)
		at Function.Module._load (module.js:277:25)
		at Function.Module.runMain (module.js:442:10)
		at startup (node.js:136:18)
		at node.js:966:3
SOLUTION
	it's not "node start" but "npm start"
list dependencies for typings@1.4.0:
sudo npm list typings@1.4.0
other:
npm config list
npm config ls -l
npm config ls -l | grep cache
How to view the dependency tree of a given npm module?
sudo npm install -g npm-remote-ls
npm-remote-ls typings
just view a package
npm view typings@1.4.0
here npm start is equivalent to:
npm install webpack-dev-server@1.14.1 --only=dev
find . -name webpack-dev-server.js
./node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress --display-errors-details --inline --colors --config ./webpack/webpack.dev.js

npm
https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/
npm install tslint@3.13.0 --dev
tslint --version
npm run lint

debug with WebStorm
https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/

webpack multiple entry points
https://github.com/gigihc11/webpack/tree/master/examples/multiple-entry-points
build with (this one uses template.md):
rm js/* 2>/dev/null; node build.js
or install globally webpack@1.13.1:
sudo npm install webpack@1.13.1 -g
then change webpack.config.js:
// var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
var webpack = require('webpack');
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
then build with:
rm js/* 2>/dev/null; webpack

https://github.com/gigihc11/webpack/tree/master/examples/multiple-entry-points
For changing webpack.config.js from "commons" to e.g. "adunate" you'll
need to also change in pageA.html, pageAB.html, template.md.

https://webpack.github.io/docs/shimming-modules.html
http://stackoverflow.com/questions/29596714/new-es6-syntax-for-importing-commonjs-amd-modules-i-e-import-foo-require
https://nodejs.org/api/modules.html#modules_core_modules

angular2-webpack-starter
https://github.com/AngularClass/angular2-webpack-starter
git clone https://github.com/AngularClass/angular2-webpack-starter.git
git checkout material2
install global dependencies:
sudo npm install --global webpack webpack-dev-server karma-cli protractor typescript rimraf
install project dependencies (package.json):
npm install --verbose

Webstorm
Promise and catch keyword are highlighted with red
go to Languages & Frameworks -> JavaScript and select ECMAScript 6

html5 semantic elements and its usage
http://www.encodedna.com/2014/08/html5-semantic-elements-and-its-usage.htm

Angular 2 lazy loading with Webpack
angular2-router-loader is now angular-router-loader
See https://github.com/AngularClass/angular2-webpack-starter.git for a working example.
https://medium.com/@daviddentoom/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.bxpvfgzlw

angular2-webpack-starter + bootstrap
see also "'use:' revered back to 'loader:'" in webpack.test.js
npm install --save-dev bootstrap
npm install --save-dev image-webpack-loader
add to vendor.browser.ts before "if ('production' === ENV)"
// bootstrap 3.3.7:
import 'bootstrap/dist/css/bootstrap';
import 'bootstrap/dist/css/bootstrap-theme';
change webpack.common.js with this:
resolve: {
	extensions: [..., '.css'],
and this:
{
	test: /\.css$/,
	use: ['to-string-loader', 'css-loader'],
	include: /src\//,
	exclude: /node_modules\//
},
// for bootstrap
{
	test: /\.css$/,
	loader: ['style-loader', 'css-loader'],
	exclude: /src\//,
	include: /node_modules\/bootstrap/
},
and this:
// for bootstrap
{
	test: /\.(jpe?g|gif|svg)$/i,
	loaders: [
		// image-webpack-loader chained with the file-loader (equivalent to: file?...!image-webpack?...)
		'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
		'image-webpack-loader?bypassOnDebug=true&optimizationLevel=7&interlaced=false'
	]
},
{test: /\.png$/, loader: "url-loader?limit=100"},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=1000&mimetype=application/vnd.ms-fontobject"},
{test: /\.(woff|woff2)$/, loader: "url-loader?&limit=1000&mimetype=application/font-woff"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=1000&mimetype=application/octet-stream"}

DEVELOPING A TABS COMPONENT IN ANGULAR
AfterContentInit, ContentChildren
http://blog.thoughtram.io/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html
http://juristr.com/blog/2016/02/learning-ng2-creating-tab-component/

difference between @ContentChildren and @ViewChildren
viewProviders vs providers
AfterViewInit, ViewChild, ViewChildren, ContentChild
http://blog.mgechev.com/2016/01/23/angular2-viewchildren-contentchildren-difference-viewproviders/

Fine grained change detection with Angular 2
DoCheck, KeyValueDiffers
http://juristr.com/blog/2016/04/angular2-change-detection/

ChangeDetectionStrategy: OnPush vs Default
http://www.syntaxsuccess.com/viewarticle/change-detection-in-angular-2.0
http://www.syntaxsuccess.com/angular-2-samples/#/demo/change
https://vsavkin.com/change-detection-in-angular-2-4f216b855d4c#.thlsx9ipr

How to use IterableDiffers
http://embed.plnkr.co/qZf6yv/ -> see app.component.ts
excerpt:
ngDoCheck() {
	const changes = this.differ.diff(this.heroes);
	if (changes) {
		console.log('new change');// for splitting up changes
		changes.forEachAddedItem(r => console.log('added ', r));
		changes.forEachRemovedItem(r => console.log('removed ', r))
		changes.forEachMovedItem(r => console.log('moved ', r))
	}
}

Pipes and Internationalization API
https://github.com/andyearnshaw/Intl.js/

Animation
https://css-tricks.com/ease-out-in-ease-in-out/
http://easings.net/ -> click on ease function for cubic-bezier code
transition(':leave', [
  animate('2s cubic-bezier(0.755, 0.05, 0.855, 0.06)', style({
	opacity: 0,
	transform: 'translateY(100%)'
  }))
])

Build error
[at-loader] Checking finished with 4 errors
[at-loader] src/app/gui/components/validation-alerts.component.ts:6:14 
    Cannot find namespace 'jasmine'. 

[at-loader] src/app/gui/components/validation-alerts.component.ts:32:23 
    Cannot find name '$'. 

[at-loader] src/app/gui/components/validation-alerts.component.ts:34:14 
    Cannot find name '$'. 

[at-loader] src/app/gui/components/validation-alerts.component.ts:158:26 
    Cannot find name '$'. 
SOLUTION
search the appropriate tsconfig.json (or all of them - tsconfig*.json) file and add:
  "compilerOptions": {
    "types": [
      "jasmine",
      "jquery",
      ...
    ]

Important details

https://angular.io/docs/ts/latest/guide/router.html
By default, the router re-uses a component instance when it re-navigates to the same component type without visiting a different component first.
When subscribing to an observable in a component, you almost always arrange to unsubscribe when the component is destroyed.
There are a few exceptional observables where this is not necessary. The ActivatedRoute observables are among the exceptions.
The ActivatedRoute and its observables are insulated from the Router itself. The Router destroys a routed component when it is no longer needed and the injected ActivatedRoute dies with it.
Feel free to unsubscribe anyway. It is harmless and never a bad practice.
See also route.snapshot
Use route parameters to specify a required parameter value within the route URL