2017-09-07 23 views
0

我正在嘗試配置Angular 4應用程序在本地IIS上運行。爲Angular 4應用程序配置IIS的錯誤

關於如何配置Visual Studio環境,我有followed the instructions from Angular。該應用程序在IIS Express中運行良好。

我已經安裝了IIS Rewrite Module成功地進入我的本地IIS

我創建了一個虛擬目錄我的角度應用程序來執行的,它的英雄應用的功能齊全的旅遊。 enter image description here

當我部署應用程序,我得到404錯誤,因爲服務器沒有找到文件,它,因爲它不包括虛擬目錄路徑: enter image description here

enter image description here

enter image description here

這是我的index.html文件:

<!DOCTYPE html> 
<html> 
<head> 
    <base href="/TOHWeb/src/"> 
    <title>Angular Tour of Heroes</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 
    <!-- Polyfills --> 
    <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/systemjs/dist/system.src.js"></script> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('main.js').catch(function(err){ console.error(err); }); 
    </script> 
</head> 
<body> 
    <my-app>Loading...</my-app> 
</body> 
</html> 

這裏是我web.config

<?xml version="1.0"?> 
<!-- 
    For more information on how to configure your ASP.NET application, please visit 
    http://go.microsoft.com/fwlink/?LinkId=169433 
    --> 
<configuration> 
    <system.web> 
    <compilation debug="true" targetFramework="4.5"/> 
    <httpRuntime targetFramework="4.5"/> 
    </system.web> 
    <system.codedom> 
    <compilers> 
     <compiler language="c#;cs;csharp" extension=".cs" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:6 /nowarn:1659;1699;1701"/> 
     <compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:14 /nowarn:41008 /define:_MYTYPE=\&quot;Web\&quot; /optionInfer+"/> 
    </compilers> 
    </system.codedom> 
    <system.webServer> 
    <validation validateIntegratedModeConfiguration="false"/> 
    <rewrite> 
     <rules> 
     <rule name="Angular Routes" stopProcessing="true"> 
      <match url=".*" /> 
      <conditions logicalGrouping="MatchAll"> 
      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 
      </conditions> 
      <action type="Rewrite" url="/TOHWeb/src/" /> 
     </rule> 
     </rules> 
    </rewrite> 
    </system.webServer> 
</configuration> 

這裏是我的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 l 

片斷我覺得我失去了一些東西很小,被擺脫的路徑,但剛好可以似乎找不到它。感謝您的任何建議!

+0

你如何部署你的應用程序?通常有一個「npm install」的構建步驟,它將爲您獲取所有這些node_modules。沒關係,因爲你不希望那些在源代碼控制中。 – vidalsasoon

+0

現在,我受限於直接在本地IIS中使用Visual Studio中的「發佈」。所以我必須手動將'node_modules'複製到目錄。 – Flea

+0

確實「http://localhost/TOHWeb/node_modules/core-js/client/shim.min.js」給出了一個http代碼200? – vidalsasoon

回答

0

我終於解決了這個問題。我需要將以下子目錄TOHWEB添加到我在index.html文件中的路徑中。

<script src="/TOHWeb/node_modules/core-js/client/shim.min.js"></script> 
<script src="/TOHWeb/node_modules/zone.js/dist/zone.js"></script> 
<script src="/TOHWeb/node_modules/systemjs/dist/system.src.js"></script> 
<script src="systemjs.config.js"></script> 

並且還在systemjs.config.js文件中。

'npm:': '/TOHWeb/node_modules/' 

我的完整的解決方案是這樣的:

的index.html

<!DOCTYPE html> 
<html> 
<head> 
    <base href="/TOHWeb/src/"> 
    <title>Angular Tour of Heroes</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 
    <!-- Polyfills --> 
    <script src="/TOHWeb/node_modules/core-js/client/shim.min.js"></script> 
    <script src="/TOHWeb/node_modules/zone.js/dist/zone.js"></script> 
    <script src="/TOHWeb/node_modules/systemjs/dist/system.src.js"></script> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('main.js').catch(function(err){ console.error(err); }); 
    </script> 
</head> 
<body> 
    <my-app>Loading...</my-app> 
</body> 
</html> 

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:': '/TOHWeb/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/animations': 'npm:@angular/animations/bundles/animations.umd.js', 
      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js', 
      '@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/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.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/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', 
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 
      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', 

      // other libraries 
      'rxjs': 'npm:rxjs', 
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: './main.js', 
       defaultExtension: 'js', 
       meta: { 
        './*.js': { 
         loader: 'systemjs-angular-loader.js' 
        } 
       } 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this); 

的web.config

<?xml version="1.0"?> 
<!-- 
    For more information on how to configure your ASP.NET application, please visit 
    http://go.microsoft.com/fwlink/?LinkId=169433 
    --> 
<configuration> 
    <system.web> 
    <compilation debug="true" targetFramework="4.5"/> 
    <httpRuntime targetFramework="4.5"/> 
    </system.web> 
    <system.codedom> 
    <compilers> 
     <compiler language="c#;cs;csharp" extension=".cs" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:6 /nowarn:1659;1699;1701"/> 
     <compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:14 /nowarn:41008 /define:_MYTYPE=\&quot;Web\&quot; /optionInfer+"/> 
    </compilers> 
    </system.codedom> 
    <system.webServer> 
    <validation validateIntegratedModeConfiguration="false"/> 
    <rewrite> 
     <rules> 
     <rule name="Angular Routes" stopProcessing="true"> 
      <match url=".*" /> 
      <conditions logicalGrouping="MatchAll"> 
      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 
      </conditions> 
      <action type="Rewrite" url="/TOHWeb/src/" /> 
     </rule> 
     </rules> 
    </rewrite> 
    </system.webServer> 
</configuration>