Category Archives: Javascript



Comments on Angular 2 router guide!#resolve-guard
CanDeactivateGuard is used in CrisisCenterRoutingModule which is part of CrisisCenterModule which is lazy loaded by AppRoutingModule (loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule').
q: Why should CanDeactivateGuard be declared in AppRoutingModule providers? why not to CrisisCenterRoutingModule providers?
guide answer: We also need to add the Guard to our main AppRoutingModule providers so the Router can inject it during the navigation process.
my (original) comment
AppRoutingModule seems to need to know in advance (at least for lazy loaded modules) the CanDeactivate guards used classes. It's odd why this does not apply for e.g. CrisisDetailResolve which is a service too and has the same configuration parent.
the final answer
Well, it seems that indeed CanDeactivateGuard could be provided by CrisisCenterRoutingModule too instead of AppRoutingModule. 
Now the question is why then the guide pointed AppRoutingModule as the one to provide CanDeactivateGuard?
The answer I guess is that the CanDeactivateGuard is a service useful to any module and because lazy loaded modules have their own root injector this means it would be created an additional instance of CanDeactivateGuard for any lazy load module that would provide it too. CanDeactivateGuard has no state so it's useless to have more than one instance of it.

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