2016-12-06 5 views
1

これはaspnet core + angular 2プロジェクトです。 私のサイトは、ホストされた環境のjsファイルを見つけることができません(404 Not Found)。 VS2015の開発環境でうまく動作します。systemjs.config.jsホスト環境404の相対パス

私の開発環境では、私のangluar2ファイルは私のaspnetcore_project_directory/wwwroot/appフォルダの下にあります。

angular2のための主要なアプリファイルがaspnetcore_project_directory/wwwrootに/アプリ/ main.js

に内容systemjs.config.js

/** 
* System configuration for Angular samples 
* Adjust as necessary for your application needs. 
*/ 
(function (global) { 
    System.config({ 
     paths: { 
      // paths serve as alias 
      'npm:': 'node_modules/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: 'app', 
      // angular bundles 
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
      // other libraries 
      'rxjs': 'npm:rxjs', 
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api' 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: 'main.js', 
       defaultExtension: 'js' 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      }, 
      'angular-in-memory-web-api': { 
       main: 'index.js', 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this); 

である私は、開発環境でテストしていたときに、この設定は結構ですvs2015で 公開されたコンテンツをIISにコピーしました。ここにあるフォルダ構造はinetpub \ wwwroot \ myprjです。inetpub \ wwwroor \ myprj \ wwwroot \ app私は角のファイルを持っています。

私は

HTTPとして、私のサイトを立ち上げる://example.com/myprj

、すべてのASPNET関連のコードが正しくロード。

代わりの

//example.com/app/main.js:それは角度のモジュールをロードしようとしたときしかし、

のhttpからmain.jsをロードしようとしています

ます。http:

//example.com/myprj/wwwroot/app/main.js私は右の場所にファイルをコピーしていないか、systeで正しくそれを参照していない場合は確認していませんMJSファイル、またはその両方か...

index.htmlを

<!DOCTYPE html> 
<html> 
<head> 
    <base href="/"> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Index - myprj</title> 


     <link rel="stylesheet" href="/myprj/lib/bootstrap/dist/css/bootstrap.css" /> 
     <link rel="stylesheet" href="/myprj/css/site.css" /> 



</head> 
<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="/myprj">myprj</a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="/myprj/SiteManager">Stats</a></li> 
        <li><a href="/myprj">Home</a></li> 
        <li><a href="/myprj/Home/About">About</a></li> 
        <li><a href="/myprj/Home/Contact">Contact</a></li> 
       </ul> 

    <form method="post" id="logoutForm" class="navbar-right" action="/myprj/Account/LogOff"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li> 
       <a title="Manage" href="/myprj/Manage">Hello [email protected]!</a> 
      </li> 
      <li> 
       <button type="submit" class="btn btn-link navbar-btn navbar-link">Log off</button> 
      </li> 
     </ul> 
    <input name="__RequestVerificationToken" type="hidden" value="CfDJ8KehTnO-SvNKgU7UYNtLOEZOnq1O6ETchwbvuVHy4sOk8JDjACikATgFczHo5p0CZiGbPYRpa4cZ0Kx43DFrV9JidqSTjTMdAFcAu_YBlXl54-m0NRAvtOVIZudX7Rm7MD7y006yAcfujAaPK72-j2AGf2L50f7CSxpUyH964Mi22A4IxgVgerkO9aja_rYEow" /></form> 

      </div> 
     </div> 
    </div> 
    <div class="container-fluid body-content"> 


    <!-- Css --> 
    <link rel="stylesheet" href="/myprj/css/site.css" /><link rel="stylesheet" href="/myprj/css/site.min.css" /><link rel="stylesheet" href="/myprj/css/spinkit.css" /> 
    <!-- Js --> 
    <script src="/myprj/lib/jQuery/dist/jquery.js"></script> 

    <script src="/myprj/node_modules/systemjs/dist/system.js"></script>  
    <script src="/myprj/node_modules/core-js/client/shim.js"></script> 
    <script src="/myprj/node_modules/zone.js/zone.js"></script> 
    <script src="/myprj/node_modules/reflect-metadata/reflect.js"></script> 




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

     <hr /> 
     <footer> 
      <p>&copy; 2016 - myprj</p> 
     </footer> 
    </div> 


     <script src="/myprj/lib/jquery/dist/jquery.js"></script> 
     <script src="/myprj/lib/bootstrap/dist/js/bootstrap.js"></script> 
     <script src="/myprj/js/site.js?v=PO_8e6bIDi7De8_fdNEN0tfEE9tOM_13R3l4268U5_Y"></script> 




</body> 
</html> 
+0

こんにちは、私はAngular2についてよく分かりませんが、私は助けようとします。あなたはあなたのhtmlページに 'main.js'をどのように含めているかを示すあなたの質問を更新できますか? –

+0

@FabricioKoch私は、main.jsを明示的に含めません。私は自分のセットアップで、角度のあるフレームワークは、main.jsを取得するために、パッケージローダーのsystemjs.config.jsを検索しますたとえば、上記のコードの「main」をmain: 'myprj/wwwroot/app/main.js'に変更すると、ローダーはhttp://mysite.com/app/myprj/wwwroot/appからロードしようとします/メイン。js – padhu

+0

[OK]を、あなたのHTMLページに含まれていますか? –

答えて

0

サイトはサブディレクトリで実行されているので、私は_Layout.cshtmlファイルにベースを変更しなければなりませんでした。

これは、ほとんどすべてのためのサブディレクトリにホスティングの参照の問題を解決し

<script> 
    document.write('<base href="' + document.location + '" />'); 
</script> 

<base href="/"> 

からそれを変更しました。

+0

私は ''を使用します。私は理解しやすいと思う。 –