diff --git a/electron/src/components/keymap/edit/keymap-edit.component.ts b/electron/src/components/keymap/edit/keymap-edit.component.ts
index 343716c9..1cece636 100644
--- a/electron/src/components/keymap/edit/keymap-edit.component.ts
+++ b/electron/src/components/keymap/edit/keymap-edit.component.ts
@@ -19,8 +19,8 @@ import { UhkDeviceService } from '../../../services/uhk-device.service';
 
 @Component({
     selector: 'keymap-edit',
-    template: require('../../../shared/components/keymap/edit/keymap-edit.component.html'),
-    styles: [require('../../../shared/components/keymap/edit/keymap-edit.component.scss')],
+    templateUrl: '../../../shared/components/keymap/edit/keymap-edit.component.html',
+    styleUrls: ['../../../shared/components/keymap/edit/keymap-edit.component.scss'],
     host: {
         'class': 'container-fluid'
     }
diff --git a/electron/src/main-app/main-app.component.ts b/electron/src/main-app/main-app.component.ts
index f973ceb6..91d1b110 100644
--- a/electron/src/main-app/main-app.component.ts
+++ b/electron/src/main-app/main-app.component.ts
@@ -14,8 +14,8 @@ import { Component, ViewEncapsulation, HostListener } from '@angular/core';
 
 @Component({
     selector: 'main-app',
-    template: require('../shared/main-app/main-app.component.html'),
-    styles: [require('../shared/main-app/main-app.component.scss')],
+    templateUrl: '../shared/main-app/main-app.component.html',
+    styleUrls: ['../shared/main-app/main-app.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class MainAppComponent {
diff --git a/electron/src/webpack.config.js b/electron/src/webpack.config.js
index 73d239fb..aa1eecf1 100644
--- a/electron/src/webpack.config.js
+++ b/electron/src/webpack.config.js
@@ -32,7 +32,7 @@ module.exports = {
     },
     module: {
         loaders: [
-            { test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules/ },
+            { test: /\.ts$/, loaders: ['ts-loader', 'angular2-template-loader'], exclude: /node_modules/ },
             { test: /\.html$/, loader: 'html-loader?attrs=false' },
             {
                 test: /\.scss$/,
diff --git a/package.json b/package.json
index 39ed5675..978b4b20 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@types/jquery": "^2.0.40",
     "@types/node": "^7.0.5",
     "@types/usb": "^1.1.2",
+    "angular2-template-loader": "0.6.0",
     "copy-webpack-plugin": "^4.0.1",
     "electron": "1.4.15",
     "electron-rebuild": "^1.5.5",
diff --git a/shared/src/components/add-on/add-on.component.ts b/shared/src/components/add-on/add-on.component.ts
index 50cd98c4..e76aea84 100644
--- a/shared/src/components/add-on/add-on.component.ts
+++ b/shared/src/components/add-on/add-on.component.ts
@@ -5,8 +5,8 @@ import { Observable } from 'rxjs/Observable';
 
 @Component({
     selector: 'add-on',
-    template: require('./add-on.component.html'),
-    styles: [require('./add-on.component.scss')],
+    templateUrl: './add-on.component.html',
+    styleUrls: ['./add-on.component.scss'],
     host: {
         'class': 'container-fluid'
     }
diff --git a/shared/src/components/keyboard/slider/keyboard-slider.component.ts b/shared/src/components/keyboard/slider/keyboard-slider.component.ts
index 58e76537..9359195f 100644
--- a/shared/src/components/keyboard/slider/keyboard-slider.component.ts
+++ b/shared/src/components/keyboard/slider/keyboard-slider.component.ts
@@ -24,8 +24,8 @@ type AnimationKeyboard =
 
 @Component({
     selector: 'keyboard-slider',
-    template: require('./keyboard-slider.component.html'),
-    styles: [require('./keyboard-slider.component.scss')],
+    templateUrl: './keyboard-slider.component.html',
+    styleUrls: ['./keyboard-slider.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     // We use 101%, because there was still a trace of the keyboard in the screen when animation was done
     animations: [
diff --git a/shared/src/components/keymap/add/keymap-add.component.ts b/shared/src/components/keymap/add/keymap-add.component.ts
index ad9f57f5..2f076ab7 100644
--- a/shared/src/components/keymap/add/keymap-add.component.ts
+++ b/shared/src/components/keymap/add/keymap-add.component.ts
@@ -12,8 +12,8 @@ import { KeymapActions } from '../../../store/actions';
 
 @Component({
     selector: 'keymap-add',
-    template: require('./keymap-add.component.html'),
-    styles: [require('./keymap-add.component.scss')],
+    templateUrl: './keymap-add.component.html',
+    styleUrls: ['./keymap-add.component.scss'],
     host: {
         'class': 'container-fluid'
     }
diff --git a/shared/src/components/keymap/edit/keymap-edit.component.ts b/shared/src/components/keymap/edit/keymap-edit.component.ts
index c895c13b..ac27e2c0 100644
--- a/shared/src/components/keymap/edit/keymap-edit.component.ts
+++ b/shared/src/components/keymap/edit/keymap-edit.component.ts
@@ -15,8 +15,8 @@ import { getKeymap, getKeymapEntities } from '../../../store/reducers/keymap';
 
 @Component({
     selector: 'keymap-edit',
-    template: require('./keymap-edit.component.html'),
-    styles: [require('./keymap-edit.component.scss')],
+    templateUrl: './keymap-edit.component.html',
+    styleUrls: ['./keymap-edit.component.scss'],
     host: {
         'class': 'container-fluid'
     }
diff --git a/shared/src/components/keymap/header/keymap-header.component.ts b/shared/src/components/keymap/header/keymap-header.component.ts
index b4156d3a..7ed69ba1 100644
--- a/shared/src/components/keymap/header/keymap-header.component.ts
+++ b/shared/src/components/keymap/header/keymap-header.component.ts
@@ -18,8 +18,8 @@ import { KeymapActions } from '../../../store/actions';
 
 @Component({
     selector: 'keymap-header',
-    template: require('./keymap-header.component.html'),
-    styles: [require('./keymap-header.component.scss')],
+    templateUrl: './keymap-header.component.html',
+    styleUrls: ['./keymap-header.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class KeymapHeaderComponent implements OnChanges {
diff --git a/shared/src/components/layers/layers.component.ts b/shared/src/components/layers/layers.component.ts
index 8844a687..255aa4d3 100644
--- a/shared/src/components/layers/layers.component.ts
+++ b/shared/src/components/layers/layers.component.ts
@@ -2,8 +2,8 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
     selector: 'layers',
-    template: require('./layers.component.html'),
-    styles: [require('./layers.component.scss')]
+    templateUrl: './layers.component.html',
+    styleUrls: ['./layers.component.scss']
 })
 export class LayersComponent {
     @Input() current: number;
diff --git a/shared/src/components/macro/action-editor/macro-action-editor.component.ts b/shared/src/components/macro/action-editor/macro-action-editor.component.ts
index 7d131af1..d0124160 100644
--- a/shared/src/components/macro/action-editor/macro-action-editor.component.ts
+++ b/shared/src/components/macro/action-editor/macro-action-editor.component.ts
@@ -17,8 +17,8 @@ enum TabName {
 
 @Component({
     selector: 'macro-action-editor',
-    template: require('./macro-action-editor.component.html'),
-    styles: [require('./macro-action-editor.component.scss')],
+    templateUrl: './macro-action-editor.component.html',
+    styleUrls: ['./macro-action-editor.component.scss'],
     host: { 'class': 'macro-action-editor' }
 })
 export class MacroActionEditorComponent implements OnInit {
diff --git a/shared/src/components/macro/action-editor/tab/delay/macro-delay.component.ts b/shared/src/components/macro/action-editor/tab/delay/macro-delay.component.ts
index 57218fae..1dce0c8f 100644
--- a/shared/src/components/macro/action-editor/tab/delay/macro-delay.component.ts
+++ b/shared/src/components/macro/action-editor/tab/delay/macro-delay.component.ts
@@ -13,8 +13,8 @@ const INITIAL_DELAY = 0.5; // In seconds
 
 @Component({
     selector: 'macro-delay-tab',
-    template: require('./macro-delay.component.html'),
-    styles: [require('./macro-delay.component.scss')],
+    templateUrl: './macro-delay.component.html',
+    styleUrls: ['./macro-delay.component.scss'],
     host: { 'class': 'macro__delay' },
     changeDetection: ChangeDetectionStrategy.OnPush
 })
diff --git a/shared/src/components/macro/action-editor/tab/key/macro-key.component.ts b/shared/src/components/macro/action-editor/tab/key/macro-key.component.ts
index 1e3f0921..bf1fc7a1 100644
--- a/shared/src/components/macro/action-editor/tab/key/macro-key.component.ts
+++ b/shared/src/components/macro/action-editor/tab/key/macro-key.component.ts
@@ -13,10 +13,10 @@ enum TabName {
 
 @Component({
     selector: 'macro-key-tab',
-    template: require('./macro-key.component.html'),
-    styles: [
-        require('../../macro-action-editor.component.scss'),
-        require('./macro-key.component.scss')
+    templateUrl: './macro-key.component.html',
+    styleUrls: [
+        '../../macro-action-editor.component.scss',
+        './macro-key.component.scss'
     ],
     host: { 'class': 'macro__mouse' }
 })
diff --git a/shared/src/components/macro/action-editor/tab/mouse/macro-mouse.component.ts b/shared/src/components/macro/action-editor/tab/mouse/macro-mouse.component.ts
index a0b3f468..163570ed 100644
--- a/shared/src/components/macro/action-editor/tab/mouse/macro-mouse.component.ts
+++ b/shared/src/components/macro/action-editor/tab/mouse/macro-mouse.component.ts
@@ -13,10 +13,10 @@ enum TabName {
 
 @Component({
     selector: 'macro-mouse-tab',
-    template: require('./macro-mouse.component.html'),
-    styles: [
-        require('../../macro-action-editor.component.scss'),
-        require('./macro-mouse.component.scss')
+    templateUrl: './macro-mouse.component.html',
+    styleUrls: [
+        '../../macro-action-editor.component.scss',
+        './macro-mouse.component.scss'
     ],
     host: { 'class': 'macro__mouse' }
 })
diff --git a/shared/src/components/macro/action-editor/tab/text/macro-text.component.ts b/shared/src/components/macro/action-editor/tab/text/macro-text.component.ts
index c68720ee..43e99c80 100644
--- a/shared/src/components/macro/action-editor/tab/text/macro-text.component.ts
+++ b/shared/src/components/macro/action-editor/tab/text/macro-text.component.ts
@@ -11,8 +11,8 @@ import { EditableMacroAction } from '../../../../../config-serializer/config-ite
 
 @Component({
     selector: 'macro-text-tab',
-    template: require('./macro-text.component.html'),
-    styles: [require('./macro-text.component.scss')],
+    templateUrl: './macro-text.component.html',
+    styleUrls: ['./macro-text.component.scss'],
     host: { 'class': 'macro__text' }
 })
 export class MacroTextTabComponent implements AfterViewInit {
diff --git a/shared/src/components/macro/edit/macro-edit.component.ts b/shared/src/components/macro/edit/macro-edit.component.ts
index fadc307f..ffbfb156 100644
--- a/shared/src/components/macro/edit/macro-edit.component.ts
+++ b/shared/src/components/macro/edit/macro-edit.component.ts
@@ -14,8 +14,8 @@ import { getMacro } from '../../../store/reducers/macro';
 
 @Component({
     selector: 'macro-edit',
-    template: require('./macro-edit.component.html'),
-    styles: [require('./macro-edit.component.scss')],
+    templateUrl: './macro-edit.component.html',
+    styleUrls: ['./macro-edit.component.scss'],
     host: {
         'class': 'container-fluid'
     }
diff --git a/shared/src/components/macro/header/macro-header.component.ts b/shared/src/components/macro/header/macro-header.component.ts
index bfe540a0..df76a7d5 100644
--- a/shared/src/components/macro/header/macro-header.component.ts
+++ b/shared/src/components/macro/header/macro-header.component.ts
@@ -12,8 +12,8 @@ import { AppState } from '../../../store/index';
 
 @Component({
     selector: 'macro-header',
-    template: require('./macro-header.component.html'),
-    styles: [require('./macro-header.component.scss')],
+    templateUrl: './macro-header.component.html',
+    styleUrls: ['./macro-header.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MacroHeaderComponent implements AfterViewInit, OnChanges {
diff --git a/shared/src/components/macro/item/macro-item.component.ts b/shared/src/components/macro/item/macro-item.component.ts
index 321d2093..3069e203 100644
--- a/shared/src/components/macro/item/macro-item.component.ts
+++ b/shared/src/components/macro/item/macro-item.component.ts
@@ -39,8 +39,8 @@ import { MapperService } from '../../../services/mapper.service';
         ])
     ],
     selector: 'macro-item',
-    template: require('./macro-item.component.html'),
-    styles: [require('./macro-item.component.scss')],
+    templateUrl: './macro-item.component.html',
+    styleUrls: ['./macro-item.component.scss'],
     host: { 'class': 'macro-item' }
 })
 export class MacroItemComponent implements OnInit, OnChanges {
diff --git a/shared/src/components/macro/list/macro-list.component.ts b/shared/src/components/macro/list/macro-list.component.ts
index 793de9e0..8ff5bc0e 100644
--- a/shared/src/components/macro/list/macro-list.component.ts
+++ b/shared/src/components/macro/list/macro-list.component.ts
@@ -42,8 +42,8 @@ import { MacroItemComponent } from './../index';
         ])
     ],
     selector: 'macro-list',
-    template: require('./macro-list.component.html'),
-    styles: [require('./macro-list.component.scss')],
+    templateUrl: './macro-list.component.html',
+    styleUrls: ['./macro-list.component.scss'],
     viewProviders: [DragulaService]
 })
 export class MacroListComponent {
diff --git a/shared/src/components/macro/not-found/macro-not-found.component.ts b/shared/src/components/macro/not-found/macro-not-found.component.ts
index ccd0b18f..7f954f29 100644
--- a/shared/src/components/macro/not-found/macro-not-found.component.ts
+++ b/shared/src/components/macro/not-found/macro-not-found.component.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'macro-not-found',
-    template: require('./macro-not-found.component.html'),
-    styles: [require('./macro-not-found.component.scss')]
+    templateUrl: './macro-not-found.component.html',
+    styleUrls: ['./macro-not-found.component.scss']
 })
 export class MacroNotFoundComponent { }
diff --git a/shared/src/components/notification/notification.component.ts b/shared/src/components/notification/notification.component.ts
index 754d0a3b..16eb8f42 100644
--- a/shared/src/components/notification/notification.component.ts
+++ b/shared/src/components/notification/notification.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'notification',
-    template: require('./notification.component.html'),
-    styles: [require('./notification.component.scss')]
+    templateUrl: './notification.component.html',
+    styleUrls: ['./notification.component.scss']
 })
 export class NotificationComponent {
 
diff --git a/shared/src/components/popover/popover.component.ts b/shared/src/components/popover/popover.component.ts
index 5b334460..f52629c5 100644
--- a/shared/src/components/popover/popover.component.ts
+++ b/shared/src/components/popover/popover.component.ts
@@ -32,8 +32,8 @@ enum TabName {
 
 @Component({
     selector: 'popover',
-    template: require('./popover.component.html'),
-    styles: [require('./popover.component.scss')],
+    templateUrl: './popover.component.html',
+    styleUrls: ['./popover.component.scss'],
     animations: [
         trigger('popover', [
             state('closed', style({
diff --git a/shared/src/components/popover/tab/keymap/keymap-tab.component.ts b/shared/src/components/popover/tab/keymap/keymap-tab.component.ts
index 327a45a9..abb7d5a8 100644
--- a/shared/src/components/popover/tab/keymap/keymap-tab.component.ts
+++ b/shared/src/components/popover/tab/keymap/keymap-tab.component.ts
@@ -8,8 +8,8 @@ import { Tab } from '../tab';
 
 @Component({
     selector: 'keymap-tab',
-    template: require('./keymap-tab.component.html'),
-    styles: [require('./keymap-tab.component.scss')],
+    templateUrl: './keymap-tab.component.html',
+    styleUrls: ['./keymap-tab.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class KeymapTabComponent extends Tab implements OnInit, OnChanges {
diff --git a/shared/src/components/popover/tab/keypress/keypress-tab.component.ts b/shared/src/components/popover/tab/keypress/keypress-tab.component.ts
index 013a4135..a6d17034 100644
--- a/shared/src/components/popover/tab/keypress/keypress-tab.component.ts
+++ b/shared/src/components/popover/tab/keypress/keypress-tab.component.ts
@@ -9,8 +9,8 @@ import { MapperService } from '../../../../services/mapper.service';
 
 @Component({
     selector: 'keypress-tab',
-    template: require('./keypress-tab.component.html'),
-    styles: [require('./keypress-tab.component.scss')]
+    templateUrl: './keypress-tab.component.html',
+    styleUrls: ['./keypress-tab.component.scss']
 })
 export class KeypressTabComponent extends Tab implements OnChanges {
     @Input() defaultKeyAction: KeyAction;
diff --git a/shared/src/components/popover/tab/layer/layer-tab.component.ts b/shared/src/components/popover/tab/layer/layer-tab.component.ts
index 38d18963..636d7f42 100644
--- a/shared/src/components/popover/tab/layer/layer-tab.component.ts
+++ b/shared/src/components/popover/tab/layer/layer-tab.component.ts
@@ -6,8 +6,8 @@ import { Tab } from '../tab';
 
 @Component({
     selector: 'layer-tab',
-    template: require('./layer-tab.component.html'),
-    styles: [require('./layer-tab.component.scss')]
+    templateUrl: './layer-tab.component.html',
+    styleUrls: ['./layer-tab.component.scss']
 })
 export class LayerTabComponent extends Tab implements OnChanges {
     @Input() defaultKeyAction: KeyAction;
diff --git a/shared/src/components/popover/tab/macro/macro-tab.component.ts b/shared/src/components/popover/tab/macro/macro-tab.component.ts
index 130b77f0..dada22b4 100644
--- a/shared/src/components/popover/tab/macro/macro-tab.component.ts
+++ b/shared/src/components/popover/tab/macro/macro-tab.component.ts
@@ -16,8 +16,8 @@ import { getMacroEntities } from '../../../../store/reducers/macro';
 
 @Component({
     selector: 'macro-tab',
-    template: require('./macro-tab.component.html'),
-    styles: [require('./macro-tab.component.scss')]
+    templateUrl: './macro-tab.component.html',
+    styleUrls: ['./macro-tab.component.scss']
 })
 export class MacroTabComponent extends Tab implements OnInit, OnChanges, OnDestroy {
     @Input() defaultKeyAction: KeyAction;
diff --git a/shared/src/components/popover/tab/mouse/mouse-tab.component.ts b/shared/src/components/popover/tab/mouse/mouse-tab.component.ts
index 05db35a2..9a4f7c7b 100644
--- a/shared/src/components/popover/tab/mouse/mouse-tab.component.ts
+++ b/shared/src/components/popover/tab/mouse/mouse-tab.component.ts
@@ -5,8 +5,8 @@ import { Tab } from '../tab';
 
 @Component({
     selector: 'mouse-tab',
-    template: require('./mouse-tab.component.html'),
-    styles: [require('./mouse-tab.component.scss')]
+    templateUrl: './mouse-tab.component.html',
+    styleUrls: ['./mouse-tab.component.scss']
 })
 export class MouseTabComponent extends Tab implements OnChanges {
     @Input() defaultKeyAction: KeyAction;
diff --git a/shared/src/components/popover/tab/none/none-tab.component.ts b/shared/src/components/popover/tab/none/none-tab.component.ts
index 55105afb..3bdb9b62 100644
--- a/shared/src/components/popover/tab/none/none-tab.component.ts
+++ b/shared/src/components/popover/tab/none/none-tab.component.ts
@@ -4,8 +4,8 @@ import { Tab } from '../tab';
 
 @Component({
     selector: 'none-tab',
-    template: require('./none-tab.component.html'),
-    styles: [require('./none-tab.component.scss')]
+    templateUrl: './none-tab.component.html',
+    styleUrls: ['./none-tab.component.scss']
 })
 export class NoneTabComponent extends Tab implements OnChanges {
     ngOnChanges(event: any) {
diff --git a/shared/src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.ts b/shared/src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.ts
index c89b2d3b..db1500b0 100644
--- a/shared/src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.ts
+++ b/shared/src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.ts
@@ -3,8 +3,8 @@ import { CaptureService } from '../../../../services/capture.service';
 
 @Component({
     selector: 'capture-keystroke-button',
-    template: require('./capture-keystroke-button.component.html'),
-    styles: [require('./capture-keystroke-button.component.scss')]
+    templateUrl: './capture-keystroke-button.component.html',
+    styleUrls: ['./capture-keystroke-button.component.scss']
 })
 export class CaptureKeystrokeButtonComponent {
     @Output() capture = new EventEmitter<any>();
diff --git a/shared/src/components/popover/widgets/icon/icon.component.ts b/shared/src/components/popover/widgets/icon/icon.component.ts
index 4581d023..d5ada07d 100644
--- a/shared/src/components/popover/widgets/icon/icon.component.ts
+++ b/shared/src/components/popover/widgets/icon/icon.component.ts
@@ -2,8 +2,8 @@ import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
     selector: 'icon',
-    template: require('./icon.component.html'),
-    styles: [require('./icon.component.scss')]
+    templateUrl: './icon.component.html',
+    styleUrls: ['./icon.component.scss']
 })
 export class IconComponent implements OnInit {
 
diff --git a/shared/src/components/settings/settings.component.ts b/shared/src/components/settings/settings.component.ts
index 0bc85408..78d7c210 100644
--- a/shared/src/components/settings/settings.component.ts
+++ b/shared/src/components/settings/settings.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'settings',
-    template: require('./settings.component.html'),
-    styles: [require('./settings.component.scss')],
+    templateUrl: './settings.component.html',
+    styleUrls: ['./settings.component.scss'],
     host: {
         'class': 'container-fluid'
     }
diff --git a/shared/src/components/side-menu/side-menu.component.ts b/shared/src/components/side-menu/side-menu.component.ts
index 8c141c9b..64e315c5 100644
--- a/shared/src/components/side-menu/side-menu.component.ts
+++ b/shared/src/components/side-menu/side-menu.component.ts
@@ -26,8 +26,8 @@ import { getKeymapEntities, getMacroEntities } from '../../store/reducers';
         ])
     ],
     selector: 'side-menu',
-    template: require('./side-menu.component.html'),
-    styles: [require('./side-menu.component.scss')]
+    templateUrl: './side-menu.component.html',
+    styleUrls: ['./side-menu.component.scss']
 })
 export class SideMenuComponent {
     private keymaps$: Observable<Keymap[]>;
diff --git a/shared/src/components/svg/keyboard/svg-keyboard.component.ts b/shared/src/components/svg/keyboard/svg-keyboard.component.ts
index 27c60bd1..1ff477da 100644
--- a/shared/src/components/svg/keyboard/svg-keyboard.component.ts
+++ b/shared/src/components/svg/keyboard/svg-keyboard.component.ts
@@ -5,8 +5,8 @@ import { SvgModule } from '../module';
 
 @Component({
     selector: 'svg-keyboard',
-    template: require('./svg-keyboard.component.html'),
-    styles: [require('./svg-keyboard.component.scss')]
+    templateUrl: './svg-keyboard.component.html',
+    styleUrls: ['./svg-keyboard.component.scss']
 })
 export class SvgKeyboardComponent implements OnInit {
     @Input() moduleConfig: Module[];
diff --git a/shared/src/components/svg/keys/svg-icon-text-key/svg-icon-text-key.component.ts b/shared/src/components/svg/keys/svg-icon-text-key/svg-icon-text-key.component.ts
index 2932871c..12b296f9 100644
--- a/shared/src/components/svg/keys/svg-icon-text-key/svg-icon-text-key.component.ts
+++ b/shared/src/components/svg/keys/svg-icon-text-key/svg-icon-text-key.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
     selector: 'g[svg-icon-text-key]',
-    template: require('./svg-icon-text-key.component.html')
+    templateUrl: './svg-icon-text-key.component.html'
 })
 export class SvgIconTextKeyComponent implements OnInit {
     @Input() width: number;
diff --git a/shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts b/shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts
index 94980d3c..0aa78440 100644
--- a/shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts
+++ b/shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts
@@ -59,8 +59,8 @@ enum LabelTypes {
         ])
     ],
     selector: 'g[svg-keyboard-key]',
-    template: require('./svg-keyboard-key.component.html'),
-    styles: [require('./svg-keyboard-key.component.scss')]
+    templateUrl: './svg-keyboard-key.component.html',
+    styleUrls: ['./svg-keyboard-key.component.scss']
 })
 export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
     @Input() id: string;
diff --git a/shared/src/components/svg/keys/svg-keystroke-key/svg-keystroke-key.component.ts b/shared/src/components/svg/keys/svg-keystroke-key/svg-keystroke-key.component.ts
index 5c14e052..5a406017 100644
--- a/shared/src/components/svg/keys/svg-keystroke-key/svg-keystroke-key.component.ts
+++ b/shared/src/components/svg/keys/svg-keystroke-key/svg-keystroke-key.component.ts
@@ -26,8 +26,8 @@ enum Modifiers {
 
 @Component({
     selector: 'g[svg-keystroke-key]',
-    template: require('./svg-keystroke-key.component.html'),
-    styles: [require('./svg-keystroke-key.component.scss')]
+    templateUrl: './svg-keystroke-key.component.html',
+    styleUrls: ['./svg-keystroke-key.component.scss']
 })
 export class SvgKeystrokeKeyComponent implements OnInit, OnChanges {
     @Input() height: number;
diff --git a/shared/src/components/svg/keys/svg-mouse-click-key/svg-mouse-click-key.ts b/shared/src/components/svg/keys/svg-mouse-click-key/svg-mouse-click-key.ts
index 095a4907..577ca449 100644
--- a/shared/src/components/svg/keys/svg-mouse-click-key/svg-mouse-click-key.ts
+++ b/shared/src/components/svg/keys/svg-mouse-click-key/svg-mouse-click-key.ts
@@ -4,7 +4,7 @@ import { MapperService } from '../../../../services/mapper.service';
 
 @Component({
     selector: 'g[svg-mouse-click-key]',
-    template: require('./svg-mouse-click-key.html')
+    templateUrl: './svg-mouse-click-key.html'
 })
 export class SvgMouseClickKeyComponent implements OnInit {
     @Input() button: string;
diff --git a/shared/src/components/svg/keys/svg-mouse-key/svg-mouse-key.ts b/shared/src/components/svg/keys/svg-mouse-key/svg-mouse-key.ts
index a868b624..61573e77 100644
--- a/shared/src/components/svg/keys/svg-mouse-key/svg-mouse-key.ts
+++ b/shared/src/components/svg/keys/svg-mouse-key/svg-mouse-key.ts
@@ -4,7 +4,7 @@ import { MouseAction, MouseActionParam } from '../../../../config-serializer/con
 
 @Component({
     selector: 'g[svg-mouse-key]',
-    template: require('./svg-mouse-key.html')
+    templateUrl: './svg-mouse-key.html'
 })
 export class SvgMouseKeyComponent implements OnChanges {
     @Input() mouseAction: MouseAction;
diff --git a/shared/src/components/svg/keys/svg-mouse-move-key/svg-mouse-move-key.ts b/shared/src/components/svg/keys/svg-mouse-move-key/svg-mouse-move-key.ts
index 6fb6120a..4ba6bddc 100644
--- a/shared/src/components/svg/keys/svg-mouse-move-key/svg-mouse-move-key.ts
+++ b/shared/src/components/svg/keys/svg-mouse-move-key/svg-mouse-move-key.ts
@@ -4,7 +4,7 @@ import { MapperService } from '../../../../services/mapper.service';
 
 @Component({
     selector: 'g[svg-mouse-move-key]',
-    template: require('./svg-mouse-move-key.html')
+    templateUrl: './svg-mouse-move-key.html'
 })
 export class SvgMouseMoveKeyComponent implements OnChanges {
     @Input() direction: string;
diff --git a/shared/src/components/svg/keys/svg-mouse-scroll-key/svg-mouse-scroll-key.ts b/shared/src/components/svg/keys/svg-mouse-scroll-key/svg-mouse-scroll-key.ts
index 60da19ae..6db331b3 100644
--- a/shared/src/components/svg/keys/svg-mouse-scroll-key/svg-mouse-scroll-key.ts
+++ b/shared/src/components/svg/keys/svg-mouse-scroll-key/svg-mouse-scroll-key.ts
@@ -4,7 +4,7 @@ import { MapperService } from '../../../../services/mapper.service';
 
 @Component({
     selector: 'g[svg-mouse-scroll-key]',
-    template: require('./svg-mouse-scroll-key.html')
+    templateUrl: './svg-mouse-scroll-key.html'
 })
 export class SvgMouseScrollKeyComponent implements OnChanges {
     @Input() direction: string;
diff --git a/shared/src/components/svg/keys/svg-mouse-speed-key/svg-mouse-speed-key.ts b/shared/src/components/svg/keys/svg-mouse-speed-key/svg-mouse-speed-key.ts
index dd247ed9..e3dcd0f4 100644
--- a/shared/src/components/svg/keys/svg-mouse-speed-key/svg-mouse-speed-key.ts
+++ b/shared/src/components/svg/keys/svg-mouse-speed-key/svg-mouse-speed-key.ts
@@ -4,7 +4,7 @@ import { MapperService } from '../../../../services/mapper.service';
 
 @Component({
     selector: 'g[svg-mouse-speed-key]',
-    template: require('./svg-mouse-speed-key.html')
+    templateUrl: './svg-mouse-speed-key.html'
 })
 export class SvgMouseSpeedKeyComponent implements OnChanges {
     @Input() plus: boolean;
diff --git a/shared/src/components/svg/keys/svg-one-line-text-key/svg-one-line-text-key.component.ts b/shared/src/components/svg/keys/svg-one-line-text-key/svg-one-line-text-key.component.ts
index ce80dd05..9ae37515 100644
--- a/shared/src/components/svg/keys/svg-one-line-text-key/svg-one-line-text-key.component.ts
+++ b/shared/src/components/svg/keys/svg-one-line-text-key/svg-one-line-text-key.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
     selector: 'g[svg-one-line-text-key]',
-    template: require('./svg-one-line-text-key.component.html')
+    templateUrl: './svg-one-line-text-key.component.html'
 })
 export class SvgOneLineTextKeyComponent implements OnInit {
     @Input() height: number;
diff --git a/shared/src/components/svg/keys/svg-single-icon-key/svg-single-icon-key.component.ts b/shared/src/components/svg/keys/svg-single-icon-key/svg-single-icon-key.component.ts
index a8a9137a..0baa735b 100644
--- a/shared/src/components/svg/keys/svg-single-icon-key/svg-single-icon-key.component.ts
+++ b/shared/src/components/svg/keys/svg-single-icon-key/svg-single-icon-key.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
     selector: 'g[svg-single-icon-key]',
-    template: require('./svg-single-icon-key.component.html')
+    templateUrl: './svg-single-icon-key.component.html'
 })
 export class SvgSingleIconKeyComponent implements OnInit {
     @Input() width: number;
diff --git a/shared/src/components/svg/keys/svg-switch-keymap-key/svg-switch-keymap-key.component.ts b/shared/src/components/svg/keys/svg-switch-keymap-key/svg-switch-keymap-key.component.ts
index 89f4c8df..994eff59 100644
--- a/shared/src/components/svg/keys/svg-switch-keymap-key/svg-switch-keymap-key.component.ts
+++ b/shared/src/components/svg/keys/svg-switch-keymap-key/svg-switch-keymap-key.component.ts
@@ -4,7 +4,7 @@ import { MapperService } from '../../../../services/mapper.service';
 
 @Component({
     selector: 'g[svg-switch-keymap-key]',
-    template: require('./svg-switch-keymap-key.component.html')
+    templateUrl: './svg-switch-keymap-key.component.html'
 })
 export class SvgSwitchKeymapKeyComponent implements OnInit {
     @Input() width: number;
diff --git a/shared/src/components/svg/keys/svg-text-icon-key/svg-text-icon-key.component.ts b/shared/src/components/svg/keys/svg-text-icon-key/svg-text-icon-key.component.ts
index 702938ab..dac5b0c8 100644
--- a/shared/src/components/svg/keys/svg-text-icon-key/svg-text-icon-key.component.ts
+++ b/shared/src/components/svg/keys/svg-text-icon-key/svg-text-icon-key.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
     selector: 'g[svg-text-icon-key]',
-    template: require('./svg-text-icon-key.component.html')
+    templateUrl: './svg-text-icon-key.component.html'
 })
 export class SvgTextIconKeyComponent implements OnInit {
     @Input() width: number;
diff --git a/shared/src/components/svg/keys/svg-two-line-text-key/svg-two-line-text-key.component.ts b/shared/src/components/svg/keys/svg-two-line-text-key/svg-two-line-text-key.component.ts
index c05723e9..7a21a4fe 100644
--- a/shared/src/components/svg/keys/svg-two-line-text-key/svg-two-line-text-key.component.ts
+++ b/shared/src/components/svg/keys/svg-two-line-text-key/svg-two-line-text-key.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
     selector: 'g[svg-two-line-text-key]',
-    template: require('./svg-two-line-text-key.component.html')
+    templateUrl: './svg-two-line-text-key.component.html'
 })
 export class SvgTwoLineTextKeyComponent implements OnInit {
     @Input() height: number;
diff --git a/shared/src/components/svg/module/svg-module.component.ts b/shared/src/components/svg/module/svg-module.component.ts
index ab17db8d..7880d01c 100644
--- a/shared/src/components/svg/module/svg-module.component.ts
+++ b/shared/src/components/svg/module/svg-module.component.ts
@@ -6,8 +6,8 @@ import { SvgKeyboardKey } from '../keys';
 
 @Component({
     selector: 'g[svg-module]',
-    template: require('./svg-module.component.html'),
-    styles: [require('./svg-module.component.scss')]
+    templateUrl: './svg-module.component.html',
+    styleUrls: ['./svg-module.component.scss']
 })
 export class SvgModuleComponent {
     @Input() coverages: any[];
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 ffcfad4a..26072231 100644
--- a/shared/src/components/svg/wrap/svg-keyboard-wrap.component.ts
+++ b/shared/src/components/svg/wrap/svg-keyboard-wrap.component.ts
@@ -45,8 +45,8 @@ interface NameValuePair {
 
 @Component({
     selector: 'svg-keyboard-wrap',
-    template: require('./svg-keyboard-wrap.component.html'),
-    styles: [require('./svg-keyboard-wrap.component.scss')],
+    templateUrl: './svg-keyboard-wrap.component.html',
+    styleUrls: ['./svg-keyboard-wrap.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
diff --git a/web/src/main-app/main-app.component.ts b/web/src/main-app/main-app.component.ts
index 795ba321..cd852683 100644
--- a/web/src/main-app/main-app.component.ts
+++ b/web/src/main-app/main-app.component.ts
@@ -2,8 +2,8 @@ import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
     selector: 'main-app',
-    template: require('../shared/main-app/main-app.component.html'),
-    styles: [require('../shared/main-app/main-app.component.scss')],
+    templateUrl: '../shared/main-app/main-app.component.html',
+    styleUrls: ['../shared/main-app/main-app.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class MainAppComponent { }
diff --git a/web/src/webpack.config.js b/web/src/webpack.config.js
index ecaa758a..bc39e051 100644
--- a/web/src/webpack.config.js
+++ b/web/src/webpack.config.js
@@ -29,7 +29,7 @@ module.exports = {
     },
     module: {
         loaders: [
-            { test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules/ },
+            { test: /\.ts$/, loaders: ['ts-loader', 'angular2-template-loader'], exclude: /node_modules/ },
             { test: /\.html$/, loader: 'html-loader?attrs=false' },
             {
                 test: /\.scss$/,