Angular 8部署IIS后菜单路由点击无响应问题求助

首先得说下问题的核心：你现在用的是原生HTML的<a href>标签来做路由跳转，这在本地开发服务器（ng serve）上能凑合用，但部署到IIS后，这种方式会触发整页刷新，而且和Angular的SPA路由机制不兼容，才会出现跳转到默认路由的情况。下面是具体的解决步骤：

1. 替换原生a标签为Angular RouterLink指令 #

这是最关键的一步，Angular单页应用的路由跳转必须用官方的routerLink指令，而不是原生href。把你的菜单代码改成这样：

<li>Fresh Vegetable</li>
<li class="menu-item-has-children dropdown">
  <a [routerLink]="['/Wheat']" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false">
    <i class="menu-icon fa fa-cogs"></i>Wheat
  </a>
</li>

• 解释下：[routerLink]="['/Wheat']"会告诉Angular的路由模块在SPA内部导航，不会触发整页刷新，完美适配Angular的路由机制。

2. 检查路由配置是否匹配 #

你提供的路由配置里只有Veg路径的规则，要确保你的路由模块里存在Wheat对应的路由规则，比如：

// 路由配置示例
const routes: Routes = [
  { path:'Veg', component:VegetablesComponent, canActivate :[AuthGuard] },
  { path:'Wheat', component:WheatComponent, canActivate :[AuthGuard] }, // 必须添加这条
  // 别忘了默认路由配置，比如：
  { path: '', redirectTo: '/default', pathMatch: 'full' },
  { path: '**', redirectTo: '/default' }
];

如果没有对应Wheat的路由规则，Angular会自动跳转到默认路由，这也是你现在遇到的情况之一。

3. 修正Base Href和IIS Web.config配置 #

调整index.html的base href #

你现在的<base href="./">不够准确，如果你的项目部署在IIS的虚拟目录ePortal下，应该改成：

<base href="/ePortal/">

这个base href是Angular路由的基准路径，必须和部署的虚拟目录一致，否则路由会找不到正确的路径。

修正Web.config的重写规则 #

你当前的重写规则里，action的url指向了/ePortal/，应该改成指向index.html，让Angular来处理所有路由请求：

<configuration>
  <system.webServer>
    <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" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/ePortal/index.html" /> <!-- 这里改成index.html -->
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

这样配置后，所有非文件、非目录、非api的请求都会重写到index.html，由Angular路由来处理。

4. 确认IIS已安装URL Rewrite模块 #

如果你的IIS还没安装URL Rewrite模块，上面的重写规则是不会生效的。你可以在IIS管理器的模块列表里查看，如果没有的话，需要下载安装该模块。

按照上面的步骤一步步调整后，应该就能解决路由跳转无响应的问题了。

内容的提问来源于stack exchange，提问作者Suhas