Replace template/styles with templateUrl/styleUrls

2017-02-05 21:39:18 +01:00
parent 604e9cb2b0
commit bd05da4316
50 changed files with 90 additions and 89 deletions
--- 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'
    }
--- 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 {
--- 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$/,
--- 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",
--- 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'
    }
--- 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: [
--- 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'
    }
--- 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'
    }
--- 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 {
--- 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;
--- 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 {
--- 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
 })
--- 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' }
 })
--- 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' }
 })
--- 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 {
--- 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'
    }
--- 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 {
--- 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 {
--- 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 {
--- 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 { }
--- 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 {

--- 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({
--- 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 {
--- 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;
--- 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;
--- 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;
--- 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;
--- 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) {
--- 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>();
--- 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 {

--- 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'
    }
--- 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[]>;
--- 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[];
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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[];
--- 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 {
--- 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 { }
--- 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$/,