angular2 con l'installazione di asp.net core e systemjs - angular, visual-studio-2015, asp.net-core

Ho provato ad avviare un progetto Angular2 / TypeScript / ASP.Net Core con NPM / Gulp / SystemJS

Ma sembra che tutto il tutorial là fuori non sia aggiornato o mi manchi qualcosa ...

Quando provo -> import {Component} da "@ angular / core"; Visual Studio non sta costruendo più e dicendo che non riesce a trovare il modulo "@ angular / core".

Ecco i miei file di configurazione:

NPM:

{
"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"
}

systemjs.config.js:

(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);

La mia app.component.ts

import { Component } from "@angular/core";

@Component({
selector: "my-app",
template: `<h1>Hello {{name}}</h1>`
})

export class AppComponent { name = "Angular"; }

risposte:

Finalmente l'ho fatto funzionare dopo molte ore! Avevo bisogno di fare una domanda per trovare la soluzione pochi minuti dopo ...

Il mio problema era nel mio tsconfig.json

Stavo usando "module": "system" che non funzionava (non so davvero perché ...)

Ho cambiato questo in "module": "commonjs" e ora tutto è in costruzione !! : D

MODIFICARE:

Ho trovato il motivo per cui "sistema" non funzionavacome modulo per il mio tsconfig.json. Poiché sto usando Node.js per il mio packaging del modulo e il nodo uso commonjs per decomprimere questi moduli, quindi dobbiamo inserire commonjs in tsconfig in modo che il typescript possa leggerli.