Lazy loading not working for nested lazy routes

Note that at the moment lazy loading doesn’t work for nested routes. If you have route like lazy/lazy_child if you navigate first to lazy and then to lazy_child everything will work. However if you go directly to lazy/lazy_child Router will report unknown route error, since child routes will not be translated before Route matching mechanism kicks in.

Steps to reproduce

• Create a lazy loaded module with nested routes e.g.

// main routes
{ path: 'lazy', loadChildren: 'path/to/some/route/lazy.module#LazyModule' }

// routes in LazyModule
{ path: '', component: LazyComponent },
{ path: 'child', component: LazyChildComponent }

• Navigate to translated version of /lazy/child in language other than en e.g.

/de/muessiges/kind

Current behavior Router reports NavigationError as route has not been translated at the moment of route matching.

Expected behavior All child lazy routes should be translated and Router should properly find requested route.

Explanation LocalizeRouter currently listens to RouteConfigLoadEnd, but this event only signals that child module has been loaded. Child routes are still not available. Additionally RouteConfigLoadEnd returns only requested route, not the module factory from which the child routes could be extracted.

Further steps Discuss with Angular team on possible solutions.

[meeroslav]

Finally yes. I will implement the solution in the upcoming days.

[TimeTravelersHackedMe]

Looks like this is not working with nested lazy loading… top level lazy loaded components get loaded but lazy loaded components with routes declared with forChild(routes) get the “Cannot match any routes” error

Here’s an example where the terms/privacy policy page work as expected but the lazy loaded module breaks with the Cannot match any routes error:

import { Location } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { LocalizeRouterModule, LocalizeRouterSettings, LocalizeParser } from 'localize-router';
import { LocalizeRouterHttpLoader } from 'localize-router-http-loader';

export function HttpLoaderFactory(translate: TranslateService, location: Location, settings: LocalizeRouterSettings, http: HttpClient) {
  return new LocalizeRouterHttpLoader(translate, location, settings, http);
}

const routes: Routes = [
  { path: '', loadChildren: './pages/home/home-tabs/home-tabs.module#HomeTabsPageModule' },
  { path: '', loadChildren: './pages/category/category-tabs/category-tabs.module#CategoryTabsPageModule' },
  { path: 'terms', loadChildren: './pages/terms/terms.module#TermsPageModule' },
  { path: 'privacy', loadChildren: './pages/privacy-policy/privacy-policy.module#PrivacyPolicyPageModule' },
  { path: 'search', loadChildren: './pages/search/search.module#SearchPageModule' },
  { path: 'video', loadChildren: './pages/video/video.module#VideoPageModule' }
];

@NgModule({
  imports: [
    LocalizeRouterModule.forRoot(routes, {
      parser: {
        provide: LocalizeParser,
        useFactory: HttpLoaderFactory,
        deps: [TranslateService, Location, LocalizeRouterSettings, HttpClient]
      }
    }),
    RouterModule.forRoot(routes)
  ],
  exports: [LocalizeRouterModule, RouterModule]
})
export class AppRoutingModule { }

And here’s the lazy loaded module’s routes:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { LocalizeRouterModule } from 'localize-router';

import { HomeTabsPage } from './home-tabs.page';

const routes: Routes = [
  {
    path: 'browse',
    component: HomeTabsPage,
    children: [
      {
        path: 'popular',
        children: [
          {
            path: '',
            loadChildren: '../popular/home-popular.module#HomePopularPageModule'
          }
        ]
      },
      {
        path: 'latest',
        children: [
          {
            path: '',
            loadChildren: '../latest/home-latest.module#HomeLatestPageModule'
          }
        ]
      },
      {
        path: 'trending',
        children: [
          {
            path: '',
            loadChildren: '../trending/home-trending.module#HomeTrendingPageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/browse/popular',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/browse/popular',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    LocalizeRouterModule.forChild(routes),
    RouterModule.forChild(routes),
    TranslateModule
  ],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}