diff --git a/package.json b/package.json
index f2340f37..e263267f 100644
--- a/package.json
+++ b/package.json
@@ -29,12 +29,12 @@
     "yargs": "^4.8.1"
   },
   "dependencies": {
-    "@angular/common": "2.0.0-rc.5",
-    "@angular/compiler": "2.0.0-rc.5",
-    "@angular/core": "2.0.0-rc.5",
-    "@angular/platform-browser": "2.0.0-rc.5",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
-    "@angular/router": "^3.0.0-rc.1",
+    "@angular/common": "2.0.0-rc.6",
+    "@angular/compiler": "2.0.0-rc.6",
+    "@angular/core": "2.0.0-rc.6",
+    "@angular/platform-browser": "2.0.0-rc.6",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
+    "@angular/router": "3.0.0-rc.2",
     "@types/es6-shim": "0.0.31",
     "@types/jquery": "1.10.31",
     "@types/node": "6.0.38",
@@ -47,7 +47,7 @@
     "json-loader": "^0.5.4",
     "ng2-select2": "0.4.2",
     "reflect-metadata": "0.1.3",
-    "rxjs": "5.0.0-beta.6",
+    "rxjs": "5.0.0-beta.11",
     "select2": "^4.0.3",
     "sortablejs": "^1.4.2",
     "typescript": "2.0.0",
diff --git a/src/app.module.ts b/src/app.module.ts
index 25015fab..0f0148df 100644
--- a/src/app.module.ts
+++ b/src/app.module.ts
@@ -1,48 +1,89 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { LocationStrategy, HashLocationStrategy } from '@angular/common';
+
+import { Select2Component } from 'ng2-select2/ng2-select2';
 
 import { DataProviderService } from './services/data-provider.service';
 import { MapperService } from './services/mapper.service';
+import {UhkConfigurationService} from './services/uhk-configuration.service';
 
-import { MainAppComponent, APP_ROUTER_PROVIDERS }  from './main-app';
+import { MainAppComponent, appRoutingProviders, routing }  from './main-app';
 import { KeymapComponent } from './components/keymap';
 import { MacroComponent } from './components/macro';
 import { LegacyLoaderComponent } from './components/legacy-loader';
 import { NotificationComponent } from './components/notification';
 import {
-    SvgKeystrokeKeyComponent, SvgOneLineTextKeyComponent, SvgTwoLineTextKeyComponent
+    SvgIconTextKeyComponent,
+    SvgKeyboardKeyComponent,
+    SvgKeystrokeKeyComponent,
+    SvgOneLineTextKeyComponent,
+    SvgSingleIconKeyComponent,
+    SvgSwitchKeymapKeyComponent,
+    SvgTextIconKeyComponent,
+    SvgTwoLineTextKeyComponent
 } from './components/svg/keys';
 import { SvgKeyboardWrapComponent } from './components/svg/wrap';
 import { LayersComponent } from './components/layers';
 import { SvgKeyboardComponent } from './components/svg/keyboard';
+import { SvgModuleComponent } from './components/svg/module';
 import { PopoverComponent } from './components/popover';
 import { KeymapAddComponent } from './components/keymap';
-import {UhkConfigurationService} from './services/uhk-configuration.service';
+import { MacroItemComponent } from './components/popover/tab/macro';
+import { SideMenuComponent } from './components/side-menu';
+import {
+    KeypressTabComponent,
+    KeymapTabComponent,
+    LayerTabComponent,
+    MacroTabComponent,
+    MouseTabComponent,
+    NoneTabComponent
+} from './components/popover/tab';
+import { CaptureKeystrokeButtonComponent } from './components/popover/widgets/capture-keystroke';
+import { IconComponent } from './components/popover/widgets/icon';
 
 @NgModule({
     declarations: [
+        Select2Component,
         MainAppComponent,
         KeymapComponent,
         MacroComponent,
         LegacyLoaderComponent,
         NotificationComponent,
+        SvgIconTextKeyComponent,
+        SvgKeyboardKeyComponent,
         SvgKeystrokeKeyComponent,
         SvgOneLineTextKeyComponent,
+        SvgSingleIconKeyComponent,
+        SvgSwitchKeymapKeyComponent,
+        SvgTextIconKeyComponent,
         SvgTwoLineTextKeyComponent,
+        SvgKeyboardKeyComponent,
         SvgKeyboardWrapComponent,
+        SvgKeyboardComponent,
+        SvgModuleComponent,
         LayersComponent,
         PopoverComponent,
-        SvgKeyboardComponent,
-        KeymapAddComponent
+        KeymapAddComponent,
+        SideMenuComponent,
+        KeypressTabComponent,
+        KeymapTabComponent,
+        LayerTabComponent,
+        MacroTabComponent,
+        MouseTabComponent,
+        NoneTabComponent,
+        CaptureKeystrokeButtonComponent,
+        IconComponent,
+        MacroItemComponent
+    ],
+    imports: [
+        BrowserModule,
+        routing
     ],
-    imports: [BrowserModule],
     providers: [
         DataProviderService,
         UhkConfigurationService,
         MapperService,
-        APP_ROUTER_PROVIDERS,
-        { provide: LocationStrategy, useClass: HashLocationStrategy }
+        appRoutingProviders
     ],
     bootstrap: [MainAppComponent]
 })
diff --git a/src/components/keymap/keymap.routes.ts b/src/components/keymap/keymap.routes.ts
index 549cb152..9f58899c 100644
--- a/src/components/keymap/keymap.routes.ts
+++ b/src/components/keymap/keymap.routes.ts
@@ -1,8 +1,8 @@
-import { RouterConfig } from '@angular/router';
+import { Routes } from '@angular/router';
 import { KeymapComponent } from './keymap.component';
 import { KeymapAddComponent } from './add/keymap-add.component';
 
-export const keymapRoutes: RouterConfig = [
+export const keymapRoutes: Routes = [
     {
         path: '',
         redirectTo: '/keymap',
diff --git a/src/components/legacy-loader/legacy-loader.component.ts b/src/components/legacy-loader/legacy-loader.component.ts
index ab509a9c..98173f4a 100644
--- a/src/components/legacy-loader/legacy-loader.component.ts
+++ b/src/components/legacy-loader/legacy-loader.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { DomSanitizationService, SafeResourceUrl } from '@angular/platform-browser';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import {ActivatedRoute} from '@angular/router';
 
 @Component({
@@ -13,12 +13,12 @@ import {ActivatedRoute} from '@angular/router';
 export class LegacyLoaderComponent {
     private safeLink: SafeResourceUrl;
 
-    constructor(private sanitationService: DomSanitizationService, private route: ActivatedRoute) { }
+    constructor(private domSanitizer: DomSanitizer, private route: ActivatedRoute) { }
 
     ngOnInit() {
         this.route.params.subscribe((params: { id: string }) => {
             if (params.id) {
-                this.safeLink = this.sanitationService.bypassSecurityTrustResourceUrl(params.id + 'Legacy.html');
+                this.safeLink = this.domSanitizer.bypassSecurityTrustResourceUrl(params.id + 'Legacy.html');
             }
         });
     }
diff --git a/src/components/legacy-loader/legacy-loader.routes.ts b/src/components/legacy-loader/legacy-loader.routes.ts
index ec07d8d4..f8aca665 100644
--- a/src/components/legacy-loader/legacy-loader.routes.ts
+++ b/src/components/legacy-loader/legacy-loader.routes.ts
@@ -1,7 +1,7 @@
-import { RouterConfig } from '@angular/router';
+import { Routes } from '@angular/router';
 import {LegacyLoaderComponent} from './legacy-loader.component';
 
-export const legacyRoutes: RouterConfig = [
+export const legacyRoutes: Routes = [
     {
         path: 'legacy/:id',
         component: LegacyLoaderComponent
diff --git a/src/components/macro/macro.routes.ts b/src/components/macro/macro.routes.ts
index ee40778b..0894bc85 100644
--- a/src/components/macro/macro.routes.ts
+++ b/src/components/macro/macro.routes.ts
@@ -1,7 +1,7 @@
-import { RouterConfig } from '@angular/router';
+import { Routes } from '@angular/router';
 import { MacroComponent } from './macro.component';
 
-export const macroRoutes: RouterConfig = [
+export const macroRoutes: Routes = [
     {
         path: 'macro',
         component: MacroComponent
diff --git a/src/components/popover/popover.component.ts b/src/components/popover/popover.component.ts
index 97ae8c2e..f63e578b 100644
--- a/src/components/popover/popover.component.ts
+++ b/src/components/popover/popover.component.ts
@@ -1,15 +1,7 @@
 import {Component, OnInit, Input, Output, EventEmitter, ViewChild} from '@angular/core';
-import {NgSwitch, NgSwitchCase} from '@angular/common';
 
 import {KeyAction} from '../../config-serializer/config-items/KeyAction';
 
-import {KeypressTabComponent} from './tab/keypress/keypress-tab.component';
-import {LayerTabComponent} from './tab/layer/layer-tab.component';
-import {MouseTabComponent} from './tab/mouse/mouse-tab.component';
-import {MacroTabComponent} from './tab/macro/macro-tab.component';
-import {KeymapTabComponent} from './tab/keymap/keymap-tab.component';
-import {NoneTabComponent} from './tab/none/none-tab.component';
-
 import {Tab} from './tab/tab';
 import {KeystrokeAction} from '../../config-serializer/config-items/KeystrokeAction';
 import {SwitchLayerAction} from '../../config-serializer/config-items/SwitchLayerAction';
@@ -30,18 +22,7 @@ enum TabName {
     selector: 'popover',
     template: require('./popover.component.html'),
     styles: [require('./popover.component.scss')],
-    host: { 'class': 'popover' },
-    directives:
-    [
-        NgSwitch,
-        NgSwitchCase,
-        KeypressTabComponent,
-        LayerTabComponent,
-        MouseTabComponent,
-        MacroTabComponent,
-        KeymapTabComponent,
-        NoneTabComponent
-    ]
+    host: { 'class': 'popover' }
 })
 export class PopoverComponent implements OnInit {
     @Input() defaultKeyAction: KeyAction;
diff --git a/src/components/popover/tab/keymap/keymap-tab.component.ts b/src/components/popover/tab/keymap/keymap-tab.component.ts
index 43f9a17d..6f662890 100644
--- a/src/components/popover/tab/keymap/keymap-tab.component.ts
+++ b/src/components/popover/tab/keymap/keymap-tab.component.ts
@@ -3,17 +3,15 @@ import {Component, OnInit, Input} from '@angular/core';
 import {UhkConfigurationService} from '../../../../services/uhk-configuration.service';
 import {Keymap} from '../../../../config-serializer/config-items/Keymap';
 import {KeyAction} from '../../../../config-serializer/config-items/KeyAction';
-import {SvgKeyboardComponent} from '../../../svg/keyboard';
 import {Tab} from '../tab';
 import {SwitchKeymapAction} from '../../../../config-serializer/config-items/SwitchKeymapAction';
 
-import {Select2Component, Select2OptionData} from 'ng2-select2/ng2-select2';
+import {Select2OptionData} from 'ng2-select2/ng2-select2';
 
 @Component({
     selector: 'keymap-tab',
     template: require('./keymap-tab.component.html'),
-    styles: [require('./keymap-tab.component.scss')],
-    directives: [SvgKeyboardComponent, Select2Component]
+    styles: [require('./keymap-tab.component.scss')]
 })
 export class KeymapTabComponent implements OnInit, Tab {
     @Input() defaultKeyAction: KeyAction;
diff --git a/src/components/popover/tab/keypress/keypress-tab.component.ts b/src/components/popover/tab/keypress/keypress-tab.component.ts
index f13e0fe0..a9ec2464 100644
--- a/src/components/popover/tab/keypress/keypress-tab.component.ts
+++ b/src/components/popover/tab/keypress/keypress-tab.component.ts
@@ -1,19 +1,16 @@
 import {Component, OnInit, Input} from '@angular/core';
 
-import {Select2Component, Select2OptionData} from 'ng2-select2/ng2-select2';
+import {Select2OptionData} from 'ng2-select2/ng2-select2';
 
 import {KeyAction} from '../../../../config-serializer/config-items/KeyAction';
 import {KeystrokeAction} from '../../../../config-serializer/config-items/KeystrokeAction';
 
-import {IconComponent} from '../../widgets/icon';
-import {CaptureKeystrokeButtonComponent} from '../../widgets/capture-keystroke';
 import {Tab} from '../tab';
 
 @Component({
     selector: 'keypress-tab',
     template: require('./keypress-tab.component.html'),
-    styles: [require('./keypress-tab.component.scss')],
-    directives: [CaptureKeystrokeButtonComponent, IconComponent, Select2Component]
+    styles: [require('./keypress-tab.component.scss')]
 })
 export class KeypressTabComponent implements OnInit, Tab {
     @Input() defaultKeyAction: KeyAction;
diff --git a/src/components/popover/tab/layer/layer-tab.component.ts b/src/components/popover/tab/layer/layer-tab.component.ts
index 62d1e928..dee887ca 100644
--- a/src/components/popover/tab/layer/layer-tab.component.ts
+++ b/src/components/popover/tab/layer/layer-tab.component.ts
@@ -1,5 +1,4 @@
 import {Component, OnInit, Input, ViewChild} from '@angular/core';
-import {NgSwitch, NgSwitchCase, NgSwitchDefault} from '@angular/common';
 
 import {LayerName, SwitchLayerAction} from '../../../../config-serializer/config-items/SwitchLayerAction';
 import {KeyAction} from '../../../../config-serializer/config-items/KeyAction';
@@ -11,8 +10,7 @@ import {Tab} from '../tab';
 @Component({
     selector: 'layer-tab',
     template: require('./layer-tab.component.html'),
-    styles: [require('./layer-tab.component.scss')],
-    directives: [Select2Component, NgSwitch, NgSwitchCase, NgSwitchDefault]
+    styles: [require('./layer-tab.component.scss')]
 })
 export class LayerTabComponent implements OnInit, Tab {
     @Input() defaultKeyAction: KeyAction;
diff --git a/src/components/popover/tab/macro/macro-item.component.ts b/src/components/popover/tab/macro/macro-item.component.ts
index da967cb3..c7fa886f 100644
--- a/src/components/popover/tab/macro/macro-item.component.ts
+++ b/src/components/popover/tab/macro/macro-item.component.ts
@@ -9,15 +9,12 @@ import {ReleaseModifiersMacroAction} from '../../../../config-serializer/config-
 import {ScrollMouseMacroAction} from '../../../../config-serializer/config-items/ScrollMouseMacroAction';
 import {TextMacroAction} from '../../../../config-serializer/config-items/TextMacroAction';
 
-import {IconComponent} from '../../widgets/icon';
-
 import {KeyModifiers}  from '../../../../config-serializer/config-items/KeyModifiers';
 
 @Component({
     selector: 'macro-item',
     template: require('./macro-item.component.html'),
-    styles: [require('./macro-item.component.scss')],
-    directives: [IconComponent]
+    styles: [require('./macro-item.component.scss')]
 })
 export class MacroItemComponent implements OnInit, OnChanges {
 
diff --git a/src/components/popover/tab/macro/macro-tab.component.ts b/src/components/popover/tab/macro/macro-tab.component.ts
index ba647587..2d455e58 100644
--- a/src/components/popover/tab/macro/macro-tab.component.ts
+++ b/src/components/popover/tab/macro/macro-tab.component.ts
@@ -6,15 +6,13 @@ import {KeyAction} from '../../../../config-serializer/config-items/KeyAction';
 import {PlayMacroAction} from '../../../../config-serializer/config-items/PlayMacroAction';
 
 import {Tab} from '../tab';
-import {MacroItemComponent} from './macro-item.component';
 
-import {Select2Component, Select2OptionData} from 'ng2-select2/ng2-select2';
+import {Select2OptionData} from 'ng2-select2/ng2-select2';
 
 @Component({
     selector: 'macro-tab',
     template: require('./macro-tab.component.html'),
-    styles: [require('./macro-tab.component.scss')],
-    directives: [MacroItemComponent, Select2Component]
+    styles: [require('./macro-tab.component.scss')]
 })
 export class MacroTabComponent implements OnInit, Tab {
     @Input() defaultKeyAction: KeyAction;
diff --git a/src/components/popover/tab/mouse/mouse-tab.component.ts b/src/components/popover/tab/mouse/mouse-tab.component.ts
index bda321bf..78efe973 100644
--- a/src/components/popover/tab/mouse/mouse-tab.component.ts
+++ b/src/components/popover/tab/mouse/mouse-tab.component.ts
@@ -1,5 +1,4 @@
 import {Component, OnInit, Input} from '@angular/core';
-import {NgSwitch, NgSwitchCase, NgSwitchDefault} from '@angular/common';
 
 import {Tab} from '../tab';
 import {KeyAction} from '../../../../config-serializer/config-items/KeyAction';
@@ -8,8 +7,7 @@ import {MouseAction, MouseActionParam} from '../../../../config-serializer/confi
 @Component({
     selector: 'mouse-tab',
     template: require('./mouse-tab.component.html'),
-    styles: [require('./mouse-tab.component.scss')],
-    directives: [NgSwitch, NgSwitchCase, NgSwitchDefault]
+    styles: [require('./mouse-tab.component.scss')]
 })
 export class MouseTabComponent implements OnInit, Tab {
     @Input() defaultKeyAction: KeyAction;
diff --git a/src/components/popover/widgets/icon/icon.component.ts b/src/components/popover/widgets/icon/icon.component.ts
index 19a74b6f..da402039 100644
--- a/src/components/popover/widgets/icon/icon.component.ts
+++ b/src/components/popover/widgets/icon/icon.component.ts
@@ -1,11 +1,9 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { NgSwitch, NgSwitchCase } from '@angular/common';
 
 @Component({
     selector: 'icon',
     template: require('./icon.component.html'),
-    styles: [require('./icon.component.scss')],
-    directives: [NgSwitch, NgSwitchCase]
+    styles: [require('./icon.component.scss')]
 })
 export class IconComponent implements OnInit {
 
diff --git a/src/components/side-menu/side-menu.component.ts b/src/components/side-menu/side-menu.component.ts
index 4909bdc6..b65e778c 100644
--- a/src/components/side-menu/side-menu.component.ts
+++ b/src/components/side-menu/side-menu.component.ts
@@ -3,13 +3,11 @@ import { Component, OnInit } from '@angular/core';
 import { Keymap } from '../../config-serializer/config-items/Keymap';
 import { UhkConfigurationService } from '../../services/uhk-configuration.service';
 import { Macro } from '../../config-serializer/config-items/Macro';
-import { ROUTER_DIRECTIVES } from '@angular/router';
 
 @Component({
     selector: 'side-menu',
     template: require('./side-menu.component.html'),
-    styles: [require('./side-menu.component.scss')],
-    directives: [ROUTER_DIRECTIVES]
+    styles: [require('./side-menu.component.scss')]
 })
 export class SideMenuComponent implements OnInit {
     private keymaps: Keymap[];
diff --git a/src/components/svg/keyboard/svg-keyboard.component.ts b/src/components/svg/keyboard/svg-keyboard.component.ts
index 76f6ee48..f7f5254e 100644
--- a/src/components/svg/keyboard/svg-keyboard.component.ts
+++ b/src/components/svg/keyboard/svg-keyboard.component.ts
@@ -1,14 +1,13 @@
 import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
 
 import {Module} from '../../../config-serializer/config-items/Module';
-import {SvgModule, SvgModuleComponent} from '../module';
+import {SvgModule} from '../module';
 import {DataProviderService} from '../../../services/data-provider.service';
 
 @Component({
     selector: 'svg-keyboard',
     template: require('./svg-keyboard.component.html'),
-    styles: [require('./svg-keyboard.component.scss')],
-    directives: [SvgModuleComponent]
+    styles: [require('./svg-keyboard.component.scss')]
 })
 export class SvgKeyboardComponent implements OnInit {
     @Input() moduleConfig: Module[];
diff --git a/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts b/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts
index b086eea5..e72c9322 100644
--- a/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts
+++ b/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts
@@ -10,11 +10,6 @@ import {UhkConfiguration} from '../../../../config-serializer/config-items/UhkCo
 import {UhkConfigurationService} from '../../../../services/uhk-configuration.service';
 import {MapperService} from '../../../../services/mapper.service';
 
-import {SvgSingleIconKeyComponent} from '../svg-single-icon-key';
-import {SvgTextIconKeyComponent} from '../svg-text-icon-key';
-import {SvgIconTextKeyComponent} from '../svg-icon-text-key';
-import {SvgSwitchKeymapKeyComponent} from '../svg-switch-keymap-key';
-
 enum LabelTypes {
     KeystrokeKey,
     OneLineText,
@@ -27,14 +22,7 @@ enum LabelTypes {
 
 @Component({
     selector: 'g[svg-keyboard-key]',
-    template: require('./svg-keyboard-key.component.html'),
-    directives:
-    [
-        SvgSingleIconKeyComponent,
-        SvgTextIconKeyComponent,
-        SvgIconTextKeyComponent,
-        SvgSwitchKeymapKeyComponent
-    ]
+    template: require('./svg-keyboard-key.component.html')
 })
 export class SvgKeyboardKeyComponent implements OnInit, OnChanges {
     @Input() id: string;
diff --git a/src/components/svg/module/svg-module.component.ts b/src/components/svg/module/svg-module.component.ts
index 08074822..86017298 100644
--- a/src/components/svg/module/svg-module.component.ts
+++ b/src/components/svg/module/svg-module.component.ts
@@ -1,13 +1,12 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
-import { SvgKeyboardKey, SvgKeyboardKeyComponent } from '../keys';
+import { SvgKeyboardKey } from '../keys';
 import {KeyAction} from '../../../config-serializer/config-items/KeyAction';
 
 @Component({
     selector: 'g[svg-module]',
     template: require('./svg-module.component.html'),
-    styles: [require('./svg-module.component.scss')],
-    directives: [SvgKeyboardKeyComponent]
+    styles: [require('./svg-module.component.scss')]
 })
 export class SvgModuleComponent {
     @Input() coverages: any[];
diff --git a/src/main-app/main-app.component.ts b/src/main-app/main-app.component.ts
index cc121ab8..91841d0b 100644
--- a/src/main-app/main-app.component.ts
+++ b/src/main-app/main-app.component.ts
@@ -1,16 +1,9 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
-
-import { SideMenuComponent } from '../components/side-menu';
 
 @Component({
     selector: 'main-app',
     template: require('./main-app.component.html'),
     styles: [require('./main-app.component.scss')],
-    directives: [SideMenuComponent, ROUTER_DIRECTIVES],
     encapsulation: ViewEncapsulation.None
 })
-export class MainAppComponent  {
-    constructor() {
-    }
-}
+export class MainAppComponent { }
diff --git a/src/main-app/main-app.routes.ts b/src/main-app/main-app.routes.ts
index d31789b3..ba2603fe 100644
--- a/src/main-app/main-app.routes.ts
+++ b/src/main-app/main-app.routes.ts
@@ -1,14 +1,15 @@
-import { provideRouter, RouterConfig }  from '@angular/router';
+import { ModuleWithProviders } from '@angular/core';
+import { Routes, RouterModule }  from '@angular/router';
 import { keymapRoutes } from '../components/keymap';
 import { macroRoutes } from '../components/macro';
 import { legacyRoutes } from '../components/legacy-loader';
 
-export const routes: RouterConfig = [
+const appRoutes: Routes = [
     ...keymapRoutes,
     ...macroRoutes,
     ...legacyRoutes
 ];
 
-export const APP_ROUTER_PROVIDERS = [
-    provideRouter(routes)
-];
+export const appRoutingProviders: any[] = [ ];
+
+export const routing: ModuleWithProviders =  RouterModule.forRoot(appRoutes, { useHash: true });