ASP.NET MVC-Website mit Npm, Webpack und Angular2?

Question

Mit dem Aufkommen von all diesen Javascript-Modul-Loadern versuche ich die Konfiguration zu verstehen, die ich brauche, um Angular 2 in meiner ASP.NET MVC-Webanwendung mit Webpack einzurichten. Hier ist, was ich wissen (ohne Gewähr) so weit:

• Webpack ist ein Modul-Lader. So wird es in der Lage sein, meine gesamte Angular 2-Anwendung zu bündeln, indem ich die webpack.config.js-Datei auf meine eckige App und habe es eine einzige Datei, die ich in meine HTML
• npm gibt mir die Möglichkeit, alle meine Angular 2 verwalten können Komponenten in einer package.json Datei, die alle Abhängigkeiten für Angular 2 in Unterdateien/Ordner unter node_modules

ich habe bereits durchlaufen und heruntergeladene Dinge wie Typescript in Visual Studio-Stick wird, und ich habe node und npm Eingerichtet. Die Task Runner Explorer hat auch die webpack.config.js Datei abgeholt und ich kann sie ausführen und sehe eine eingebaute Javascript-Datei. Hier ist meine grundlegende Dateistruktur (minus irrelevant Ordner/Dateien)

Solution 
    node_modules 
     @angular 
     core-js 
     es6-shim 
     rxjs 
     reflect-metadata 
     ... 
    Scripts 
     app 
      component-1 
      component-2 
      ... 
     shared 
      directives 
      interfaces 
      services 
      ... 
     app.component.ts <-- Should have the root level angular 2 component 
     main.ts <-- should be entry point into angular 2 application 
    Scripts-Build 
     main.bundle.js <-- Webpack places my bundled js file here 
    package.json 
    webpack.config.js 

Meine package.json Datei sieht wie folgt aus

{ 
    "version": "1.0.0", 
    "name": "aspnet", 
    "private": true, 
    "dependencies": { 
     "@angular/common": "^2.4.5", 
     "@angular/compiler": "^2.4.5", 
     "@angular/core": "^2.4.5", 
     "@angular/forms": "^2.4.5", 
     "@angular/http": "^2.4.5", 
     "@angular/platform-browser": "^2.4.5", 
     "@angular/platform-browser-dynamic": "^2.4.5", 
     "@angular/router": "^3.4.5", 
     "angular-in-memory-web-api": "~0.2.4", 
     "core-js": "^2.4.1", 
     "rxjs": "5.0.1", 
     "systemjs": "0.19.40", 
     "zone.js": "^0.7.4" 
    } 
} 

Meine webpack.config.js Datei sieht wie folgt aus

var path = require("path"); 

module.exports = { 
    context: path.join(__dirname, "Scripts"), 
    entry: "./main.ts", 
    output: { 
     path: path.join(__dirname, "Scripts-Build"), 
     filename: "[name].bundle.js" 
    } 
} 

---

Der Schluckauf

Der Schluckauf, den ich habe, wenn ich versuche, eine Hallo-Welt-Stil-Anwendung für Angular 2 zu schreiben, habe ich Probleme beim Importieren der Module aus meinem Ordner node_modules. Hier ist, was app.component.ts sieht aus wie

import { Component } from "../../node_modules/@angular/core/index.js" 

Der Fehler, den ich sehen will, ist nicht die Einfuhr verwenden können, Exporte oder Modul Augmentationen, wenn ‚--module‘ ist ‚none‘

Bin ich etwas schrecklich falsch zu machen oder fehlt mir hier eine Feinheit?

Answer 1

Dies wird aktualisiert, sobald ich herausfinden, was ich brauche dieses Problem

1. Run npm install @types/es6-shim --save-dev zu beheben zu tun (Fixes fehlt Promise, Map und Set Typen beim Bau Lösung)
2. Ändern Sie den Import Anweisung an import { Component } from "../../node_modules/@angular/core" (Fixes Pfad zum Importieren von node_modules)

3. Fügen Sie eine tsconfig.js Datei die Wurzel der Lösung mit den folgenden Inhalt

   { 
       "compilerOptions": { 
        "noImplicitAny": false, 
        "noEmitOnError": true, 
        "removeComments": false, 
        "sourceMap": true, 
        "target": "es5", 
        "emitDecoratorMetadata": true, 
        "experimentalDecorators": true, 
        "moduleResolution": "node" 
       }, 
       "include": [ 
        "Scripts" 
       ], 
       "exclude": [ 
        "node_modules", 
        "wwwroot" 
       ] 
   } 
   

1/29/2017 bearbeiten, ich glaube, ich https://github.com/TypeStrong/ts-loader für webpack benötigen die Typoskript-Dateien zu laden ..