Angular4+ 路由器重定向到 IIS 中的主页

Angular4+ router redirects to home page in IIS

几周以来我一直在学习 Angular 4+。

我创建了一个在开发模式下运行良好的 Web 应用程序,但是当我第一次尝试在 IIS 中部署该应用程序时,由于众所周知的

404 page not found

直接从浏览器地址栏输入地址时出错。

我应用了各种线程中描述的解决方案

我的应用程序的基本 href 是“/ePortal/”,我的主要应用程序路由定义如下:

export const appRoutes: Routes = [
   { path: 'login', component: LoginComponent },
   { path: 'logout', component: LogoutComponent },
   { path: '', redirectTo: '/publicarea', pathMatch: 'full' },
   { path: '**', component: PageNotFoundComponent }
];

然后我将子路由定义为:

const publicAreaRoutes: Routes = [{
   path: 'publicarea',
   component: PublicAreaComponent,
   children:[
      { path: 'events', component: EventsComponent},
      { path: 'comunicazioni', component: ComunicazioniComponent},
   ]
}];

问题是,如果我尝试使用地址栏导航至:

http://localhost/ePortal/publicarea/events

我不断被重定向到

http://localhost/ePortal/publicarea

正如我之前所说,该应用程序在开发中运行良好,问题可能是由于 IIS 规则重写的组合,我用来修复上面的 404 页面未找到错误和路由重定向到 publicare 当路径是 ''

{ path: '', redirectTo: '/publicarea', pathMatch: 'full' },

这是我正在使用的 web.config 文件:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
   <system.webServer>
      <rewrite>
         <rules>
           <rule name="angularjs routes" stopProcessing="true">
              <match url=".*" />
              <conditions logicalGrouping="MatchAll">
                 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                 <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                 <add input="{REQUEST_URI}" pattern="^/$" negate="true"/>
              </conditions>
              <action type="Rewrite" url="/ePortal" />
           </rule>
        </rules>
     </rewrite>
  </system.webServer>
</configuration>

关于如何解决这个问题有什么建议吗?我错过了什么吗? 非常感谢

部署到 IIS 时应使用 HashLocationStrategy。

https://angular.io/api/common/HashLocationStrategy

如有其他需要,请查找 问题。

可能你需要做的就是改变

<action type="Rewrite" url="/ePortal" />

<action type="Rewrite" url="/ePortal/index.html" />

当您重定向到根目录时,它会删除 url 的末尾,您需要直接引入索引文件。

以下是有关此问题的有用信息: https://gingter.org/2017/03/20/deep-link-angular-spa-iis/