IIS部署的.NET Core+Angular网站直接访问子路由显示空白页

问题核心原因 #

1. Angular是单页应用（SPA），所有子路由均为前端路由，直接访问子路由时IIS会尝试查找对应的物理文件，找不到就返回空白或404。
2. 首次访问子路由时，应用依赖的Cache-Data和本地存储数据未完成初始化，导致页面无法正常渲染。

正确解决方案 #

1. 配置IIS URL重写规则（替换你之前的错误规则） #

你之前用的Redirect（重定向）会让所有请求跳转到根路径，引发循环或Cookie问题。正确做法是用Rewrite（重写），将所有非静态文件的请求转发到index.html，让Angular前端路由处理：

修改web.config中的重写规则：

<system.webServer>
  <rewrite>
    <rules>
      <!-- 排除静态文件、目录和API请求，仅重写前端路由 -->
      <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="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

• 该规则会跳过静态资源和API请求，仅将前端路由请求转发到index.html，保留用户访问的子路由路径，让Angular接管路由解析。

2. 统一处理初始化逻辑 #

即使路由重写生效，仍需确保首次访问任意子路由时，Cache-Data和本地存储数据完成初始化，可通过以下两种方式处理：

方案A：在AppComponent初始化时统一处理

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    this.initializeRequiredData();
  }

  private initializeRequiredData(): void {
    // 初始化本地存储数据
    if (!localStorage.getItem('cache-key')) {
      localStorage.setItem('cache-key', JSON.stringify({/* 你的初始数据结构 */}));
    }
    // 初始化后端Cache-Data（示例：请求后端接口获取）
    // this.http.get('/api/initial-cache-data').subscribe(res => {
    //   // 将数据存入缓存服务
    // });
  }
}

方案B：用路由守卫确保初始化完成

如果部分路由必须依赖初始化数据才能访问，可创建全局路由守卫：

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class InitGuard implements CanActivate {
  canActivate(): boolean {
    // 检查初始化状态
    const isInited = localStorage.getItem('cache-key') !== null;
    if (!isInited) {
      this.doInitialization();
    }
    return true;
  }

  private doInitialization(): void {
    // 同步/异步执行初始化操作
    // 若需确保初始化完成后再渲染，可结合Promise/async/await
  }
}

然后在路由模块中配置全局守卫：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { InitGuard } from './init.guard';

const routes: Routes = [
  { path: '', canActivate: [InitGuard], children: [/* 你的所有路由配置 */] }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

验证步骤 #

1. 替换web.config规则后重启IIS站点。
2. 清除浏览器缓存和Cookie，直接访问子路由（如https://name.mywebsite.com/home）。
3. 确认页面正常加载，且初始化数据已正确存入缓存/本地存储。

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