2016-03-23 13 views
0

私の表明では、私は静的なjsファイルを提供するために次の設定をしています。Angular2とexpress-traceur 404(見つからない)from system.src.js

app.use('/scripts', express.static(__dirname + '/node_modules')); 

と私が午前のリンクがhttp://localhost:3000/user/

user.ejs

<!DOCTYPE html> 
<html lang="en" ng-app="acApp"> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <title>Responsive Onepage HTML Template | Multi</title> 
    <!-- core CSS --> 
    <link href="/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="/css/font-awesome.min.css" rel="stylesheet"> 
    <link href="/css/animate.min.css" rel="stylesheet"> 
    <link href="/css/userpage.css" rel="stylesheet"> 
    <link href="/css/responsive.css" rel="stylesheet"> 
    <!--[if lt IE 9]> 
    <script src="js/html5shiv.js"></script> 
    <script src="js/respond.min.js"></script> 
    <![endif]--> 
    <link rel="shortcut icon" href="images/ico/favicon.ico"> 
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/images/ico/apple-touch-icon-144-precomposed.png"> 
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/images/ico/apple-touch-icon-114-precomposed.png"> 
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/ico/apple-touch-icon-72-precomposed.png"> 
    <link rel="apple-touch-icon-precomposed" href="/images/ico/apple-touch-icon-57-precomposed.png"> 
    <!-- Angular 2 starts --> 
     <!-- 1. Load libraries --> 
    <!-- IE required polyfills, in this exact order --> 
    <script src="/scripts/es6-shim/es6-shim.min.js"></script> 
    <script src="/scripts/systemjs/dist/system-polyfills.js"></script> 
    <script src="/scripts/angular2/es6/dev/src/testing/shims_for_IE.js"></script> 
    <script src="/scripts/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="/scripts/systemjs/dist/system.src.js"></script> 
    <script src="/scripts/rxjs/bundles/Rx.js"></script> 
    <script src="/scripts/angular2/bundles/angular2.dev.js"></script> 
    <!-- 2. Configure SystemJS --> 
    <script> 
     console.log('reach system.config'); 
     System.config({ 
     packages: {   
      app: { 
      format: 'register', 
      defaultExtension: 'js' 
      } 
     } 
     }); 
     System.import('../js/acApp/main.ts') 
      .then(null, console.error.bind(console)); 
    </script> 
</head> 

<body ng-app="acApp"> 

    <div class="container-fluid"> 
    <mainRouter></mainRouter> 
    </div> 
    <script src="/js/jquery.js"></script> 
    <script src="/js/bootstrap.min.js"></script> 
    <script src="/js/mousescroll.js"></script> 
    <script src="/js/smoothscroll.js"></script> 
</body> 

</html> 

それはクロムの開発者ツールでエラー

system.src.js:1085 GET http://localhost:3000/user/traceur 404 (Not Found) 

をスローで、GETはシステムによって発射されます.src.jsをajax呼び出しとして、

xhr.open("GET", url, true); 

    if (xhr.setRequestHeader) { 
    xhr.setRequestHeader('Accept', 'application/x-es-module, */*'); 
    // can set "authorization: true" to enable withCredentials only 
    if (authorization) { 
     if (typeof authorization == 'string') 
     xhr.setRequestHeader('Authorization', authorization); 
     xhr.withCredentials = true; 
    } 
    } 

    if (doTimeout) { 
    setTimeout(function() { 
     xhr.send(); 
    }, 0); 
    } else { 
    xhr.send(null); 
    } 

私は、それが正しい道である

http://localhost:3000/js/acApp/main.ts 

を取得することです初めてのデバッグをしています。なぜトレーサのために、それは404ですか?

UPDATE

フォルダ構造:

-node_modules 
-public 
--js 
---acApp 
----main.ts 
----app.component.js 
-views 
--user.ejs 
-routes 
--user.js 
-server.js 

の内部server.js

app.use(express.static(path.join(__dirname, 'public'))); 
app.use('/scripts', express.static(__dirname + '/node_modules')); 

答えて

2

実際には、あなたのSystemJSの設定が正しいとは思えません。モジュールファイルにappルートフォルダを構成しました。つまり、指定された構成は、モジュール名がappで始まる場合にのみ適用されます。

あなたの場合、そのようなファイルはjsフォルダの下にあるようです。だから私は、この設定をこのように更新します:

System.config({ 
    map: { 
    acApp: '../js/acApp' 
    }, 
    packages: {   
    acApp: { 
     format: 'register', 
     defaultExtension: 'js' 
    } 
    } 
}); 
System.import('acApp/main') 
    .then(null, console.error.bind(console)); 

あなたuserフォルダがacAppの下に配置されている場合、これは動作するはずです。それ以外の場合は、このフォルダの別のエントリをpackagesブロックに設定する必要があります。

+0

ありがとうございます。私は自分のフォルダ構造を更新しました。これでsystem.src.jsの404エラーが発生します:1085 GET http:// localhost:3000/node_modules/angular2/platform/browser 404(見つからない)とsystem.src.js:1085 GET http:// localhost:3000/user/angular2/router 404(見つからない) – Hammer

+0

'angular2/router'には、' angular2.dev.js'ファイルに加えて 'router.dev.js'ファイルを含める必要があります。 –

+0

'angular2/platform/browser'には' angular2.dev.js'を含めて十分でしょうか?あなたはそれを読み込むときに404がありますか? –

関連する問題