diff --git a/package.json b/package.json
index 1c1eb3fb..68ef1cf4 100644
--- a/package.json
+++ b/package.json
@@ -39,13 +39,14 @@
     "webpack-svgstore-plugin": "4.0.0"
   },
   "dependencies": {
-    "@angular/common": "2.4.10",
-    "@angular/compiler": "2.4.10",
-    "@angular/core": "2.4.10",
-    "@angular/forms": "2.4.10",
-    "@angular/platform-browser": "2.4.10",
-    "@angular/platform-browser-dynamic": "2.4.10",
-    "@angular/router": "3.4.10",
+    "@angular/animations": "4.0.0",
+    "@angular/common": "4.0.0",
+    "@angular/compiler": "4.0.0",
+    "@angular/core": "4.0.0",
+    "@angular/forms": "4.0.0",
+    "@angular/platform-browser": "4.0.0",
+    "@angular/platform-browser-dynamic": "4.0.0",
+    "@angular/router": "4.0.0",
     "@ngrx/core": "1.2.0",
     "@ngrx/effects": "2.0.1",
     "@ngrx/store": "2.2.1",
@@ -66,7 +67,7 @@
     "typescript": "2.2.1",
     "usb": "git+https://github.com/aktary/node-usb.git",
     "xml-loader": "1.2.1",
-    "zone.js": "0.8.4"
+    "zone.js": "0.8.5"
   },
   "scripts": {
     "postinstall": "run-p build:usb \"symlink -- -i\" ",
diff --git a/shared/src/components/keymap/edit/keymap-edit.component.html b/shared/src/components/keymap/edit/keymap-edit.component.html
index 3f0dd2da..3d2f31bc 100644
--- a/shared/src/components/keymap/edit/keymap-edit.component.html
+++ b/shared/src/components/keymap/edit/keymap-edit.component.html
@@ -1,7 +1,7 @@
-<template [ngIf]="keymap$ | async">
+<ng-template [ngIf]="keymap$ | async">
     <keymap-header [keymap]="keymap$ | async" [deletable]="deletable$ | async" (downloadClick)="downloadKeymap()"></keymap-header>
     <svg-keyboard-wrap [keymap]="keymap$ | async"></svg-keyboard-wrap>
-</template>
+</ng-template>
 
 <div *ngIf="!(keymap$ | async)" class="not-found">
     Sorry, there is no keymap with this abbreviation.
diff --git a/shared/src/components/macro/edit/macro-edit.component.html b/shared/src/components/macro/edit/macro-edit.component.html
index bee7d56c..46e55d5f 100644
--- a/shared/src/components/macro/edit/macro-edit.component.html
+++ b/shared/src/components/macro/edit/macro-edit.component.html
@@ -1,4 +1,4 @@
-<template [ngIf]="macro">
+<ng-template [ngIf]="macro">
     <macro-header
             [macro]="macro"
             [isNew]="isNew"
@@ -10,7 +10,7 @@
         (delete)="deleteAction($event.macroId, $event.index, $event.action)"
         (reorder)="reorderAction($event.macroId, $event.oldIndex, $event.newIndex)"
     ></macro-list>
-</template>
+</ng-template>
 
 <div *ngIf="!macro" class="not-found">
     There is no macro with id {{ route.params.select('id') | async }}.
diff --git a/shared/src/components/popover/tab/keymap/keymap-tab.component.html b/shared/src/components/popover/tab/keymap/keymap-tab.component.html
index 1846dd08..5bd905bf 100644
--- a/shared/src/components/popover/tab/keymap/keymap-tab.component.html
+++ b/shared/src/components/popover/tab/keymap/keymap-tab.component.html
@@ -1,7 +1,7 @@
-<template [ngIf]="keymapOptions.length === 0">
+<ng-template [ngIf]="keymapOptions.length === 0">
     <span> No keymaps are available to choose from. Create a keymap first! </span>
-</template>
-<template [ngIf]="keymapOptions.length > 0">
+</ng-template>
+<ng-template [ngIf]="keymapOptions.length > 0">
     <div>
         <b>Switch to keymap:</b>
         <select2
@@ -19,4 +19,4 @@
                     [moduleConfig]="selectedKeymap.layers[0].modules">
         </svg-keyboard>
     </div>
-</template>
\ No newline at end of file
+</ng-template>
\ No newline at end of file
diff --git a/shared/src/components/popover/tab/layer/layer-tab.component.html b/shared/src/components/popover/tab/layer/layer-tab.component.html
index c5f91c00..5d87b993 100644
--- a/shared/src/components/popover/tab/layer/layer-tab.component.html
+++ b/shared/src/components/popover/tab/layer/layer-tab.component.html
@@ -1,4 +1,4 @@
-<template [ngIf]="!isNotBase">
+<ng-template [ngIf]="!isNotBase">
     <select (change)="toggleChanged($event.target.value)">
         <option *ngFor="let item of toggleData" [value]="item.id" [selected]="toggle === item.id">
             {{ item.text }}
@@ -11,10 +11,10 @@
         </option>
     </select>
     <span [ngSwitch]="toggle">
-        <template [ngSwitchCase]="true">layer by pressing this key.</template>
-        <template ngSwitchDefault>layer by holding this key.</template>
+        <ng-template [ngSwitchCase]="true">layer by pressing this key.</ng-template>
+        <ng-template ngSwitchDefault>layer by holding this key.</ng-template>
     </span>
-</template>
-<template [ngIf]="isNotBase">
+</ng-template>
+<ng-template [ngIf]="isNotBase">
     <span> Layer switching is only possible from the base layer. </span>
-</template>
\ No newline at end of file
+</ng-template>
\ No newline at end of file
diff --git a/shared/src/components/popover/tab/macro/macro-tab.component.html b/shared/src/components/popover/tab/macro/macro-tab.component.html
index 30a5b70b..810a5879 100644
--- a/shared/src/components/popover/tab/macro/macro-tab.component.html
+++ b/shared/src/components/popover/tab/macro/macro-tab.component.html
@@ -1,7 +1,7 @@
-<template [ngIf]="macroOptions.length === 0">
+<ng-template [ngIf]="macroOptions.length === 0">
     <span> No macros are available to choose from. Create a macro first! </span>
-</template>
-<template [ngIf]="macroOptions.length > 0">
+</ng-template>
+<ng-template [ngIf]="macroOptions.length > 0">
     <div class="macro-selector">
         <b> Play macro: </b>
         <select2 [data]="macroOptions" [value]="macroOptions[selectedMacroIndex].id" (valueChanged)="onChange($event)" [width]="'100%'"></select2>
@@ -13,4 +13,4 @@
             </macro-item>
         </div>
     </div>
-</template>
\ No newline at end of file
+</ng-template>
\ No newline at end of file
diff --git a/shared/src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.html b/shared/src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.html
index 91e06d41..f9df04bf 100644
--- a/shared/src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.html
+++ b/shared/src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.html
@@ -3,10 +3,10 @@
             (click)="start()"
 >
     <i class="fa fa-circle"></i>
-    <template [ngIf]="!record">
+    <ng-template [ngIf]="!record">
         Capture keystroke
-    </template>
-    <template [ngIf]="record">
+    </ng-template>
+    <ng-template [ngIf]="record">
         Capturing ...
-    </template>
+    </ng-template>
  </button>
\ No newline at end of file
diff --git a/shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html b/shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html
index 13b8a808..11f12b88 100644
--- a/shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html
+++ b/shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html
@@ -4,7 +4,7 @@
                     [attr.height]="height"  [attr.width]="width"
                     [attr.fill]="fill"
 />
-<template [ngIf]="recording">
+<ng-template [ngIf]="recording">
     <svg:circle
             [@recording]="recordAnimation"
             (@recording.done)="onRecordingAnimationDone()"
@@ -13,8 +13,8 @@
             [attr.r]="10"
             [attr.fill]="'#c00'"
     ></svg:circle>
-</template>
-<template [ngIf]="!recording">
+</ng-template>
+<ng-template [ngIf]="!recording">
     <svg:g [ngSwitch]="labelType"
            [attr.font-size]="19"
            [attr.font-family]="'Helvetica'"
@@ -62,4 +62,4 @@
             <svg:g svg-mouse-key [mouseAction]="labelSource"></svg:g>
         </svg>
     </svg:g>
-</template>
+</ng-template>
diff --git a/shared/src/components/svg/wrap/svg-keyboard-wrap.component.html b/shared/src/components/svg/wrap/svg-keyboard-wrap.component.html
index 0bcaa733..01dc6166 100644
--- a/shared/src/components/svg/wrap/svg-keyboard-wrap.component.html
+++ b/shared/src/components/svg/wrap/svg-keyboard-wrap.component.html
@@ -1,4 +1,4 @@
-<template ngIf="layers">
+<ng-template [ngIf]="layers">
     <layers [class.disabled]="popoverShown" (select)="selectLayer($event.index)" [current]="currentLayer"></layers>
     <keyboard-slider [layers]="layers"
                      [currentLayer]="currentLayer"
@@ -22,4 +22,4 @@
             </p>
         </div>
     </div>
-</template>
\ No newline at end of file
+</ng-template>
\ No newline at end of file
diff --git a/shared/src/components/svg/wrap/svg-keyboard-wrap.component.ts b/shared/src/components/svg/wrap/svg-keyboard-wrap.component.ts
index b22d4e09..00608e22 100644
--- a/shared/src/components/svg/wrap/svg-keyboard-wrap.component.ts
+++ b/shared/src/components/svg/wrap/svg-keyboard-wrap.component.ts
@@ -119,7 +119,8 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
         if (keymapChanges) {
             this.popoverShown = false;
             this.layers = this.keymap.layers;
-            if (keymapChanges.previousValue.abbreviation !== keymapChanges.currentValue.abbreviation) {
+            if (keymapChanges.isFirstChange() ||
+                keymapChanges.previousValue.abbreviation !== keymapChanges.currentValue.abbreviation) {
                 this.currentLayer = 0;
                 this.keybindAnimationEnabled = keymapChanges.isFirstChange();
             } else {
diff --git a/web/src/app.module.ts b/web/src/app.module.ts
index 528b2a69..95da9dc5 100644
--- a/web/src/app.module.ts
+++ b/web/src/app.module.ts
@@ -1,6 +1,7 @@
 import { NgModule, ReflectiveInjector } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { EffectsModule } from '@ngrx/effects';
 import { StoreModule } from '@ngrx/store';
@@ -135,6 +136,7 @@ const storeConfig = {
     ],
     imports: [
         BrowserModule,
+        BrowserAnimationsModule,
         FormsModule,
         DragulaModule,
         routing,