angular2 with MVC6、ブラウザはnode_modules内のスクリプトにアクセスできません

Question

Angular2をTypeScriptで使用しようとしています。これはnode_modulesフォルダからのインポートを意味します。私はnode_modulesとnpmをデフォルト状態でインストールしていますが、プロジェクトのメインフォルダはありますが、特定のWebページにある.jsスクリプトを参照するとブラウザに404エラーが見つかりません。削除しようとしましたnode_modules、まだ動作しませんでした。したがって、多くの試行錯誤の末に、あらかじめインストールされ、設定されている新しいASP.NET 5プロジェクトでも、ブラウザは参照された.jsスクリプトにアクセスできず、node_modulesのスクリプトもインポートすることもできません（ajaxはこれらのスクリプトはTypeScriptファイルで参照され、失敗します）。

明らかDNXとASP.NET 5と、wwwrootと共にtsconfig.jsonとproject.jsonでnode_modulesの排除があります。コンパイル時にこのエラーが発生しました：

"指定されたパス、ファイル名、またはその両方が長すぎます。完全修飾ファイル名は260文字未満で、ディレクトリ名248文字未満でなければなりません。

興味深いことに、私は.tsファイルの型とモジュールをインポートすることができ、デザイナーでうまく動作します。つまり、インポートされた型を認識します。しかし、実行時には、これらのインポートされたモジュールとメインのAngular2スクリプトでは、node_modulesから404を取得します。私はオプションがないので、どんな提案も歓迎されます。

環境

1. のVisual Studio Professionalの2015 Update 1の
2. DNX 4.6.1と5.0
3. Chromeバージョン49、Firefoxバージョン43、IEバージョン11

更新

これはフォルダ構造である：ここで

MyWebApplication 
    project.json 
    package.json 
    ... 
    -node_modules 
    ... 
    -wwwroot 
    ... 
     -ts 
     -pages 
       orders-page.ts 
     tsconfig.json 
     typings.json 
    ... 

は_Layout.cshtml、受注-page.tsとその誤差、tsconfig.jsonとproject.jsonからのスクリーンショットです：

Answer 1

だから、それはあなたがあなたのtsconfig.jsonでmodule要素を持っており、それがに値だ設定する必要があることが判明した：これは、「node_modules」を「wwwrootに/ JS」からあなたのためのコピー必要なファイルが一気タスクですsystem、これはすでにangular2クイックスタートの一部です。ただし、moduleResolutionという別の要素をtsconfig.jsonに追加し、その値を「node」に設定する必要があります。これはTypescriptコンパイラの追加だけです。前回の記事は、あなたがそれらをするためにはwwwrootの内側にあなたの生成.jsのすべてのファイルを移動するためにゴクゴクタスクを必要とする提案としてTypescript module resolution

はまた、HTTPリクエストを受信して​​いないnode_modulesに関しては、それはそれを行うことはできません参照してください見えるようにする。これは、Typescriptフォルダと同じフォルダ構造に従う必要があります。したがって、/ts/mytest.tsをお持ちの場合は、wwwrootの下に同じ構造が必要です（たとえば、wwwroot/myFolder/ts/mytest.ts）が、myFolderを指している必要があるため、SystemJSの設定について注意してください。 Typscriptフォルダをwwwrootの下に配置している場合は、それをプロジェクトのルートの下に置き、生成された.jsファイルを移動することをお勧めします。

Answer 2

参照したファイルをすべてwwwrootにコピーするだけで、よりうまくいっています。ファイル/ディレクトリの長さの問題については、これはNPMのそれ以降のバージョンでは修正されていますが、Visual Studioはデフォルトで以前のバージョンを使用しますが、変更することができます：here is how。私は2番目のオプションをお勧めします。これを実行した後、node_modulesを削除してNPMパッケージを復元するだけで、そのエラーは再び発生しません。

更新：

<script src="/js/es6-shim.min.js"></script> 
    <script src="/js/system-polyfills.js"></script> 
    <script src="/js/shims_for_IE.js"></script> 

    <script src="/js/angular2-polyfills.js"></script> 
    <script src="/js/system.js"></script> 
    <script src="/js/Rx.js"></script> 
    <script src="/js/angular2.dev.js"></script> 
    <script src="~/js/router.dev.js"></script> 
    <script src="~/js/http.dev.js"></script> 
    <script> 
     System.config({ 
      packages: { 
       appJs: { 
        defaultExtension: 'js' 
       } 
      } 
     }); 
    </script> 

すると、あなたの.TSフォルダと「appJs」を置き換える： あなたは、あなたが必要とするすべてはあなたが角度の使用のhtmlでこれをされ、任意のtypescpriptファイルを参照する必要はありませんそれはあなたのtypescriptですで、角のモジュールをインポートした後のファイル
は、例えば、正常に動作します.jsファイルするtranspiledされている：「angular2 /コア」から

インポート{コンポーネントを};

はどこでも参照することなくnode_modules/angular2/cote.tsからインポートされます。

var gulp = require('gulp'); 


gulp.task('libs', function() { 
    return gulp.src([ 
     'node_modules/angular2/bundles/js', 
     'node_modules/angular2/bundles/angular2.*.js*', 
     'node_modules/angular2/bundles/angular2-polyfills.js', 
     'node_modules/angular2/bundles/http.*.js*', 
     'node_modules/angular2/bundles/router.*.js*', 
     'node_modules/es6-shim/es6-shim.min.js*', 
     'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js', 
     'node_modules/systemjs/dist/*.*', 
     'node_modules/rxjs/bundles/Rx.js' 
    ]).pipe(gulp.dest('./wwwroot/js/')); 
});