Search Box Component for ASP.NET Core (MVC) and Angular2

gulpfile.js

/// <binding BeforeBuild='beforeBuild' />
/*
This file in the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/

var gulp = require('gulp');

var webRoot = "./wwwroot/";

var paths = {
    nodeModules: './node_modules/'
};

gulp.task('default', function () {
    // place code for your default task here
});

gulp.task('beforeBuild', function () {
    // Copy node_module js files across
    gulp.src([paths.nodeModules + 'zone.js/dist/zone.js',
              paths.nodeModules + 'reflect-metadata/Reflect.js',
              paths.nodeModules + 'core-js/client/shim.min.js',
              paths.nodeModules + 'systemjs/dist/system.src.js'])
        .pipe(gulp.dest(webRoot + 'js/'));

    // System JS Config
    gulp.src(['./systemJS/systemjs.config.js'])
        .pipe(gulp.dest(webRoot + 'js/'));

    // SystemJS Needed files

    // Angular2
    gulp.src([paths.nodeModules + '@angular/core/bundles/core.umd.js',
              paths.nodeModules + '@angular/common/bundles/common.umd.js',
              paths.nodeModules + '@angular/compiler/bundles/compiler.umd.js',
              paths.nodeModules + '@angular/platform-browser/bundles/platform-browser.umd.js',
              paths.nodeModules + '@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
              paths.nodeModules + '@angular/http/bundles/http.umd.js',
              paths.nodeModules + '@angular/router/bundles/router.umd.js',
              paths.nodeModules + '@angular/forms/bundles/forms.umd.js'])
        .pipe(gulp.dest(webRoot + 'js/'));

    // Copy across the Reactive Extensions files, in the same structure as they are found (as this needs to be preserved)
    gulp.src([paths.nodeModules + 'rxjs/**/*.js'], { base: "node_modules/rxjs" })
        .pipe(gulp.dest(webRoot + 'js/'))
});

searchbox.component.ts

import { Component, Input, Output } from '@angular/core';

@Component({
    selector: 'search-box',
    template: `<div>
                    <input #box type="text" (keyup.enter)="displayAlert(box.value)" placeholder="lets get searching..." />
               </div>`
})
export class SearchboxComponent {
    constructor() {
    }

    displayAlert(msg: string) {
        window.alert(msg);
    }
}

systemjs.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        // map tells the System loader where to look for things
        // ASP.NET Core exposes the wwwroot folder without the need to specify "wwwroot" in the path
        map: {
            // our app is within the app folder
            app: 'app',

            // angular bundles Format = ('name': 'location')
            '@angular/core': 'js/core.umd.js',
            '@angular/common': 'js/common.umd.js',
            '@angular/compiler': 'js/compiler.umd.js',
            '@angular/platform-browser': 'js/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'js/platform-browser-dynamic.umd.js',
            '@angular/http': 'js/http.umd.js',
            '@angular/router': 'js/router.umd.js',
            '@angular/forms': 'js/forms.umd.js',

            // other libraries
            'rxjs': 'js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "rootDir": "app",
    "outDir": "wwwroot/app"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ],
  "compileOnSave": true
}