Replace template/styles with templateUrl/styleUrls

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'),
+    templateUrl: '../../../shared/components/keymap/edit/keymap-edit.component.html',
-    styles: [require('../../../shared/components/keymap/edit/keymap-edit.component.scss')],
+    styleUrls: ['../../../shared/components/keymap/edit/keymap-edit.component.scss'],
     host: {
         'class': 'container-fluid'
     }

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'),
+    templateUrl: '../shared/main-app/main-app.component.html',
-    styles: [require('../shared/main-app/main-app.component.scss')],
+    styleUrls: ['../shared/main-app/main-app.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class MainAppComponent {

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$/,

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",

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'),
+    templateUrl: './add-on.component.html',
-    styles: [require('./add-on.component.scss')],
+    styleUrls: ['./add-on.component.scss'],
     host: {
         'class': 'container-fluid'
     }

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'),
+    templateUrl: './keyboard-slider.component.html',
-    styles: [require('./keyboard-slider.component.scss')],
+    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: [

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'),
+    templateUrl: './keymap-add.component.html',
-    styles: [require('./keymap-add.component.scss')],
+    styleUrls: ['./keymap-add.component.scss'],
     host: {
         'class': 'container-fluid'
     }

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'),
+    templateUrl: './keymap-edit.component.html',
-    styles: [require('./keymap-edit.component.scss')],
+    styleUrls: ['./keymap-edit.component.scss'],
     host: {
         'class': 'container-fluid'
     }

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'),
+    templateUrl: './keymap-header.component.html',
-    styles: [require('./keymap-header.component.scss')],
+    styleUrls: ['./keymap-header.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class KeymapHeaderComponent implements OnChanges {

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'),
+    templateUrl: './layers.component.html',
-    styles: [require('./layers.component.scss')]
+    styleUrls: ['./layers.component.scss']
 })
 export class LayersComponent {
     @Input() current: number;

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'),
+    templateUrl: './macro-action-editor.component.html',
-    styles: [require('./macro-action-editor.component.scss')],
+    styleUrls: ['./macro-action-editor.component.scss'],
     host: { 'class': 'macro-action-editor' }
 })
 export class MacroActionEditorComponent implements OnInit {

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'),
+    templateUrl: './macro-delay.component.html',
-    styles: [require('./macro-delay.component.scss')],
+    styleUrls: ['./macro-delay.component.scss'],
     host: { 'class': 'macro__delay' },
     changeDetection: ChangeDetectionStrategy.OnPush
 })

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'),
+    templateUrl: './macro-key.component.html',
-    styles: [
+    styleUrls: [
-        require('../../macro-action-editor.component.scss'),
+        '../../macro-action-editor.component.scss',
-        require('./macro-key.component.scss')
+        './macro-key.component.scss'
     ],
     host: { 'class': 'macro__mouse' }
 })

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'),
+    templateUrl: './macro-mouse.component.html',
-    styles: [
+    styleUrls: [
-        require('../../macro-action-editor.component.scss'),
+        '../../macro-action-editor.component.scss',
-        require('./macro-mouse.component.scss')
+        './macro-mouse.component.scss'
     ],
     host: { 'class': 'macro__mouse' }
 })

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'),
+    templateUrl: './macro-text.component.html',
-    styles: [require('./macro-text.component.scss')],
+    styleUrls: ['./macro-text.component.scss'],
     host: { 'class': 'macro__text' }
 })
 export class MacroTextTabComponent implements AfterViewInit {

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'),
+    templateUrl: './macro-edit.component.html',
-    styles: [require('./macro-edit.component.scss')],
+    styleUrls: ['./macro-edit.component.scss'],
     host: {
         'class': 'container-fluid'
     }

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'),
+    templateUrl: './macro-header.component.html',
-    styles: [require('./macro-header.component.scss')],
+    styleUrls: ['./macro-header.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MacroHeaderComponent implements AfterViewInit, OnChanges {

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'),
+    templateUrl: './macro-item.component.html',
-    styles: [require('./macro-item.component.scss')],
+    styleUrls: ['./macro-item.component.scss'],
     host: { 'class': 'macro-item' }
 })
 export class MacroItemComponent implements OnInit, OnChanges {

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'),
+    templateUrl: './macro-list.component.html',
-    styles: [require('./macro-list.component.scss')],
+    styleUrls: ['./macro-list.component.scss'],
     viewProviders: [DragulaService]
 })
 export class MacroListComponent {

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'),
+    templateUrl: './macro-not-found.component.html',
-    styles: [require('./macro-not-found.component.scss')]
+    styleUrls: ['./macro-not-found.component.scss']
 })
 export class MacroNotFoundComponent { }

shared/src/components/notification/notification.component.ts

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'notification',
-    template: require('./notification.component.html'),
+    templateUrl: './notification.component.html',
-    styles: [require('./notification.component.scss')]
+    styleUrls: ['./notification.component.scss']
 })
 export class NotificationComponent {
 

shared/src/components/popover/popover.component.ts

@@ -32,8 +32,8 @@ enum TabName {
 
 @Component({
     selector: 'popover',
-    template: require('./popover.component.html'),
+    templateUrl: './popover.component.html',
-    styles: [require('./popover.component.scss')],
+    styleUrls: ['./popover.component.scss'],
     animations: [
         trigger('popover', [
             state('closed', style({

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'),
+    templateUrl: './keymap-tab.component.html',
-    styles: [require('./keymap-tab.component.scss')],
+    styleUrls: ['./keymap-tab.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class KeymapTabComponent extends Tab implements OnInit, OnChanges {

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'),
+    templateUrl: './keypress-tab.component.html',
-    styles: [require('./keypress-tab.component.scss')]
+    styleUrls: ['./keypress-tab.component.scss']
 })
 export class KeypressTabComponent extends Tab implements OnChanges {
     @Input() defaultKeyAction: KeyAction;

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'),
+    templateUrl: './layer-tab.component.html',
-    styles: [require('./layer-tab.component.scss')]
+    styleUrls: ['./layer-tab.component.scss']
 })
 export class LayerTabComponent extends Tab implements OnChanges {
     @Input() defaultKeyAction: KeyAction;

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'),
+    templateUrl: './macro-tab.component.html',
-    styles: [require('./macro-tab.component.scss')]
+    styleUrls: ['./macro-tab.component.scss']
 })
 export class MacroTabComponent extends Tab implements OnInit, OnChanges, OnDestroy {
     @Input() defaultKeyAction: KeyAction;

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'),
+    templateUrl: './mouse-tab.component.html',
-    styles: [require('./mouse-tab.component.scss')]
+    styleUrls: ['./mouse-tab.component.scss']
 })
 export class MouseTabComponent extends Tab implements OnChanges {
     @Input() defaultKeyAction: KeyAction;

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'),
+    templateUrl: './none-tab.component.html',
-    styles: [require('./none-tab.component.scss')]
+    styleUrls: ['./none-tab.component.scss']
 })
 export class NoneTabComponent extends Tab implements OnChanges {
     ngOnChanges(event: any) {

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'),
+    templateUrl: './capture-keystroke-button.component.html',
-    styles: [require('./capture-keystroke-button.component.scss')]
+    styleUrls: ['./capture-keystroke-button.component.scss']
 })
 export class CaptureKeystrokeButtonComponent {
     @Output() capture = new EventEmitter<any>();

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'),
+    templateUrl: './icon.component.html',
-    styles: [require('./icon.component.scss')]
+    styleUrls: ['./icon.component.scss']
 })
 export class IconComponent implements OnInit {
 

shared/src/components/settings/settings.component.ts

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'settings',
-    template: require('./settings.component.html'),
+    templateUrl: './settings.component.html',
-    styles: [require('./settings.component.scss')],
+    styleUrls: ['./settings.component.scss'],
     host: {
         'class': 'container-fluid'
     }

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'),
+    templateUrl: './side-menu.component.html',
-    styles: [require('./side-menu.component.scss')]
+    styleUrls: ['./side-menu.component.scss']
 })
 export class SideMenuComponent {
     private keymaps$: Observable<Keymap[]>;

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'),
+    templateUrl: './svg-keyboard.component.html',
-    styles: [require('./svg-keyboard.component.scss')]
+    styleUrls: ['./svg-keyboard.component.scss']
 })
 export class SvgKeyboardComponent implements OnInit {
     @Input() moduleConfig: Module[];

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;

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'),
+    templateUrl: './svg-keyboard-key.component.html',
-    styles: [require('./svg-keyboard-key.component.scss')]
+    styleUrls: ['./svg-keyboard-key.component.scss']
 })
 export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
     @Input() id: string;

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'),
+    templateUrl: './svg-keystroke-key.component.html',
-    styles: [require('./svg-keystroke-key.component.scss')]
+    styleUrls: ['./svg-keystroke-key.component.scss']
 })
 export class SvgKeystrokeKeyComponent implements OnInit, OnChanges {
     @Input() height: number;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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'),
+    templateUrl: './svg-module.component.html',
-    styles: [require('./svg-module.component.scss')]
+    styleUrls: ['./svg-module.component.scss']
 })
 export class SvgModuleComponent {
     @Input() coverages: any[];

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'),
+    templateUrl: './svg-keyboard-wrap.component.html',
-    styles: [require('./svg-keyboard-wrap.component.scss')],
+    styleUrls: ['./svg-keyboard-wrap.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SvgKeyboardWrapComponent implements OnInit, OnChanges {

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'),
+    templateUrl: '../shared/main-app/main-app.component.html',
-    styles: [require('../shared/main-app/main-app.component.scss')],
+    styleUrls: ['../shared/main-app/main-app.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class MainAppComponent { }

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$/,