Angular 将 SSR 与加载路线相结合

【问题标题】：Angular combine SSR with loading routesAngular 将 SSR 与加载路线相结合
【发布时间】：2023-03-25 00:25:02
【问题描述】：

我通过这个问题的答案Angular 5 Build routes from API data at startup 作为从后端加载路由的指南，然后我注意到我无法导航到那些我从 API 加载到 routerConfig 的路由。

我找到了原因，结果发现我的应用程序正在使用服务器站点渲染，所以我将initialNavigation 设置为“启用”，这就是我的路由未注册的原因。 Docs 说：“这个值是服务器端渲染工作所必需的。”

我需要解决方案来从 API 加载路由，同时保持 SSR，因为应用程序需要对 SEO 友好，是否有一个好的解决方案来做到这一点？因为我在谷歌上搜索了一段时间，在这种情况下找不到任何有用的东西。

【问题讨论】：

标签： angular routes angular-routing server-side-rendering

【解决方案1】：

这是一个加载外部路由的示例服务。

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

  constructor(
    private categoryService: CategoryService,
    private router: Router
  ) {
  }

  public loadRoutes(): Promise<any> {
    var promise = this.categoryService.list().then(t => {

      const config = this.router.config;
      config.push({ path: '', component: HomeComponent, pathMatch: 'full' });

      t.forEach(category => {
          config.push({ path: category.url, component: CategoryComponent });
      });

      this.router.resetConfig(config);

    });
    return Promise.resolve(promise);
  }
}

然后你的 app-routing.module.ts 应该看起来像这样：

@NgModule({
  imports: [RouterModule.forRoot([])],
  exports: [RouterModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: (routeConfigService: RouteConfigService) => 
        () => routeConfigService.loadRoutes(),
      deps: [RouteConfigService],
      multi: true
    }
  ],
})
export class AppRoutingModule { }

【讨论】：