angular2 with asp.net core and systemjs installation
<p>i tried to start a project  Angular2 / TypeScript / ASP.Net Core
with  NPM / Gulp / SystemJS</p>

<p>But it seems that all the tutorial out there are not uptodate or i'm missing something...</p>

<p>When i try -> import { Component } from '@angular/core';
Visual studio is not building anymore and saying that it cannot find the module '@angular/core'.</p>

<p>Here are my configs files:</p>

<p>NPM: </p>

<pre><code>{
    "dependencies": {
        "@angular/common": "2.1.2",
        "@angular/compiler": "2.1.2",
        "@angular/core": "2.1.2",
        "@angular/forms": "2.1.2",
        "@angular/http": "2.1.2",
        "@angular/platform-browser": "2.1.2",
        "@angular/platform-browser-dynamic": "2.1.2",
        "@angular/router": "3.1.2",
        "@angular/upgrade": "2.1.2",
        "core-js": "^2.4.1",
        "moment": "^2.14.1",
        "ng2-bootstrap": "^1.0.24",
        "reflect-metadata": "^0.1.3",
        "rxjs": "5.0.0-beta.6",
        "systemjs": "^0.19.37",
        "typings": "^2.0.0",
        "zone.js": "^0.6.12"
    },
    "devDependencies": {
        "gulp": "3.9.1",
        "gulp-clean": "0.3.2",
        "gulp-concat": "2.6.1",
        "gulp-sourcemaps": "1.9.1",
        "gulp-typescript": "3.1.3",
        "gulp-uglify": "2.0.0",
        "typescript": "2.0.10"
    },
    "name": "kira",
    "private": true,
    "scripts": {
        "postinstall": "typings install dt~core-js --global"
    },
    "version": "1.0.0"
}
</code></pre>

<p>systemjs.config.js:</p>

<pre><code>(function (global) {
    System.config({
        paths: {
            'npm:': 'node_modules/'
        },
        map: {
            app: 'wwwroot/app',
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
            'rxjs': 'npm:rxjs'
        },
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);
</code></pre>

<p>My app.component.ts</p>

<pre><code>import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `&lt;h1&gt;Hello {{name}}&lt;/h1&gt;`
})

export class AppComponent { name = 'Angular'; }
</code></pre>