Angular 客户端动态路由重定向到页面重新加载时的通配符路由

Question

在角度应用程序中，我有数百条动态路线。在 API 调用后添加到路由配置中。 但是当我使用动态路由重新加载同一页面时，浏览器将请求发送到服务器并返回 404 not found。

客户端路由未在服务器端解析。

用于添加我正在使用的动态路线

fetch('./assets/static-json/all-schools.json').then()

这是 App_Initializer_service 中的异步调用。

我希望每当应用程序在浏览器中加载时每次应用程序检测到 json 文件更改。

import * as data from '/assets/static-json/all-schools.json';

编译一次，然后未检测到更改

Answer 1

Angular 在客户端处理路由，当您重新加载具有动态路由的页面时，服务器不知道这些路由，如果在服务器上找不到路由，则会返回 404。

解决方案1：更改.htaccess以在重写规则中仅处理index.html，这样服务器端就不会给出404并且将回退到index.html，这是你的角度的应用程序index.html。在此文件中，角度的路由将接管。

解决方案 2： 检测 AppIntializerService 中 json 文件的更改。

  @Injectable({
      providedIn: 'root',
    })
 export class AppInitializerService {

  constructor(private http: HttpClient, private router: Router) {}

  initializeApp(): Promise<any> {
    return this.http.get('/assets/static-json/all-schools.json')
      .toPromise()
      .then((data: any) => {
        // Assuming your data is an array of dynamic routes
        data.forEach((route: any) => {
          this.router.config.push({
            path: route.path,
            component: route.component,
            // Add any route properties here
          });
        });
      })
      .catch((error) => {
        console.error('Failed to load dynamic routes:', error);
      });
  }
}

并在 root 中提供它

// App initializer provider
export function appInitializerFactory(appInitializerService: AppInitializerService) {
  return () => appInitializerService.initializeApp();
}

您的模块提供商将如下所示

// In your module providers array:
providers: [
  {
    provide: APP_INITIALIZER,
    useFactory: appInitializerFactory,
    deps: [AppInitializerService],
    multi: true,
  },
],