Angular动态路由刷新404及JSON文件变更实时检测问题咨询

Angular单页应用刷新动态路由出现404，本质是服务器无法识别客户端路由，需要让服务器将所有路由请求重定向到应用的入口文件index.html，以下是常用服务器的配置方案：

• Nginx：在站点配置的location块中添加规则

  location / {
    try_files $uri $uri/ /index.html;
  }
  

• Apache：在项目根目录创建.htaccess文件，添加 rewrite 规则

  RewriteEngine On
  # 如果请求的文件或目录不存在，重定向到index.html
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^ index.html [L]
  

• IIS：修改站点根目录的web.config文件，添加URL重写规则

  <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" />
            </conditions>
            <action type="Rewrite" url="/index.html" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
  </configuration>
  

• 无需修改服务器的替代方案：使用Hash路由策略，在路由配置中启用useHash，这样路由会以#开头，刷新时服务器只会解析#之前的路径，不会返回404

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

你当前用fetch请求JSON的方式是正确的（import会被编译打包，无法实时获取文件变更），但需要处理浏览器缓存问题，确保每次应用加载都拉取最新的文件：

• 添加时间戳参数：在请求URL后拼接当前时间戳，让每次请求的URL唯一，避免浏览器使用缓存

  fetch(`./assets/static-json/all-schools.json?t=${Date.now()}`)
    .then(response => response.json())
    .then(data => {
      // 处理动态路由添加逻辑
    });
  

• 配置服务器缓存策略：针对该JSON文件设置缓存规则，比如设置Cache-Control: no-cache或较短的缓存过期时间，确保浏览器不会长期缓存旧文件
• 在AppInitializer中整合：将带时间戳的请求逻辑放在AppInitializer服务中，确保应用启动时就获取最新的路由数据，示例代码：

  export function appInitializer(router: Router) {
    return () => {
      return fetch(`./assets/static-json/all-schools.json?t=${Date.now()}`)
        .then(res => res.json())
        .then(schoolData => {
          // 根据schoolData生成动态路由配置
          const dynamicRoutes = schoolData.map(school => ({
            path: `school/${school.id}`,
            component: SchoolComponent
          }));
          // 更新路由配置
          router.config.push(...dynamicRoutes);
        });
    };
  }
  
  @NgModule({
    providers: [
      {
        provide: APP_INITIALIZER,
        useFactory: appInitializer,
        deps: [Router],
        multi: true
      }
    ]
  })
  export class AppModule { }
  

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