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

Question

我想要部署我的 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 中部署时找不到其他组件

最后：

怎样才能发挥作用呢？我的错误在哪里？

Answer 1

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

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

但是，一旦请求http://yourdomain/loginindex.html并且没有服务器端重定向到服务器，服务器就没有任何资源映射到该路由，并会以错误解析请求404 - Not Found。

一旦您为任何以 a 结尾的请求提供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>