Lazy loading not working for nested lazy routes

[meeroslav]

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.

[2f4f4f]

Can you suggest a temporary workaround?

[meeroslav]

At the moment unfortunately not, except for not using lazy loading.

[NKjoep]

Hi, to me looks like it is not working with any child route.

Can you confirm?

[meeroslav]

@NKjoep What do you mean by "any child route"?

[NKjoep]

I meant not lazy loaded child route. However I think I fixed the issue I had. I ended with a broken configuration.

[PSTime]

Hi, do you have any updates for this issue ?

[Messilius]

A work around to this is to add a route in others translation language. If you have many languages and many subroutes that can be painfull but if like me you have to translate 2 languages, you're going to be able to use lazyloading and copy paste urls that the users can enter in the browser to arrive directly on the web page.

For Exemple:

In appModule
export const routes: Routes = [
{
path: '',
component: NavigationComponent,
children: [
{
path: 'admin', loadChildren: './+admin/admin.module#AdminModule'
},
{
path: 'users', loadChildren: './+users/users.module#UsersModule'
}
]
}
];

In submodule:

export const routes: Routes = [
{
path: '',
component: AdminComponent,
children: [
{ path: '', component: ListUserFormComponent },
{ path: 'profile/:userid', component: UserDetailComponent },
{ path: 'profile/:userid/cat/:catid', component: CatDetailComponent }, // english
{ path: 'profile/:userid/chat/:catid', component: CatDetailComponent }, // french
{ path: 'profile/:userid/cat/:catid/fur', component: FurDetailComponent }, // english
{ path: 'profile/:userid/chat/:catid/fourrure', component: FurDetailComponent } // french
]
}
];

fr.sjon :
"ROUTES.partners": "partners",
"ROUTES.cat": "chat",
"ROUTES.fur": "fourrure",

en.json:
"ROUTES.partners": "partners",
"ROUTES.cat": "cat",
"ROUTES.fur": "fur",

[NKjoep]

@Messilius thanks for the tip! have you actually tried that already? :) does it work?

[Messilius]

It work in the project im currently doing. The only thing that dont work is when there is 2 subsequent lazymodule than a lazy child. But with one layer of lazy loading and then child components it work.

[TaridaGeorge]

Any update on this? It's a problem of angular or a problem of this module?

[2f4f4f]

It's dependent on angular updating the router, here's the issue: angular/angular#16282

Latest comment from the angular team here: angular/angular#16308 (comment)

[ghost]

Dear Meeroslav,

I'm stuck with this problem of child routes and lazy loading.
Route translations is a must for multi languages website.

I have made a GIT that reproduce exactly the problem (if it can help you)...

Here is it : https://github.com/MisterEffix/localize-router-and-sub-routing

[NKjoep]

As I commented before in some other PR, if you look at this fn from the sources:

    /**
     * Change language and navigate to translated route
     * @param lang
     * @param extras
     */
    LocalizeRouterService.prototype.changeLanguage = function (lang, extras) {
        var _this = this;
        if (lang !== this.parser.currentLang) {
            var rootSnapshot_1 = this.router.routerState.snapshot.root;
            this.parser.translateRoutes(lang).subscribe(function () {
                _this.router.navigateByUrl(_this.traverseRouteSnapshot(rootSnapshot_1), extras);
            });
        }
    };

Everything is ok (page stays the same and translations are in place) until the _this.router.navigateByUrl() is called.

What do you think?

(ps = also I'd use a take(1) there --> this.parser.translateRoutes(lang).take(1).subscribe(...)

[Empereol]

Has there been any resolution to this?

[meeroslav]

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

[robinabganpat]

Currently having the same issue as mentioned here. I'm curious about the solution you came up with.

[DominicBoettger]

My production build is always broken and i get a 404 when loading the lazyloaded frontpage. I get a 404 when loading the page. Everything works when not creating a production build.

[marko999]

any updates on this one? I mean, no pressure :)

[meeroslav]

@marko999, this bug was fixed and closed 4 days ago.

Please upgrade to version 1.0.0-rc.3 to see the changes.
If you want to see it in action, refer to demo/cli in the solution.

There will be a public github page soon.

Let me know if there is anything else I can help you with.

[2f4f4f]

Thanks for fixing the bug!

I haven't had time to check out the new version yet but do you think there will be any problems with extending your LocalizeRouterConfigLoader to catch errors from the load() method like this?

[meeroslav]

@CamusAran, it's safe to extend LocalizeRouterConfigLoaderas long as the functionality is kept. There might be problems though if some other Module creates it's own override of SystemJsNgModuleLoader and then those two end up in a race condition.

Maybe you'd like to propose improvement of the LocalizeRouterConfigLoader by adding error handler on load?

[2f4f4f]

@meeroslav I did think about suggesting that but I don't know if it is in within the scope of the package. Ideally it'd be implemented upstream but that issue is over a year old now.

What do you think?

[meeroslav]

@CamusAran generally, it's not within the scope of this package. But then again, having conflict with another loader is not desired behavior either.

If you think this error handling is still needed, we can make LocalizeRouterConfigLoader extendable and replaceable. That way you can create external package for people that need error handling.

[2f4f4f]

@meeroslav Thanks, I'll get back to you once I've had a chance to work on it (most likely next year).

[marko999]

Still doesn't work for me, changeLanguage method is breaking redirecting to default route for that module...other case when it needs a workaround is when user wants to land to lazy loaded child route, I need pathMatch: 'full' and duplicated translated route in order to make it work

[Empereol]

This also still does not work for me...

It appears once I successfully navigate to the route in one language, it will start working for the others. For instance, the route in English is results which coincides directly with the path specified in the routes ({ path: "results", component: ResultsComponent })... In this case, I can navigate to that route in English because the path string is identical to the localized route. Once I navigate there, I can then change language and it will work correctly... Even navigating away and then back in another language will now work.

But if I try to navigate to the route by the localized value (not the exact value specified in the routes.path) I get redirected as if the route doesn't exist...

url: "/fr/search-fr/resultsfr"
urlAfterRedirects: "/fr/search-fr"

[Empereol]

Looking at the demo/cli example app... When I console out the instantiated LocalizeRouterService each of the routes in the object have a data.localizeRouter.path property which coincides with the path specified in the RouterModule routes.

When I do the same for my lazy loaded module, there is no data.localizeRouter.path property for each of the routes.

[Empereol]

I fixed my problem by creating explicit routing modules which get imported into the main module like the demo/cli app has done...

ex:

core-router.module.ts // module that imports and exports RouterModule and LocalizeRouterModule
core.module.ts // imports CoreRouterModule

This did create a new issue when trying to load the lazy module... Error: StaticInjectorError[InjectionToken CompositionEventMode]:

This is currently being discussed (with a temporary fix) here: angular/angular-cli#8917 (comment)

[marko999]

I have dig a little bit more why doesn't work in my case and found out that LocalizeRouterService.traverseRouteSnapshot when checking for segments is excluding paths that have 'empty' fragments as a parent...

this line:

if (snapshot.firstChild && snapshot.firstChild.routeConfig && snapshot.firstChild.routeConfig.path) {

will skip route configuration when lazy module has default route set as empty with parent component in, something like this:

const lazyRoutes: Routes = [
    {
      path: '',
      component: ContainerComponent,
      children: [
        {
          path: 'child1',
          component: ChildComponent1
        },
        {
          path: 'child2',
          component: ChildComponent2
        }, 
  ]

changeLanguage executed on the path <lazyModulePath>/child1 will not work

[marko999]

can we reopen this issue @meeroslav ? or I can create a new issue with repro...

[furqan-shakir]

I had the same issue too, it has been a year, too bad that it's not fixed yet.

[rafa-suagu]

@meeroslav some news here?

[samgevorgyan]

@meeroslav changeLanguage executed on the path

lazyModulePath/child1

will not work.

some news here?

[wojiusihshen1]

I just started using Angular. Very sad to see such problem is still not fixed for more than a year. I am looking for solution for a similar problem.

lazyModulePath/:parameter

[oxiumio]

Even if this was resolved at any point of time, there had to be a regression. As of today only top level route of a lazy-loaded module (the one with empty string path) is loaded properly, any child routes it contains resolve in Cannot match any routes error.
It would be great if we could reopen this issue @meeroslav

[Roelensdam]

The issue seems to come back with the upgrade to Angular 6.

I have the same issue. When changing language, the component reload (it occurs when hitting navigate or navigateByUrl in the 'changeLanguage` function)

The function : LocalizeRouterService.traverseRouteSnapshot will return a redundant url path like "fr/index/index" and then the router navigate to an unknown url => go back to home.

EDIT : After fixing the function LocalizeRouterService.traverseRouteSnapshot to return a valid url like "fr/index".
The component reload (ngOnInit is called) when a navigation occurs in the changeLanguage function :

this.router.resetConfig(this.parser.routes);
        if (useNavigateMethod) {
          this.router.navigate([url], extras);
        } else {
          this.router.navigateByUrl(url, extras);
        }

[meeroslav]

The issue should be resolved in both 1.0.1 version (for Angular 4.0.0-5.2.5) and 2.0.0-RC.1 (for Angular 6/7)

There was a bug in path traversing when translating the full route.

[alvarofelipe12]

It worked for me in the version 2.0.0-RC.2 (for Angular 6/7) but it doesn't in the 2.0.0-RC.1 but i'm glad that its solved. Thanks a lot guys!

[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 {}

[timmyrosen]

Are there any updates on this? I'm having the same issue aswell.

Here is my lazy loaded module routing:

export const routes: Routes = [
    {
        path: '',
        component: AuthDashboardPage,
        children: [
            {
                path: '',
                loadChildren: () => import('../reservations/reservations.module').then(m => m.ReservationsModule)
            },
            {
                path: 'profile',
                loadChildren: () => import('../profile/profile.module').then(m => m.ProfileModule)
            }
        ]
    }
];

My first child route with the empty path (ReservationsModule) gets loaded correctly, but the second path "profile" does not. It redirects to the home page.

Here is my lazy loaded module:

@NgModule({
    imports: [SharedModule, LocalizeRouterModule.forChild(routes), routing, ...materialModules],
    exports: [],
    declarations: [AuthDashboardPage],
    providers: []
})
export class AuthDashboardModule {}

[coolwoc]

@timmyrosen I did make it work.
Your code seems good to me at the first glaze.
Have you tried loadChild Components like
loadChildren: './core/site/static/static.module#StaticModule'
( can you try this to check! )

[rafa-suagu]

@timmyrosen This library seems to be dead, we have tried all the suggested fixes in this library but none works. We already migrated to https://github.com/gilsdav/ngx-translate-router and everything works like a charm with a good maintainer support.

Also works completely with Angular Universal.

[hymenoby]

Hello,
Is there any fix for this problem yet ?

[ProfessorManhattan]

@hymenoby

IIRC, I could only get it working by specifying a path for everything.
This configuration is working for me:

import { LocalizeParser, LocalizeRouterModule, LocalizeRouterSettings, ManualParserLoader } from 'localize-router';
import { RouterModule, Routes } from '@angular/router';

import { CategoryTabsPage } from '@base/pages/category/category-tabs/category-tabs.page';
import { HomeTabsPage } from '@base/pages/home/home-tabs/home-tabs.page';
import { HttpClient } from '@angular/common/http';
import { Location } from '@angular/common';
import { NgModule } from '@angular/core';
import { PredictivePreloadStrategy } from '@base/core/predictive-preload';
import { SettingsTabsPage } from '@base/pages/settings/settings-tabs/settings-tabs.page';
import { TranslateService } from '@ngx-translate/core';
import { UserTabsPage } from '@base/pages/user/user-tabs/user-tabs.page';
import { environment } from '@environment';

export function LocalizeRouterFactory(
  translate: TranslateService,
  location: Location,
  settings: LocalizeRouterSettings,
  http: HttpClient
) {
  settings.alwaysSetPrefix = false;
  settings.defaultLangFunction = () => {
    return environment.languages.default;
  };
  return new ManualParserLoader(translate, location, settings, environment.languages.supported, 'ROUTES.');
}

const routes: Routes = [
  {
    path: 'all',
    component: HomeTabsPage,
    children: [
      {
        path: 'latest',
        data: {
          preload: true,
          rss: true
        },
        children: [
          {
            path: '',
            loadChildren: () => import('@base/pages/home/latest/home-latest.module').then(m => m.HomeLatestPageModule)
          }
        ]
      },
      {
        path: 'popular',
        data: {
          preload: true,
          rss: true
        },
        children: [
          {
            path: '',
            loadChildren: () =>
              import('@base/pages/home/popular/home-popular.module').then(m => m.HomePopularPageModule)
          }
        ]
      },
      {
        path: 'trending',
        data: {
          preload: true,
          rss: true
        },
        children: [
          {
            path: '',
            loadChildren: () =>
              import('@base/pages/home/trending/home-trending.module').then(m => m.HomeTrendingPageModule)
          }
        ]
      }
    ]
  },
  {
    path: 'category/:topic',
    component: CategoryTabsPage,
    children: [
      {
        path: 'popular',
        data: {
          preload: true,
          rss: true
        },
        children: [
          {
            path: '',
            loadChildren: () =>
              import('@base/pages/category/popular/category-popular.module').then(m => m.CategoryPopularPageModule)
          }
        ]
      },
      {
        path: 'latest',
        data: {
          rss: true,
          preload: true,
          delay: 15000
        },
        children: [
          {
            path: '',
            loadChildren: () =>
              import('@base/pages/category/latest/category-latest.module').then(m => m.CategoryLatestPageModule)
          }
        ]
      },
      {
        path: 'trending',
        data: {
          rss: true,
          preload: true,
          delay: 15000
        },
        children: [
          {
            path: '',
            loadChildren: () =>
              import('@base/pages/category/trending/category-trending.module').then(m => m.CategoryTrendingPageModule)
          }
        ]
      }
    ]
  },
  {
    path: 'copyright',
    data: {
      ondemand: true
    },
    loadChildren: () => import('@base/pages/legal/copyright/copyright.module').then(m => m.CopyrightPageModule)
  },
  {
    path: 'infringement',
    data: {
      ondemand: true
    },
    loadChildren: () => import('@base/pages/legal/infringement/infringement.module').then(m => m.InfringementPageModule)
  },
  {
    path: 'terms',
    data: { ondemand: true },
    loadChildren: () => import('@base/pages/legal/terms/terms.module').then(m => m.TermsPageModule)
  },
  {
    path: 'privacy',
    data: {
      ondemand: true
    },
    loadChildren: () =>
      import('@base/pages/legal/privacy-policy/privacy-policy.module').then(m => m.PrivacyPolicyPageModule)
  },
  {
    path: 'search/:query',
    data: {
      preload: true,
      rss: true
    },
    loadChildren: () => import('@base/pages/search/search.module').then(m => m.SearchPageModule)
  },
  { path: 'search', redirectTo: '/search/', pathMatch: 'full' },
  {
    path: 'settings',
    component: SettingsTabsPage,
    children: [
      {
        path: 'general',
        children: [
          {
            path: '',
            data: {
              ondemand: true,
              user: true
            },
            loadChildren: () =>
              import('@base/pages/settings/general/settings-general.module').then(m => m.SettingsGeneralPageModule)
          }
        ]
      },
      {
        path: 'customize',
        children: [
          {
            path: '',
            data: {
              ondemand: true,
              user: true
            },
            loadChildren: () =>
              import('@base/pages/settings/customize/settings-customize.module').then(
                m => m.SettingsCustomizePageModule
              )
          }
        ]
      },
      {
        path: 'security',
        children: [
          {
            path: '',
            data: {
              ondemand: true,
              user: true
            },
            loadChildren: () =>
              import('@base/pages/settings/security/settings-security.module').then(m => m.SettingsSecurityPageModule)
          }
        ]
      }
    ]
  },
  {
    path: 'user/:uid',
    component: UserTabsPage,
    children: [
      {
        path: 'favorites',
        data: {
          delay: 21000,
          preload: true,
          rss: true,
          user: true
        },
        loadChildren: () =>
          import('@base/pages/user/favorites/user-favorites.module').then(m => m.UserFavoritesPageModule)
      },
      {
        path: 'history',
        data: {
          delay: 21000,
          preload: true,
          rss: true,
          user: true
        },
        loadChildren: () => import('@base/pages/user/history/user-history.module').then(m => m.UserHistoryPageModule)
      },
      {
        path: 'playlists',
        data: {
          delay: 21000,
          preload: true,
          rss: true,
          user: true
        },
        loadChildren: () =>
          import('@base/pages/user/playlists/user-playlists.module').then(m => m.UserPlaylistsPageModule)
      }
    ]
  },
  {
    path: 'video/:video',
    loadChildren: () => import('@base/pages/video/video.module').then(m => m.VideoPageModule),
    data: {
      preload: true
    }
  },
  {
    path: 'welcome',
    loadChildren: () => import('@base/pages/home/default/home-default.module').then(m => m.HomeDefaultPageModule),
    data: {
      preload: true
    }
  },
  {
    path: '',
    redirectTo: '/welcome',
    pathMatch: 'full'
  }
];

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

And the package.json is here:

{
  "name": "megabyteapp",
  "version": "0.0.2",
  "private": true,
  "dependencies": {
    "@angular/animations": "^9.0.0-rc.7",
    "@angular/cdk": "^9.0.0-rc.6",
    "@angular/common": "^9.0.0-rc.7",
    "@angular/core": "^9.0.0-rc.7",
    "@angular/fire": "^5.3.0-rc.4",
    "@angular/forms": "^9.0.0-rc.7",
    "@angular/material": "^9.0.0-rc.6",
    "@angular/platform-browser": "^9.0.0-rc.7",
    "@angular/platform-browser-dynamic": "^9.0.0-rc.7",
    "@angular/platform-server": "^9.0.0-rc.7",
    "@angular/router": "^9.0.0-rc.7",
    "@angular/service-worker": "^9.0.0-rc.7",
    "@capacitor/core": "^1.0.0",
    "@ionic-native/app-availability": "^5.15.0",
    "@ionic-native/core": "^5.15.0",
    "@ionic-native/facebook": "^5.15.0",
    "@ionic-native/firebase": "^5.15.0",
    "@ionic-native/google-plus": "^5.15.0",
    "@ionic-native/launch-review": "^5.19.1",
    "@ionic-native/social-sharing": "^5.15.0",
    "@ionic-native/splash-screen": "^5.15.0",
    "@ionic-native/status-bar": "^5.15.0",
    "@ionic-native/twitter-connect": "^5.15.0",
    "@ionic-native/user-agent": "^5.15.0",
    "@ionic/angular": "^4.11.7",
    "@ionic/angular-server": "^0.0.2",
    "@ionic/pro": "2.0.4",
    "@ionic/storage": "^2.2.0",
    "@nguniversal/express-engine": "9.0.0-next.9",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@sentry/browser": "^5.7.1",
    "algoliasearch": "^3.33.0",
    "cordova-plugin-appavailability": "^0.4.2",
    "cordova-plugin-facebook4": "^6.0.0",
    "cordova-plugin-firebase": "^2.0.5",
    "cordova-plugin-x-socialsharing": "^5.4.4",
    "core-js": "^2.6.2",
    "croppie": "^2.6.3",
    "email-validator": "^2.0.4",
    "express": "^4.15.2",
    "firebase": "^7.6.1",
    "linkifyjs": "^2.1.8",
    "localize-router": "2.0.0-RC.3",
    "localstorage-polyfill": "^1.0.1",
    "lodash.debounce": "^4.0.8",
    "lodash.throttle": "^4.1.1",
    "md5": "^2.2.1",
    "memoizee": "^0.4.14",
    "moment": "^2.24.0",
    "ngx-auto-unsubscribe": "^3.0.0",
    "ngx-moment": "^3.5.0",
    "ngx-store": "^2.1.0",
    "parallax-js": "^3.1.0",
    "query-string": "^6.2.0",
    "rxjs": "^6.5.3",
    "rxjs-compat": "^6.5.3",
    "shaka-player": "^2.5.0",
    "text-mask-addons": "^3.8.0",
    "text-mask-core": "^5.1.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.900.0-rc.7",
    "@angular/cli": "^9.0.0-rc.7",
    "@angular/compiler": "^9.0.0-rc.7",
    "@angular/compiler-cli": "^9.0.0-rc.7",
    "@angular/language-service": "^9.0.0-rc.7",
    "@google-cloud/translate": "^5.0.2",
    "@ionic/angular-toolkit": "^2.1.1",
    "@nguniversal/builders": "^9.0.0-next.9",
    "@types/facebook-js-sdk": "^3.3.0",
    "@types/jasmine": "~3.4.1",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@types/webappsec-credential-management": "^0.5.1",
    "cloudflare-workers-kv": "0.0.11",
    "codelyzer": "^5.1.2",
    "dotenv": "^8.2.0",
    "edit-json-file": "^1.2.1",
    "firebase-admin": "^8.9.1",
    "gulp-real-favicon": "^0.3.2",
    "handlebars": "^4.1.2",
    "imagemin": "^7.0.1",
    "imagemin-webp": "^5.1.0",
    "import-sort-style-eslint": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "npm": "^6.13.0",
    "pino": "^5.13.6",
    "pino-pretty": "^3.3.0",
    "prettier": "^1.19.1",
    "prettier-plugin-import-sort": "0.0.3",
    "protractor": "~5.4.2",
    "puppeteer": "^2.0.0",
    "rich-logger-decorator": "^4.0.0",
    "sharp": "^0.23.4",
    "showdown": "^1.9.0",
    "tinify": "^1.6.0-beta.2",
    "ts-loader": "^6.1.2",
    "ts-node": "~8.4.1",
    "tslint": "^5.20.0",
    "typescript": "~3.6.4",
    "webpack-bundle-analyzer": "^3.5.1",
    "webpack-cli": "^3.3.9"
  }
}

[hymenoby]

@ProfessorManhattan This do not work in my project, i am on angular 8 and i use angular-universal for SSR , the app works fine if i dont set the initial navigation to true, bu when i do, if i try to access directly to any page other than the root page i get a route not found error

here is my package.json

{
  "name": "kasania-public",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "compile:server": "webpack --config webpack.server.config.js --progress --colors",
    "serve:ssr": "node dist/server",
    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
    "build:client-and-server-bundles": "ng build --prod && ng run kasania-public:server:production --bundleDependencies all"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.1.0",
    "@agm/js-marker-clusterer": "^1.1.0",
    "@angular/animations": "~8.2.14",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/platform-server": "~8.2.5",
    "@angular/router": "~8.2.14",
    "@fortawesome/angular-fontawesome": "^0.5.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.26",
    "@fortawesome/free-brands-svg-icons": "^5.12.0",
    "@fortawesome/free-solid-svg-icons": "^5.12.0",
    "@ng-bootstrap/ng-bootstrap": "^5.1.5",
    "@nguniversal/express-engine": "8.1.1",
    "@nguniversal/module-map-ngfactory-loader": "8.1.1",
    "@ngx-share/button": "^7.1.4",
    "@ngx-share/buttons": "^7.1.4",
    "@ngx-share/core": "^7.1.4",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@nicky-lenaers/ngx-scroll-to": "^3.0.1",
    "@types/mocha": "^5.2.7",
    "animate.css": "^3.7.2",
    "bootstrap": "^4.4.1",
    "core-js": "^3.6.4",
    "express": "^4.15.2",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "intersection-observer": "^0.7.0",
    "jquery": "^3.4.1",
    "js-marker-clusterer": "^1.0.0",
    "libphonenumber-js": "^1.7.30",
    "localize-router": "^2.0.0-RC.3",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "ng-lazyload-image": "^7.0.1",
    "ng2-pdf-viewer": "^6.0.2",
    "ngx-gallery": "^5.10.0",
    "rxjs": "^6.5.4",
    "slick-carousel": "^1.8.1",
    "tslib": "^1.10.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.22",
    "@angular/cli": "^8.3.22",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.31",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.2.1",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.1",
    "protractor": "~5.4.0",
    "ts-loader": "^5.2.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3",
    "webpack-bundle-analyzer": "^3.6.0",
    "webpack-cli": "^3.1.0"
  }
}

[rafa-suagu]

@ProfessorManhattan @hymenoby check my previous comment: #45 (comment)

I encourage you to migrate ASAP. This project seems to be dead and doesn't work for sure with SSR and lazy load nested routes.

[hymenoby]

@ProfessorManhattan Thanks, i will try with https://github.com/gilsdav/ngx-translate-router as you said