Now it mostly works with some limitations:

- ambient declarations seem not to be working, thus the following
  converters have temporarily been disabled:
  - punycode
  - utf8
  - quoted-printable

src/app/app.component.ts

@@ -5,11 +5,12 @@ import {Converter} from "./converter/converter";
 import {NativeLibraryWrapperService} from "./nativelibrarywrapper.service";
 import {Step} from "./step";
 
+import "../assets/css/style.css";
+
 @Component({
-    moduleId: module.id,
     selector: "den-app",
-    templateUrl: "app.component.html",
-    styleUrls: ["app.component.css"],
+    templateUrl: "./app.component.html",
+    styleUrls: ["./app.component.css"],
     providers: [ConverterRegistryService, InputComponentManagerService, NativeLibraryWrapperService]
 })
 export class AppComponent extends OnInit {

src/app/converter/punycodedecoder.ts

@@ -15,6 +15,7 @@ export class PunycodeDecoder implements Converter {
     }
 
     convert(input: string): string {
-        return this.nativeLibraryWrapperService.punycode.decode(input);
+        // return this.nativeLibraryWrapperService.punycode.decode(input);
+        return "";
     }
 }

src/app/converter/punycodeencoder.ts

@@ -15,6 +15,7 @@ export class PunycodeEncoder implements Converter {
     }
 
     convert(input: string): string {
-        return this.nativeLibraryWrapperService.punycode.encode(input);
+        // return this.nativeLibraryWrapperService.punycode.encode(input);
+        return "";
     }
 }

src/app/converter/quotedprintabledecoder.ts

@@ -14,10 +14,10 @@ export class QuotedPrintableDecoder implements Converter {
     }
 
     convert(input:string):string {
-        try {
-            return this.nativeLibraryWrapperService.utf8.decode(this.nativeLibraryWrapperService.quotedPrintable.decode(input));
-        } catch (error) {
+        // try {
+        //     return this.nativeLibraryWrapperService.utf8.decode(this.nativeLibraryWrapperService.quotedPrintable.decode(input));
+        // } catch (error) {
             throw new Error("The input can not be interpreted as quoted-printable. May be corrupt?");
-        }
+        // }
     }
 }

src/app/converter/quotedprintableencoder.ts

@@ -14,6 +14,7 @@ export class QuotedPrintableEncoder implements Converter {
     }
 
     convert(input:string):string {
-        return this.nativeLibraryWrapperService.quotedPrintable.encode(this.nativeLibraryWrapperService.utf8.encode(input));
+        // return this.nativeLibraryWrapperService.quotedPrintable.encode(this.nativeLibraryWrapperService.utf8.encode(input));
+        return "";
     }
 }

src/app/converterregistry.service.ts

@@ -12,11 +12,11 @@ import {DecToHexConverter} from "./converter/dectohexconverter";
 import {HexToDecConverter} from "./converter/hextodecconverter";
 import {DecToBinConverter} from "./converter/dectobinconverter";
 import {BinToDecConverter} from "./converter/bintodecconverter";
-import {QuotedPrintableDecoder} from "./converter/quotedprintabledecoder";
-import {QuotedPrintableEncoder} from "./converter/quotedprintableencoder";
+// import {QuotedPrintableDecoder} from "./converter/quotedprintabledecoder";
+// import {QuotedPrintableEncoder} from "./converter/quotedprintableencoder";
 import {NativeLibraryWrapperService} from "./nativelibrarywrapper.service";
-import {PunycodeEncoder} from "./converter/punycodeencoder";
-import {PunycodeDecoder} from "./converter/punycodedecoder";
+// import {PunycodeEncoder} from "./converter/punycodeencoder";
+// import {PunycodeDecoder} from "./converter/punycodedecoder";
 
 @Injectable()
 export class ConverterRegistryService {
@@ -48,14 +48,14 @@ export class ConverterRegistryService {
         this.registerConverter(new URIComponentDecoder());
         this.registerConverter(new HTMLEntitiesEncoder());
         this.registerConverter(new HTMLEntitiesDecoder());
-        this.registerConverter(new QuotedPrintableEncoder(this.wrapper));
-        this.registerConverter(new QuotedPrintableDecoder(this.wrapper));
+        // this.registerConverter(new QuotedPrintableEncoder(this.wrapper));
+        // this.registerConverter(new QuotedPrintableDecoder(this.wrapper));
         this.registerConverter(new DecToHexConverter());
         this.registerConverter(new HexToDecConverter());
         this.registerConverter(new DecToBinConverter());
         this.registerConverter(new BinToDecConverter());
-        this.registerConverter(new PunycodeEncoder(this.wrapper));
-        this.registerConverter(new PunycodeDecoder(this.wrapper));
+        // this.registerConverter(new PunycodeEncoder(this.wrapper));
+        // this.registerConverter(new PunycodeDecoder(this.wrapper));
     }
 
     private registerConverter(converter:Converter):void {

src/app/nativelibrarywrapper.service.ts

@@ -6,13 +6,13 @@ declare var punycode:any;
 
 @Injectable()
 export class NativeLibraryWrapperService {
-    public utf8:any;
-    public quotedPrintable:any;
-    public punycode:any;
+    // public utf8:any;
+    // public quotedPrintable:any;
+    // public punycode:any;
 
     constructor() {
-        this.utf8 = utf8;
-        this.quotedPrintable = quotedPrintable;
-        this.punycode = punycode;
+        // this.utf8 = utf8;
+        // this.quotedPrintable = quotedPrintable;
+        // this.punycode = punycode;
     }
 }

src/assets/css/style.css

@@ -0,0 +1,25 @@
+@font-face {
+    font-family: "ABeeZee";
+    font-stretch: normal;
+    font-style: normal;
+    font-variant: normal;
+    font-weight: normal;
+    src: local("ABeeZee Regular"),
+    local("ABeeZee-Regular"),
+    local("ABeeZee"),
+    url("../fonts/abeezee-regular.woff") format("woff");
+}
+
+body {
+    font-family: "ABeeZee", sans-serif;
+    margin: 0;
+    padding: 1em 0 0 0;
+}
+
+h1 {
+    text-align: center;
+}
+
+.apploader {
+    text-align: center;
+}

src/index.html

@@ -1,50 +1,9 @@
 <!DOCTYPE html>
-<!--
-  ~ Copyright (C) Schweizerische Bundesbahnen SBB, 2017.
-  -->
-
 <html>
 <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
     <title>Decode? Encode? DENcode!</title>
-    <!--<script type="text/javascript" src="node_modules/core-js/client/shim.js"></script>-->
-    <!--<script type="text/javascript" src="node_modules/zone.js/dist/zone.js"></script>-->
-    <!--<script type="text/javascript" src="node_modules/reflect-metadata/Reflect.js"></script>-->
-    <!--<script type="text/javascript" src="node_modules/systemjs/dist/system.src.js"></script>-->
-    <!--<script type="text/javascript" src="node_modules/utf8/utf8.js"></script>-->
-    <!--<script type="text/javascript" src="node_modules/quoted-printable/quoted-printable.js"></script>-->
-    <!--<script type="text/javascript" src="node_modules/punycode/punycode.js"></script>-->
-
-    <!--<script type="text/javascript" src="systemjs.config.js"></script>-->
-    <!--<script type="text/javascript">-->
-        <!--System.import("app").catch(function (err) {-->
-            <!--console.log(err);-->
-        <!--});-->
-    <!--</script>-->
-    <style>
-        @font-face {
-            font-family: "ABeeZee";
-            font-stretch: normal;
-            font-style: normal;
-            font-variant: normal;
-            font-weight: normal;
-            src: local("ABeeZee Regular"),
-            local("ABeeZee-Regular"),
-            local("ABeeZee"),
-            url("abeezee-regular.woff") format("woff");
-        }
-
-        body {
-            font-family: "ABeeZee", sans-serif;
-            margin: 0;
-            padding: 1em 0 0 0;
-        }
-
-        h1 {
-            text-align: center;
-        }
-    </style>
 </head>
 <body>
 <h1>Decode? Encode? DENcode!</h1>
@@ -53,7 +12,7 @@
     Browser. You won't regret it!
 </noscript>
 <den-app>
-    <div style="text-align:center;">Please hold on, we're starting the turbines ...</div>
+    <div class="apploader">Please hold on, we're starting the turbines ...</div>
 </den-app>
 </body>
 </html>

src/polyfills.ts

@@ -1,7 +1,7 @@
 import "core-js/es6";
 import "core-js/es7/reflect";
 import "zone.js/dist/zone";
-require('zone.js/dist/zone');
+require("zone.js/dist/zone");
 
 if (process.env.ENV === 'production') {
     // Production

src/tsconfig.json

@@ -12,6 +12,9 @@
       "dom"
     ],
     "noImplicitAny": true,
-    "suppressImplicitAnyIndexErrors": true
+    "suppressImplicitAnyIndexErrors": true,
+    "typeRoots": [
+      "../node_modules/@types/"
+    ]
   }
 }

src/vendor.ts

@@ -1,17 +1,13 @@
-import "@angular/core";
-import "@angular/platform-browser";
-import "@angular/platform-browser-dynamic";
-import "@angular/forms";
-// import {Component, Injectable, NgModule, OnInit} from "@angular/core";
-// import {BrowserModule} from "@angular/platform-browser";
-// import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
-// import {FormsModule} from "@angular/forms";
+import {Component, Injectable, NgModule, OnInit} from "@angular/core";
+import {BrowserModule} from "@angular/platform-browser";
+import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
+import {FormsModule} from "@angular/forms";
 
-// // Angular
-// import '@angular/platform-browser-dynamic';
-// import '@angular/common';
-// import '@angular/http';
-// import '@angular/router';
-//
-// // RxJS
-// import 'rxjs';
+import "rxjs";
+
+import "utf8";
+import "quoted-printable";
+import "punycode";
+require("utf8");
+require("quoted-printable");
+require("punycode");