ExpressとTypescriptの統合

こんにちは、ありがとうございました。ExpressとTypescriptの統合

最近、Node.JSでCronアプリを実行しました。 ExpressでNode.jsサーバーがホストするWebサイトを追加します。私は別のフォルダにこのtypescriptですウェブサイトを開発し、そして時間は私のNode.jsサーバに統合するために来たとき、私は論文なエラーを持っている：

shim.min.js  : 1 Uncaught SyntaxError: Unexpected token < 
zone.js   : 1 Uncaught SyntaxError: Unexpected token < 
Reflect.js   : 1 Uncaught SyntaxError: Unexpected token < 
system.src.js  : 1 Uncaught SyntaxError: Unexpected token < 
systemjs.config.js : 8 Uncaught SyntaxError: Unexpected token { 
app    : 1 Uncaught SyntaxError: Unexpected token < 
(index)   : 28 Uncaught SyntaxError: Unexpected token < 
Evaluating http://localhost/public/app 
Error loading http://localhost/public/app

ここに私のフォルダ構成は

project_treeです

ここに私の問題と思われるindex.htmlと私のsystemjs.config.jsがあります。 node_moduleをパブリックとルートに置くと、それが動作することを知っておく必要があります。パスの問題だと思う。

<html> 
    <head> 
    <title>Cts</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="style.css"> 

    <link rel="icon" type="image/png" href="icone.png" id="icone" /> 

    <script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCCGhv7ryot0iu9ufz-BXlZBZxcYhB7q8c"> 
    </script> 
    <script src="https://code.angularjs.org/tools/traceur-runtime.js"></script> 
    <script src="https://code.angularjs.org/tools/system.js"></script> 
    <!--<script async defer src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC6bfdXKHUFQltpGyCgC6cmVBx-gDWvxlM"></script>--> 
    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="../node_modules/core-js/client/shim.min.js"></script> 
    <script src="../node_modules/zone.js/dist/zone.js"></script> 
    <script src="../node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="../node_modules/systemjs/dist/system.src.js"></script> 



    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
    <base href="/" > 

    </head> 
    <!-- 3. Display the application --> 
    <body> 
      <my-app>Loading...</my-app> 
    </body> 
</html>

そして、私のsystemjs.config.js

(function(global) { 
    // map tells the System loader where to look for things 
    var map = { 
    'app':      'app', // 'dist', 
    '@angular':     '../node_modules/@angular', 
    'angular2-in-memory-web-api': '../node_modules/angular2-in-memory-web-api', 
    'rxjs':      '../node_modules/rxjs', 
    'mapbox-gl':     '../node_modules/mapbox-gl' 

    }; 
    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
    'app':      { main: 'main.js', defaultExtension: 'js' }, 
    'rxjs':      { defaultExtension: 'js' }, 
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, 

    }; 
    var ngPackageNames = [ 
    'common', 
    'compiler', 
    'core', 
    'forms', 
    'http', 
    'platform-browser', 
    'platform-browser-dynamic', 
    'router', 
    'router-deprecated', 
    'upgrade', 
    ]; 
    // Individual files (~300 requests): 
    function packIndex(pkgName) { 
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    } 
    // Bundled (~40 requests): 
    function packUmd(pkgName) { 
    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 
    } 
    // Most environments should use UMD; some (Karma) need the individual index files 
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; 
    // Add package entries for angular packages 
    ngPackageNames.forEach(setPackageConfig); 
    var config = { 
    map: map, 
    packages: packages 
    }; 
    System.config(config); 
})(this);

私は私はあなたの問題はあなたのエクスプレスアプリは静的なファイルを提供されていないということだと思うあなたの答えに感謝

出典

2016-08-05 TakahT

、あなたは私の問題を理解願っています../node_modulesからですが、パブリックフォルダからのみ（これは正しい方法です）。また、Unexpected token <のエラーについては、要求されたファイルを提供できない場合、デフォルトでExpressがindex.htmlを送信しているため説明します。あなたのをあなたのpublicフォルダに置くと、すべて正常に動作するというあなたの発言も説明します。

可能な解決策は、publicフォルダ内のvendorフォルダからクライアント側のライブラリを提供することです。 gruntfileにタスクを作成して、必要なベンダーファイルを自動的にコピーすることができます。もう1つの解決策は、CDNからすべてのクライアントサイドライブラリを提供することです。だからあなたのindex.htmlで、これは多分次のようになります。

<script src="vendor/core-js/client/shim.min.js"></script>

または

<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>

出典

2016-08-05 23:16:22 Jonas

本当に便利だったこと！答える時間をとってくれてありがとう！ – TakahT

ようこそ。この回答があなたの問題を解決した場合は、それをあなたの質問の受け入れられた回答としてマークする必要があります。 – Jonas

答えて

関連する問題