npm、webpack、およびangular2を使用したASP.NET MVC Webサイト？

Question

これらのjavascriptモジュールローダーの出現により、WebpackでASP.NET MVC WebアプリケーションでAngular 2を設定するために必要な設定を理解しようとしています。ここで私はこれまで（補正の対象を）知っているものです：

• のWebPACKは、モジュールローダです。それで、webpack.config.jsファイルを角型アプリケーションに指定して、私のAngular 2アプリケーション全体をバンドルして、HTMLにインポートできるファイルを出力させてください。
• npmは、私のAngular 2コンポーネントはnode_modules

の下にサブファイル/フォルダの角度2の依存関係のすべてを固執するpackage.jsonファイル、で私はすでにを通じて実行したとVisual Studioに、このようなTypescriptようなものをダウンロードして、私はnodeとnpmを持っていますインストールされます。 Task Runner Explorerもwebpack.config.jsファイルを取得しました。これを実行してビルドされたjavascriptファイルを見ることができます。ここに私の基本的なファイル構造（マイナス無関係なフォルダ/ファイル）

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 

マイpackage.jsonファイルがマイwebpack.config.jsファイルがこの

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

---

のように見えるこの

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

のように見えていますヒカップ

私が抱えている問題は、アンギュラ2の世界的スタイルのアプリケーションを作成しようとしたときに、私のnode_modulesフォルダからモジュールをインポートできません。ここでapp.component.tsが

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

私は「--moduleは、」私はひどく間違って何かをやっている「どれも」

されていないときの輸入、輸出、またはモジュールの拡張製品を使用することはできませんで見ていますエラーのように見えるものですまたは私はここで微妙なことを逃していますか？

Answer 1

私はこの問題を修正するために何をする必要があるかを見つけるように、これは

1. 更新されますファイル名を指定して実行npm install @types/es6-shim --save-dev（ソリューションを構築する際の修正がPromise、MapとSetタイプの欠落）
2. 変更のインポートステートメントをimport { Component } from "../../node_modules/@angular/core"に設定します（node_modulesからインポートするパスを修正します）

3. tsconfig.jsファイルをソリューションのルートに追加します内容

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

2017年1月29日編集

は、私はtypescriptですファイルをロードするためにWebPACKのため https://github.com/TypeStrong/ts-loaderが必要になると思います。..