时间戳

首页 > 解决方案 > 将 Angular 部署到 IIS 7.5 无法正常工作

angular - 将 Angular 部署到 IIS 7.5 无法正常工作

问题描述

我，想部署我的 Angular 项目，但它丢失了组件

我的过程

步骤1：

我执行cmd：

ng-build --prod

第2步：

我在 IIS 中添加网站，路径在dist

第 3 步：

索引页面工作正常但未找到其他组件登录 404

http://localhost/login HTTP 错误 404.0 - 未找到

在文件App.Module.Ts我是配置路由

const routesConfig:Routes=
[
  {path:"kinds",component:KindsComponent},
  {path:"",component:FilmsComponent},
  {path:"films",component:FilmsComponent},
  {path:"login",component:LoginComponent},
  {path:"accounts",component:AccountsComponent},
  {path:"customers",component:CustomersComponent},
  {path:"director",component:DirectorComponent}
];

再次注意： http://localhost工作正常，但在我构建项目并在 IIS 中部署时未找到其他组件

最后：

它如何工作？我的错误在哪里？

标签： angulariisbuild

解决方案

您需要在 IIS 中为任何路由创建指向index.html的重定向，因为在 Angular SPA 中，应用程序负责路由而不是服务器，请参见此处Angular routing。

一旦请求例如http://yourdomain/ -> index.html得到服务，最后应用程序被引导。

但是，一旦请求例如http://yourdomain/login并且没有服务器端重定向到index.html服务器，则没有任何资源映射到该路由并使用404 - Not Found错误解析请求。

一旦您为任何以错误结尾的请求提供index.html404 - Not Found（除了诸如 css、图像字体之类的资产），Angular 路由器就会接管并在应用程序启动后显示相应的视图。

这是 IIS 的示例重写规则： 

<rule name="Angular" 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="/" />
</rule>

推荐阅读