角4应用程序不工作，一旦部署到IIS 8.5

问题描述：

我的环境，需要我用IIS作为Web服务器和Visual Studio 2015年角4应用程序不工作，一旦部署到IIS 8.5

我从angular.io documentation on configuring your project to use IIS遵循的例子完全吻合。

当我点击F5，并且解决方案在Visual Studio中使用IIS Express时，一切正常。

当我发布到我的本地完整版本的IIS时，一切都崩溃了。

当我转到URL http://localhost/Angular4/时，出现403 Forbidden错误。即使src/index.html被设置为我的起始页面，它也不会路由到它。
如果我输入完整路径：http://localhost/Angular4/src/index.html，页面会尝试加载，但是我得到所有404错误，因为Angular不包括虚拟目录。

当我看角的部署文档，它们都为IIS说是要确保IIS重写模块安装，我有。

我一直在寻找如何解决这几天，我感觉像Angular documentation短上来就如何将这个配置到完整版本的IIS，因为他们提到的是具有IIS重写的唯一的事。

是否有其他人将Angular 4应用程序部署到完整版本的IIS？

这里是我有我的配置文件：

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <base href="/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" encoding="utf-8"?> 
<!-- 
    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"/> 
    <httpModules> 
     <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web"/> 
    </httpModules> 
    </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"/> 
    <modules> 
     <remove name="ApplicationInsightsWebTracking"/> 
     <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web" 
     preCondition="managedHandler"/> 
    </modules> 
    <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="/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 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);

哪里是你的角 “应用程序” 文件夹位置。它是否在根？ – Imran

答

试着改变你的基本元素：

<base href="/Angular4/">

角4应用程序不工作，一旦部署到IIS 8.5

相关推荐