Angularjs 2


angular 2 project seed


webpack lazy loading
not working for me



Migrating from 2.x to 3.0


basics javascript


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

sass vs less

Immediately-Invoked Function Expression (IIFE)

basics webpack
sudo npm list -g --depth=0
sudo npm install -verbose webpack -g
webpack --progress --colors -d
webpack --progress --colors -d --config webpack.config.js
npm search angular-in-memory-web-api
install dev dependencies:
npm install --dev -> deprecated, use the following below
npm install --only=dev
	gigi@gigi-desktop:~/Projects/semaphore-ng2-webpack$ node start
		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
	it's not "node start" but "npm start"
list dependencies for typings@1.4.0:
sudo npm list typings@1.4.0
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/

npm install tslint@3.13.0 --dev
tslint --version
npm run lint

debug with WebStorm

webpack multiple entry points
build with (this one uses
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
For changing webpack.config.js from "commons" to e.g. "adunate" you'll
need to also change in pageA.html, pageAB.html,

git clone
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

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

html5 semantic elements and its usage

Angular 2 lazy loading with Webpack
angular2-router-loader is now angular-router-loader
See for a working example.

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?...)
{test: /\.png$/, loader: "url-loader?limit=100"},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=1000&mimetype=application/"},
{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"}

AfterContentInit, ContentChildren

difference between @ContentChildren and @ViewChildren
viewProviders vs providers
AfterViewInit, ViewChild, ViewChildren, ContentChild

Fine grained change detection with Angular 2
DoCheck, KeyValueDiffers

ChangeDetectionStrategy: OnPush vs Default

How to use IterableDiffers -> see app.component.ts
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

Animation -> 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 '$'. 
search the appropriate tsconfig.json (or all of them - tsconfig*.json) file and add:
  "compilerOptions": {
    "types": [

Important details
  • 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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.