/ / angular2 con el núcleo de asp.net y la instalación de systemjs - angular, visual-studio-2015, asp.net-core

angular2 con la instalación asp.net core y systemjs - angular, visual-studio-2015, asp.net-core

Intenté iniciar un proyecto Angular2 / TypeScript / ASP.Net Core con NPM / Gulp / SystemJS

Pero parece que todos los tutoriales no están actualizados o me estoy perdiendo algo ...

Cuando intento -> importar {Componente} de "@ angular / core"; Visual Studio no está construyendo más y dice que no puede encontrar el módulo "@ angular / core".

Aquí están mis archivos de configuración:

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

My app.component.ts

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

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

export class AppComponent { name = "Angular"; }

Respuestas

1 para la respuesta № 1

¡Finalmente lo puse a trabajar después de muchas horas! Necesitaba hacer una pregunta para encontrar la solución unos minutos después ...

Mi problema estaba en mi tsconfig.json

Estaba usando "módulo": "sistema" que no funcionaba (no sé por qué ...)

Cambié esto a "módulo": "commonjs" y ahora todo se está construyendo. :RE

EDITAR:

Encontré la razón por la que el "sistema" no estaba funcionandocomo modulo para mi tsconfig.json. Debido a que estoy usando Node.js para el empaquetado de mi módulo, y el nodo usa commonjs para descomprimir esos módulos, por lo que necesitamos poner commonjs en tsconfig para que Typescript pueda leerlos.