Re-initialized the project with angular-cli and set it up as the build tool chain.

2017-04-08 00:24:44 +02:00 · 2017-04-08 00:24:44 +02:00 · 17afa92bfe
parent 6dd65fd488
commit 17afa92bfe
80 changed files with 6584 additions and 621 deletions
--- a/.angular-cli.json
+++ b/.angular-cli.json
@ -0,0 +1,57 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "conv.friedli.info"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.scss"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json"
+    },
+    {
+      "project": "src/tsconfig.spec.json"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "scss",
+    "component": {}
+  }
+}
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/.gitignore
+++ b/.gitignore
@ -1,10 +1,43 @@
-*~
-.idea/
-*.iml
-atlassian-ide-plugin.xml
-node_modules/
-typings/
-src/**/*.js
-src/**/*.js.map
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
 npm-debug.log
-dist/
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db
+*~
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -7,9 +7,11 @@ stages:
 build_job:
  stage: build
  script:
-    - npm install
-    - npm run build-dev
-    - npm run test
+    - yarn install
+    - yarn run build
+    - yarn run lint
+    - yarn run test
+    - yarn run e2e
  tags:
    - javascript
  except:
@ -23,9 +25,11 @@ build_job:
 build_job_production:
  stage: build
  script:
-    - npm install
-    - npm run build
-    - npm run test
+    - yarn install
+    - yarn run build-prod
+    - yarn run lint
+    - yarn run test
+    - yarn run e2e
  tags:
    - javascript
  only:
--- a/README.md
+++ b/README.md
@ -7,3 +7,32 @@ Deployment is automated with Gitlab CI. Usage is self-explanatory. What else do
 Contact the author at manuel-conv.friedli.info|at|fritteli.ch.

 Cheers!
+
+# AngularCliTestproject
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Before running the tests make sure you are serving the app via `ng serve`.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
--- a/config/helpers.js
+++ b/config/helpers.js
@ -1,7 +0,0 @@
-var path = require('path');
-var _root = path.resolve(__dirname, '..');
-function root(args) {
-    args = Array.prototype.slice.call(arguments, 0);
-    return path.join.apply(path, [_root].concat(args));
-}
-exports.root = root;
--- a/config/karma-test-shim.js
+++ b/config/karma-test-shim.js
@ -1,21 +0,0 @@
-Error.stackTraceLimit = Infinity;
-
-require('core-js/es6');
-require('core-js/es7/reflect');
-
-require('zone.js/dist/zone');
-require('zone.js/dist/long-stack-trace-zone');
-require('zone.js/dist/proxy');
-require('zone.js/dist/sync-test');
-require('zone.js/dist/jasmine-patch');
-require('zone.js/dist/async-test');
-require('zone.js/dist/fake-async-test');
-
-var appContext = require.context('../src', true, /\.spec\.ts/);
-
-appContext.keys().forEach(appContext);
-
-var testing = require('@angular/core/testing');
-var browser = require('@angular/platform-browser-dynamic/testing');
-
-testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
--- a/config/karma.conf.js
+++ b/config/karma.conf.js
@ -1,44 +0,0 @@
-var webpackConfig = require('./webpack.test');
-
-module.exports = function (config) {
-    var _config = {
-        basePath: '',
-
-        frameworks: ['jasmine'],
-
-        files: [
-            {
-                pattern: './config/karma-test-shim.js',
-                watched: false
-            }
-        ],
-
-        preprocessors: {
-            './config/karma-test-shim.js': ['webpack', 'sourcemap']
-        },
-
-        webpack: webpackConfig,
-
-        webpackMiddleware: {
-            stats: 'errors-only'
-        },
-
-        webpackServer: {
-            noInfo: true
-        },
-
-        reporters: ['kjhtml'],
-        port: 9876,
-        colors: true,
-        logLevel: config.LOG_INFO,
-        autoWatch: false,
-        browsers: ['PhantomJS'],
-        singleRun: true,
-        phantomjsLauncher: {
-            // Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom) 
-            exitOnResourceError: true
-        }
-    };
-
-    config.set(_config);
-};
--- a/config/webpack.common.js
+++ b/config/webpack.common.js
@ -1,76 +0,0 @@
-var webpack = require('webpack');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var helpers = require('./helpers');
-
-module.exports = {
-    entry: {
-        'polyfills': './src/polyfills.ts',
-        'vendor': './src/vendor.ts',
-        'app': './src/main.ts'
-    },
-
-    resolve: {
-        extensions: ['.ts', '.js']
-    },
-
-    module: {
-        rules: [
-            {
-                test: /\.ts$/,
-                loaders: [
-                    {
-                        loader: 'awesome-typescript-loader',
-                        options: {
-                            configFileName: helpers.root('src', 'tsconfig.json')
-                        }
-                    },
-                    'angular2-template-loader'
-                ]
-            },
-            {
-                test: /\.html$/,
-                use: 'html-loader'
-            },
-            {
-                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
-                use: 'file-loader?name=assets/[name].[hash].[ext]'
-            },
-            {
-                test: /\.css$/,
-                exclude: helpers.root('src', 'app'),
-                use: ExtractTextPlugin.extract({
-                    fallback: 'style-loader',
-                    use: 'css-loader?sourceMap'
-                })
-            },
-            {
-                test: /\.css$/,
-                include: helpers.root('src', 'app'),
-                use: 'raw-loader'
-            }
-        ]
-    },
-
-    plugins: [
-        // Workaround for angular/angular#11580
-        new webpack.ContextReplacementPlugin(
-            // The (\\|\/) piece accounts for path separators in *nix and Windows
-            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
-            helpers.root('./src'), // location of your src
-            {} // a map of your routes
-        ),
-
-        new webpack.optimize.CommonsChunkPlugin({
-            name: ['app', 'vendor', 'polyfills']
-        }),
-
-        new HtmlWebpackPlugin({
-            template: 'src/index.html'
-        }),
-
-        new webpack.optimize.UglifyJsPlugin({
-            comments: false
-        })
-    ]
-};
--- a/config/webpack.dev.js
+++ b/config/webpack.dev.js
@ -1,24 +0,0 @@
-var webpackMerge = require('webpack-merge');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var commonConfig = require('./webpack.common.js');
-var helpers = require('./helpers');
-
-module.exports = webpackMerge(commonConfig, {
-    devtool: 'cheap-module-eval-source-map',
-
-    output: {
-        path: helpers.root('dist'),
-        publicPath: 'http://localhost:8080/',
-        filename: '[name].js',
-        chunkFilename: '[id].chunk.js'
-    },
-
-    plugins: [
-        new ExtractTextPlugin('[name].css')
-    ],
-
-    devServer: {
-        historyApiFallback: true,
-        stats: 'minimal'
-    }
-});
--- a/config/webpack.prod.js
+++ b/config/webpack.prod.js
@ -1,39 +0,0 @@
-var webpack = require('webpack');
-var webpackMerge = require('webpack-merge');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var commonConfig = require('./webpack.common.js');
-var helpers = require('./helpers');
-
-module.exports = function (env) {
-    console.log("env:", env);
-    return webpackMerge(commonConfig, {
-        devtool: 'source-map',
-
-        output: {
-            path: helpers.root('dist'),
-            publicPath: '',
-            filename: '[name].[hash].js',
-            chunkFilename: '[id].[hash].chunk.js'
-        },
-
-        plugins: [
-            new webpack.NoEmitOnErrorsPlugin(),
-            new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
-                mangle: {
-                    keep_fnames: true
-                }
-            }),
-            new ExtractTextPlugin('[name].[hash].css'),
-            new webpack.DefinePlugin({
-                'process.env': {
-                    'NODE_ENV': JSON.stringify(env.NODE_ENV)
-                }
-            }),
-            new webpack.LoaderOptionsPlugin({
-                htmlLoader: {
-                    minimize: false // workaround for ng2
-                }
-            })
-        ]
-    });
-};
--- a/config/webpack.test.js
+++ b/config/webpack.test.js
@ -1,52 +0,0 @@
-var webpack = require('webpack');
-var helpers = require('./helpers');
-
-module.exports = {
-    devtool: 'inline-source-map',
-
-    resolve: {
-        extensions: ['.ts', '.js']
-    },
-
-    module: {
-        rules: [
-            {
-                test: /\.ts$/,
-                loaders: [
-                    {
-                        loader: 'awesome-typescript-loader',
-                        options: {configFileName: helpers.root('src', 'tsconfig.json')}
-                    }, 'angular2-template-loader'
-                ]
-            },
-            {
-                test: /\.html$/,
-                loader: 'html-loader'
-
-            },
-            {
-                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
-                loader: 'null-loader'
-            },
-            {
-                test: /\.css$/,
-                exclude: helpers.root('src', 'app'),
-                loader: 'null-loader'
-            },
-            {
-                test: /\.css$/,
-                include: helpers.root('src', 'app'),
-                loader: 'raw-loader'
-            }
-        ]
-    },
-
-    plugins: [
-        new webpack.ContextReplacementPlugin(
-            // The (\\|\/) piece accounts for path separators in *nix and Windows
-            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
-            helpers.root('./src'), // location of your src
-            {} // a map of your routes
-        )
-    ]
-};
--- a/e2e/app.e2e-spec.ts
+++ b/e2e/app.e2e-spec.ts
@ -0,0 +1,14 @@
+import { ConvFriedliInfoPage } from './app.po';
+
+describe('conv.friedli.info App', () => {
+  let page: ConvFriedliInfoPage;
+
+  beforeEach(() => {
+    page = new ConvFriedliInfoPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('app works!');
+  });
+});
--- a/e2e/app.po.ts
+++ b/e2e/app.po.ts
@ -0,0 +1,11 @@
+import { browser, element, by } from 'protractor';
+
+export class ConvFriedliInfoPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}
--- a/e2e/tsconfig.e2e.json
+++ b/e2e/tsconfig.e2e.json
@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types":[
+      "jasmine",
+      "node"
+    ]
+  }
+}
--- a/karma.conf.js
+++ b/karma.conf.js
@ -1 +1,44 @@
-module.exports = require('./config/karma.conf.js');
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    files: [
+      { pattern: './src/test.ts', watched: false }
+    ],
+    preprocessors: {
+      './src/test.ts': ['@angular/cli']
+    },
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: config.angularCli && config.angularCli.codeCoverage
+              ? ['progress', 'coverage-istanbul']
+              : ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};
--- a/package.json
+++ b/package.json
@ -19,54 +19,49 @@
    "type": "git",
    "url": "https://gittr.ch/manuel/dencode.org.git"
  },
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "build-prod": "ng build --env=prod",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
  "dependencies": {
-    "@angular/common": "^2.4.0",
-    "@angular/compiler": "^2.4.0",
-    "@angular/core": "^2.4.0",
-    "@angular/forms": "^2.4.0",
-    "@angular/platform-browser": "^2.4.0",
-    "@angular/platform-browser-dynamic": "^2.4.0",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
-    "rxjs": "^5.0.1",
-    "zone.js": "^0.7.4",
-    "bootstrap": "^3.3.0",
+    "punycode": "^2.1.0",
    "quoted-printable": "^1.0.0",
+    "rxjs": "^5.1.0",
    "utf8": "^2.1.0",
-    "punycode": "^1.4.0"
+    "zone.js": "^0.8.4"
  },
  "devDependencies": {
-    "@types/jasmine": "2.5.36",
-    "@types/node": "^6.0.45",
-    "angular2-template-loader": "^0.6.0",
-    "awesome-typescript-loader": "^3.0.4",
-    "css-loader": "^0.26.1",
-    "extract-text-webpack-plugin": "^2.0.0",
-    "file-loader": "^0.9.0",
-    "html-loader": "^0.4.3",
-    "html-webpack-plugin": "^2.16.1",
-    "jasmine-core": "^2.4.1",
-    "karma": "^1.2.0",
+    "@angular/cli": "^1.0.0",
+    "@angular/compiler-cli": "^4.0.0",
+    "@types/jasmine": "^2.5.38",
+    "@types/node": "^7.0.0",
+    "codelyzer": "^2.0.0",
+    "jasmine-core": "^2.5.2",
+    "jasmine-spec-reporter": "^3.2.0",
+    "karma": "^1.4.1",
    "karma-chrome-launcher": "^2.0.0",
-    "karma-firefox-launcher": "^1.0.1",
-    "karma-jasmine": "^1.0.2",
+    "karma-cli": "^1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.0.0",
+    "karma-jasmine": "^1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-phantomjs-launcher": "^1.0.4",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.1",
-    "null-loader": "^0.1.1",
-    "phantomjs-prebuilt": "^2.1.14",
-    "raw-loader": "^0.5.1",
-    "rimraf": "^2.5.2",
-    "style-loader": "^0.13.1",
-    "typescript": "^2.0.10",
-    "webpack": "^2.2.1",
-    "webpack-dev-server": "^2.4.1",
-    "webpack-merge": "^3.0.0"
-  },
-  "scripts": {
-    "start": "webpack-dev-server --inline --progress --port 8080",
-    "test": "karma start",
-    "build-dev": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail --env.NODE_ENV=development",
-    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail --env.NODE_ENV=production"
+    "protractor": "^5.1.0",
+    "ts-node": "^3.0.0",
+    "tslint": "^5.0.0",
+    "typescript": "^2.2.0"
  }
 }
--- a/protractor.conf.js
+++ b/protractor.conf.js
@ -0,0 +1,30 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+  },
+  onPrepare() {
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};
--- a/src/app/app-routing.module.js
+++ b/src/app/app-routing.module.js
@ -0,0 +1,27 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var core_1 = require('@angular/core');
+var router_1 = require('@angular/router');
+var routes = [
+    {
+        path: '',
+        children: []
+    }
+];
+var AppRoutingModule = (function () {
+    function AppRoutingModule() {
+    }
+    AppRoutingModule = __decorate([
+        core_1.NgModule({
+            imports: [router_1.RouterModule.forRoot(routes)],
+            exports: [router_1.RouterModule]
+        })
+    ], AppRoutingModule);
+    return AppRoutingModule;
+}());
+exports.AppRoutingModule = AppRoutingModule;
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    children: []
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@ -1,118 +0,0 @@
-.inputwrapper {
-    font-family: "ABeeZee", sans-serif;
-    margin: 0 1em 1em 1em;
-}
-
-.textwrapper {
-    margin: 0 0 1em 0;
-    padding: 0 1em 0 0;
-}
-
-.arrow_box {
-    position: relative;
-    background: #fff;
-    border: 1px solid #aaa;
-}
-
-.arrow_box:focus {
-    border-color: #888;
-}
-
-.arrow_box:hover {
-    border-color: #333;
-}
-
-.arrow_box:after, .arrow_box:before {
-    top: 100%;
-    left: 50%;
-    border: solid transparent;
-    content: " ";
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-}
-
-.arrow_box:after {
-    border-color: rgba(255, 255, 255, 0);
-    border-top-color: #fff;
-    border-width: 1em;
-    margin-left: -1em;
-}
-
-.arrow_box:before {
-    border-color: rgba(170, 170, 170, 0);
-    border-top-color: #aaa;
-    border-width: calc(1em + 1px);
-    margin-left: calc(-1em - 1px);
-}
-
-.arrow_box:focus:before {
-    border-color: rgba(136, 136, 136, 0);
-    border-top-color: #888;
-}
-
-.arrow_box:hover:before {
-    border-color: rgba(51, 51, 51, 0);
-    border-top-color: #333;
-}
-
-.selectwrapper > .arrow_box {
-    display: inline-block;
-}
-
-.textinput {
-    background-color: #fff;
-    border: none;
-    color: #000;
-    font-family: "Free Monospaced", monospace;
-    height: 10em;
-    margin: 0;
-    padding: 0.5em;
-    resize: vertical;
-    width: 100%;
-}
-
-.textinput:focus {
-    border-color: #888;
-}
-
-.textinput:hover {
-    border-color: #333;
-}
-
-.selectwrapper {
-    margin: 0 0 1em 0;
-    padding: 0;
-    text-align: center;
-}
-
-.select {
-    background-color: #fff;
-    border: none;
-    color: #000;
-    font-family: "ABeeZee", sans-serif;
-    margin: 0;
-    padding: 0.5em;
-}
-
-.option {
-    /*    font-family: "ABeeZee", sans-serif;*/
-}
-
-.selectwrapper.error > .arrow_box {
-    border-color: red;
-}
-
-.selectwrapper.error > .arrow_box:before {
-    border-top-color: red;
-}
-
-.selectwrapper.error select {
-    color: red;
-}
-
-.errormessage {
-    color: red;
-    text-align: center;
-}
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@ -1,16 +1,17 @@
 <div *ngFor="let step of steps" class="inputwrapper">
-    <div class="textwrapper arrow_box">
+  <div class="textwrapper arrow_box">
        <textarea class="textinput" (keyup)="update(step)" placeholder="Please enter your input ..."
                  [(ngModel)]="step.content">{{step.content}}</textarea>
+  </div>
+  <div [ngClass]="{selectwrapper: true, error: step.error}">
+    <div class="arrow_box">
+      <select class="select" (change)="convert(step, $event)">
+        <option id="undefined">Select conversion ...</option>
+        <option class="option" *ngFor="let c of converters" id="{{c.getId()}}">{{c.getDisplayname()}}
+        </option>
+      </select>
    </div>
-    <div [ngClass]="{selectwrapper: true, error: step.error}">
-        <div class="arrow_box">
-            <select class="select" (change)="convert(step, $event)">
-                <option id="undefined">Select conversion ...</option>
-                <option class="option" *ngFor="let c of converters" id="{{c.getId()}}">{{c.getDisplayname()}}
-                </option>
-            </select>
-        </div>
-    </div>
-    <div class="errormessage" *ngIf="step.error">{{step.message}}</div>
+  </div>
+  <div class="errormessage" *ngIf="step.error" [innerHTML]="step.message"></div>
 </div>
+<!--<router-outlet></router-outlet>-->
--- a/src/app/app.component.js
+++ b/src/app/app.component.js
@ -0,0 +1,65 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var core_1 = require("@angular/core");
+var converterregistry_service_1 = require("./converterregistry.service");
+var inputcomponentmanager_service_1 = require("./inputcomponentmanager.service");
+var nativelibrarywrapper_service_1 = require("./nativelibrarywrapper.service");
+var AppComponent = (function () {
+    function AppComponent(converterRegistryService, inputComponentManagerService) {
+        this.converterRegistryService = converterRegistryService;
+        this.inputComponentManagerService = inputComponentManagerService;
+        this.steps = [];
+        this.converters = [];
+    }
+    AppComponent.prototype.convert = function (step, $event) {
+        step.selectedConverter = this.converterRegistryService.getConverter($event.target.selectedOptions[0].id);
+        this.update(step);
+    };
+    AppComponent.prototype.update = function (step) {
+        var converter = step.selectedConverter;
+        if (converter !== undefined) {
+            var content = step.content;
+            var result = void 0;
+            try {
+                result = converter.convert(content);
+            }
+            catch (error) {
+                if (typeof console === "object" && typeof console.log === "function") {
+                    console.log(error);
+                }
+                step.message = error.message;
+                step.error = true;
+                result = null;
+            }
+            if (result !== null) {
+                step.message = "";
+                step.error = false;
+                if (result !== "") {
+                    var nextComponent = this.inputComponentManagerService.getNext(step);
+                    nextComponent.content = result;
+                    this.update(nextComponent);
+                }
+            }
+        }
+    };
+    AppComponent.prototype.ngOnInit = function () {
+        this.converters = this.converterRegistryService.getAllConverters();
+        this.steps = this.inputComponentManagerService.getAllComponents();
+        this.inputComponentManagerService.getFirst();
+    };
+    AppComponent = __decorate([
+        core_1.Component({
+            selector: 'app-root',
+            templateUrl: './app.component.html',
+            styleUrls: ['./app.component.scss'],
+            providers: [converterregistry_service_1.ConverterRegistryService, inputcomponentmanager_service_1.InputComponentManagerService, nativelibrarywrapper_service_1.NativeLibraryWrapperService]
+        })
+    ], AppComponent);
+    return AppComponent;
+}());
+exports.AppComponent = AppComponent;
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@ -0,0 +1,107 @@
+.inputwrapper {
+  font-family: "ABeeZee", sans-serif;
+  margin: 0 1em 1em 1em;
+}
+
+.textwrapper {
+  margin: 0 0 1em 0;
+  padding: 0 1em 0 0;
+}
+
+.arrow_box {
+  position: relative;
+  background: #fff;
+  border: 1px solid #aaa;
+  &:focus {
+    border-color: #888;
+  }
+  &:hover {
+    border-color: #333;
+  }
+  &:after, &:before {
+    top: 100%;
+    left: 50%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+  }
+  &:after {
+    border-color: rgba(255, 255, 255, 0);
+    border-top-color: #fff;
+    border-width: 1em;
+    margin-left: -1em;
+  }
+  &:before {
+    border-color: rgba(170, 170, 170, 0);
+    border-top-color: #aaa;
+    border-width: calc(1em + 1px);
+    margin-left: calc(-1em - 1px);
+  }
+  &:focus:before {
+    border-color: rgba(136, 136, 136, 0);
+    border-top-color: #888;
+  }
+  &:hover:before {
+    border-color: rgba(51, 51, 51, 0);
+    border-top-color: #333;
+  }
+  .selectwrapper > & {
+    display: inline-block;
+  }
+}
+
+.textinput {
+  background-color: #fff;
+  border: none;
+  color: #000;
+  font-family: "Free Monospaced", monospace;
+  height: 10em;
+  margin: 0;
+  padding: 0.5em;
+  resize: vertical;
+  width: 100%;
+  &:focus {
+    border-color: #888;
+  }
+  &:hover {
+    border-color: #333;
+  }
+}
+
+.selectwrapper {
+  margin: 0 0 1em 0;
+  padding: 0;
+  text-align: center;
+  &.error {
+    > .arrow_box {
+      border-color: red;
+      &:before {
+        border-top-color: red;
+      }
+    }
+    select {
+      color: red;
+    }
+  }
+}
+
+.select {
+  background-color: #fff;
+  border: none;
+  color: #000;
+  font-family: "ABeeZee", sans-serif;
+  margin: 0;
+  padding: 0.5em;
+}
+
+.option {
+  /*    font-family: "ABeeZee", sans-serif;*/
+}
+
+.errormessage {
+  color: red;
+  text-align: center;
+}
--- a/src/app/app.component.spec.js
+++ b/src/app/app.component.spec.js
@ -0,0 +1,21 @@
+"use strict";
+var testing_1 = require('@angular/core/testing');
+var testing_2 = require('@angular/router/testing');
+var app_component_1 = require('./app.component');
+describe('AppComponent', function () {
+    beforeEach(testing_1.async(function () {
+        testing_1.TestBed.configureTestingModule({
+            imports: [
+                testing_2.RouterTestingModule
+            ],
+            declarations: [
+                app_component_1.AppComponent
+            ],
+        }).compileComponents();
+    }));
+    it('should create the app', testing_1.async(function () {
+        var fixture = testing_1.TestBed.createComponent(app_component_1.AppComponent);
+        var app = fixture.debugElement.componentInstance;
+        expect(app).toBeTruthy();
+    }));
+});
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@ -1,16 +1,23 @@
-import {TestBed} from "@angular/core/testing";
-import {AppComponent} from "./app.component";
-import {FormsModule} from "@angular/forms";
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';

-describe('App', () => {
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            declarations: [AppComponent],
-            imports: [FormsModule]
-        });
-    });
-    it('should work', () => {
-        let fixture = TestBed.createComponent(AppComponent);
-        expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent');
-    });
-});
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+});
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@ -1,61 +1,59 @@
 import {Component, OnInit} from "@angular/core";
 import {ConverterRegistryService} from "./converterregistry.service";
 import {InputComponentManagerService} from "./inputcomponentmanager.service";
-import {Converter} from "./converter/converter";
 import {NativeLibraryWrapperService} from "./nativelibrarywrapper.service";
 import {Step} from "./step";
-import "../assets/css/style.css";
+import {Converter} from "./converter/converter";

@Component({
-    selector: "den-app",
-    templateUrl: "./app.component.html",
-    styleUrls: ["./app.component.css"],
-    providers: [ConverterRegistryService, InputComponentManagerService, NativeLibraryWrapperService]
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  providers: [ConverterRegistryService, InputComponentManagerService, NativeLibraryWrapperService]
 })
-export class AppComponent extends OnInit {
-    public steps:Step[] = [];
-    public converters:Converter[] = [];
+export class AppComponent implements OnInit {
+  public steps: Step[] = [];
+  public converters: Converter[] = [];

-    constructor(private converterRegistryService:ConverterRegistryService, private inputComponentManagerService:InputComponentManagerService) {
-        super();
-    }
+  constructor(private converterRegistryService: ConverterRegistryService, private inputComponentManagerService: InputComponentManagerService) {
+  }

-    convert(step:Step, $event:any):void {
-        step.selectedConverter = this.converterRegistryService.getConverter($event.target.selectedOptions[0].id);
-        this.update(step);
-    }
+  convert(step: Step, $event: any): void {
+    step.selectedConverter = this.converterRegistryService.getConverter($event.target.selectedOptions[0].id);
+    this.update(step);
+  }

-    update(step:Step):void {
-        let converter:Converter = step.selectedConverter;
+  update(step: Step): void {
+    let converter: Converter = step.selectedConverter;

-        if (converter !== undefined) {
-            let content:string = step.content;
-            let result:string;
-            try {
-                result = converter.convert(content);
-            } catch (error) {
-                if (typeof console === "object" && typeof console.log === "function") {
-                    console.log(error);
-                }
-                step.message = error.message;
-                step.error = true;
-                result = null;
-            }
-            if (result !== null) {
-                step.message = "";
-                step.error = false;
-                if (result !== "") {
-                    let nextComponent:Step = this.inputComponentManagerService.getNext(step);
-                    nextComponent.content = result;
-                    this.update(nextComponent);
-                }
-            }
+    if (converter !== undefined) {
+      let content: string = step.content;
+      let result: string;
+      try {
+        result = converter.convert(content);
+      } catch (error) {
+        if (typeof console === "object" && typeof console.log === "function") {
+          console.log(error);
        }
+        step.message = error.message;
+        step.error = true;
+        result = null;
+      }
+      if (result !== null) {
+        step.message = "";
+        step.error = false;
+        if (result !== "") {
+          let nextComponent: Step = this.inputComponentManagerService.getNext(step);
+          nextComponent.content = result;
+          this.update(nextComponent);
+        }
+      }
    }
+  }

-    ngOnInit():void {
-        this.converters = this.converterRegistryService.getAllConverters();
-        this.steps = this.inputComponentManagerService.getAllComponents();
-        this.inputComponentManagerService.getFirst();
-    }
+  ngOnInit(): void {
+    this.converters = this.converterRegistryService.getAllConverters();
+    this.steps = this.inputComponentManagerService.getAllComponents();
+    this.inputComponentManagerService.getFirst();
+  }
 }
--- a/src/app/app.module.js
+++ b/src/app/app.module.js
@ -0,0 +1,34 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var platform_browser_1 = require('@angular/platform-browser');
+var core_1 = require('@angular/core');
+var forms_1 = require('@angular/forms');
+var http_1 = require('@angular/http');
+var app_routing_module_1 = require('./app-routing.module');
+var app_component_1 = require('./app.component');
+var AppModule = (function () {
+    function AppModule() {
+    }
+    AppModule = __decorate([
+        core_1.NgModule({
+            declarations: [
+                app_component_1.AppComponent
+            ],
+            imports: [
+                platform_browser_1.BrowserModule,
+                forms_1.FormsModule,
+                http_1.HttpModule,
+                app_routing_module_1.AppRoutingModule
+            ],
+            providers: [],
+            bootstrap: [app_component_1.AppComponent]
+        })
+    ], AppModule);
+    return AppModule;
+}());
+exports.AppModule = AppModule;
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -1,17 +1,22 @@
-import {NgModule} from "@angular/core";
-import {BrowserModule} from "@angular/platform-browser";
-import {FormsModule} from "@angular/forms";
-import {AppComponent} from "./app.component";
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';

@NgModule({
-    imports: [
-        BrowserModule,
-        FormsModule
-    ],
-    declarations: [
-        AppComponent
-    ],
-    bootstrap: [AppComponent]
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    AppRoutingModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
 })
-export class AppModule {
-}
+export class AppModule { }
--- a/src/app/converter/base64decoder.js
+++ b/src/app/converter/base64decoder.js
@ -0,0 +1,21 @@
+"use strict";
+var Base64Decoder = (function () {
+    function Base64Decoder() {
+    }
+    Base64Decoder.prototype.getDisplayname = function () {
+        return "Decode Base 64";
+    };
+    Base64Decoder.prototype.getId = function () {
+        return "base64decode";
+    };
+    Base64Decoder.prototype.convert = function (input) {
+        try {
+            return atob(input);
+        }
+        catch (exception) {
+            throw new Error("Could not decode base64 string. Maybe corrupt input?");
+        }
+    };
+    return Base64Decoder;
+}());
+exports.Base64Decoder = Base64Decoder;
--- a/src/app/converter/base64encoder.js
+++ b/src/app/converter/base64encoder.js
@ -0,0 +1,22 @@
+"use strict";
+var Base64Encoder = (function () {
+    function Base64Encoder() {
+    }
+    Base64Encoder.prototype.getDisplayname = function () {
+        return "Encode Base 64";
+    };
+    Base64Encoder.prototype.getId = function () {
+        return "base64encode";
+    };
+    Base64Encoder.prototype.convert = function (input) {
+        try {
+            return btoa(input);
+        }
+        catch (exception) {
+            console.error(exception);
+            throw new Error("Ouch! Looks like you've got a UTF-8 character there. Too bad, this is not supported yet. We're working on it and hope to be ready soon! Why don't you <a href=\"https://duckduckgo.com/?q=cute+kitties&iar=images\">enjoy some kittens</a> meanwhile?");
+        }
+    };
+    return Base64Encoder;
+}());
+exports.Base64Encoder = Base64Encoder;
--- a/src/app/converter/base64encoder.ts
+++ b/src/app/converter/base64encoder.ts
@ -1,19 +1,20 @@
 import {Converter} from "./converter";

 export class Base64Encoder implements Converter {
-    getDisplayname():string {
-        return "Encode Base 64";
-    }
+  getDisplayname(): string {
+    return "Encode Base 64";
+  }

-    getId():string {
-        return "base64encode";
-    }
+  getId(): string {
+    return "base64encode";
+  }

-    convert(input:string):string {
-        try {
-            return btoa(input);
-        } catch (exception) {
-            throw new Error("Could not encode base64 string. This should not happen, so why don't you just try again?");
-        }
+  convert(input: string): string {
+    try {
+      return btoa(input);
+    } catch (exception) {
+      console.error(exception);
+      throw new Error("Ouch! Looks like you've got a UTF-8 character there. Too bad, this is not supported yet. We're working on it and hope to be ready soon! Why don't you <a href=\"https://duckduckgo.com/?q=cute+kitties&iar=images\">enjoy some kittens</a> meanwhile?");
    }
+  }
 }
--- a/src/app/converter/bintodecconverter.js
+++ b/src/app/converter/bintodecconverter.js
@ -0,0 +1,20 @@
+"use strict";
+var BinToDecConverter = (function () {
+    function BinToDecConverter() {
+    }
+    BinToDecConverter.prototype.getDisplayname = function () {
+        return "Convert binary to decimal";
+    };
+    BinToDecConverter.prototype.getId = function () {
+        return "bintodec";
+    };
+    BinToDecConverter.prototype.convert = function (input) {
+        var n = parseInt(input, 2);
+        if (isNaN(n)) {
+            throw new Error("The input seems not to be a valid binary number.");
+        }
+        return n.toString(10);
+    };
+    return BinToDecConverter;
+}());
+exports.BinToDecConverter = BinToDecConverter;
--- a/src/app/converter/converter.js
+++ b/src/app/converter/converter.js
@ -0,0 +1 @@
+"use strict";
--- a/src/app/converter/dectobinconverter.js
+++ b/src/app/converter/dectobinconverter.js
@ -0,0 +1,20 @@
+"use strict";
+var DecToBinConverter = (function () {
+    function DecToBinConverter() {
+    }
+    DecToBinConverter.prototype.getDisplayname = function () {
+        return "Convert decimal to binary";
+    };
+    DecToBinConverter.prototype.getId = function () {
+        return "dectobin";
+    };
+    DecToBinConverter.prototype.convert = function (input) {
+        var n = parseInt(input, 10);
+        if (isNaN(n)) {
+            throw new Error("The input seems not to be a valid integer.");
+        }
+        return n.toString(2);
+    };
+    return DecToBinConverter;
+}());
+exports.DecToBinConverter = DecToBinConverter;
--- a/src/app/converter/dectohexconverter.js
+++ b/src/app/converter/dectohexconverter.js
@ -0,0 +1,20 @@
+"use strict";
+var DecToHexConverter = (function () {