組件的 Angular 動態延遲加載

Question

問題

我有一個 Angular 應用程序，其中組件使用裝飾器以特定名稱注冊到全局地圖。 然后可以使用此名稱為此組件動態創建路由（在運行時）。

例如，一個組件以名稱 A 注冊，然后動態地創建一個路由，路徑/route/to/A顯示組件 A。

這個過程工作正常，但所有組件都需要在主包中才能工作。

隨着應用程序越來越大，延遲加載變得越來越必要。 有什么方法可以動態創建這種延遲加載組件嗎？ 我想所有可以動態添加到路由的組件都需要有自己的延遲加載模塊。 我現在缺少的是這些模塊如何與延遲加載過程的動態路由（僅在運行時已知）集成。

我不一定要尋找確切的源代碼，但任何指向潛在方法/類似項目的指針都會非常有幫助。

可能的方法

我可以想象的一種方法是通過在固定 url 下添加延遲加載模塊，然后動態創建到該路徑的重定向

例如

export const routes: Routes = [
  {
    path: "lazy-loaded-static",
    loadChildren: () =>
      import("./lazy-loaded/lazy-loaded.module").then(
        (m) => m.LazyLoadedModule
      ),
  },
  // this is added dynamically later
  {
    path: "lazy-loaded-dynamic",
    redirectTo: "lazy-loaded-static",
  },
]

這個問題是即使在訪問/lazy-loaded-dynamic時，url 也會始終顯示/lazy-loaded-static 。 我希望lazy-loaded-dynamic保留下來。

Answer 1

我找到了一個解決方案，方法是查找現有的延遲加載路由，然后為新的動態路由重新使用該路由的loadChildren函數：

在app.routing.ts

/**
 * Static routes that are added in the AppModule
 */
export const allRoutes: Routes = [
   {
    path: "lazy-loaded-static",
    loadChildren: () =>
      import("./lazy-loaded/lazy-loaded.module").then(
        (m) => m.LazyLoadedModule
      ),
  },
];

/**
 * Main app RouterModule with centrally configured allRoutes.
 */
export const routing: ModuleWithProviders<RouterModule> = RouterModule.forRoot(allRoutes);

在運行時添加新路由的服務中

export class DynamicRoutesService {
  constructor(private router: Router) {}

  /**
   * Initialise route dynamically while respecting existing routes.
   */
  initRouting() {
    const existingRoutes = this.router.config;
    const lazyLoaded = existingRoutes.find(
      (route) => route.path === "lazy-loaded-static"
    );
    const newRoute = {
      path: "lazy-loaded-dynamic",
      loadChildren: lazyLoaded.loadChildren,
    };

   this.router.resetConfig([newRoute, ...existingRoutes]);
  }
}