Refreshing page redirects to fallback

[stefan-schilling]

Describe the bug We're using version 14.0.0 with Angular 14.

From the homepage, we're navigating to a subpage, e.g. /dashboard -> /mySub; which is shown in the browser as /en/dashboard -> /en/mySub. When I now refresh the page (button or F5), the browser starts to load /en/mySub, but then redirects itself to /en/dashboard. This behavior is also true for using another language, e.g. /cn/mySub finally takes me to /cn/dashboard upon reloading the page. Besides, if I move /en/dashboard -> /en/mySub -> /en/mySubSub and then refresh the page, I still endup on /en/dashboard.

To Reproduce Steps to reproduce the behavior:

1. Go to some page
2. Click on 'Refresh/Reload'
3. Browser shows homepage

Expected behavior The browser should refresh the page the user is on, not returning to the homepage.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Ubuntu 22, Windows 10
• Browser Firefox (Ubuntu), Chrome
• Version 111.0.1 (64-Bit) (Ubuntu)

Smartphone (please complete the following information):

• not tried

Additional context Our app routings:

const routes: Routes = [
  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  },
  {
    path: 'dashboard',
    loadChildren: () => LandingModule
  },
  {
    path: ':market/dashboard',
    loadChildren: () => LandingModule
  },
  ...errorRoute,
  {
    path: '**',
    redirectTo: '/dashboard'
  }
];

@NgModule({ imports: [RouterModule.forRoot(routes, {preloadingStrategy: AppCustomPreloader})], exports: [RouterModule], providers: [AppCustomPreloader] }) export class AppRoutingModule {}

Relevant part of app.module:

@NgModule({
  declarations: [AppComponent],
  imports: [
    AppRoutingModule,
    HttpClientModule,
    L10nTranslationModule.forRoot(
      l10nConfig,
      {
        translationLoader: TranslationLoader
      }
    ),
    L10nValidationModule.forRoot(),
    L10nRoutingModule.forRoot()
  ],
  providers: [
    StartupService,
    {
      provide: APP_INITIALIZER,
      useFactory: initL10n,
      deps: [L10nLoader],
      multi: true
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

(sorry for the formatting)

[robisim74]

Hi,

Please try removing the L10nRoutingModule from the app. If without the module the problem doesn't arise, I'd need a reproduction to figure out what's going on.

[stefan-schilling]

Hi,

Please try removing the L10nRoutingModule from the app. If without the module the problem doesn't arise, I'd need a reproduction to figure out what's going on.

Hello @robisim74 , thanks for your response.

Correct, removing L10nRoutingModule from the app resolves this issue completely. Sadly, changing the language doesn't work then either. I'll see, what I can do to provide a working example, since this is restricted code. Thx.

[stefan-schilling]

Hello @robisim74 ,

I sent you a message thru LinkedIn - asking, how to provide you with the sample code. I cannot upload it here, since it's internal knowledge. Thanks.

[robisim74]

Hi @stefan-schilling ,

to post formatted code here, please select the code, and then press <> (Add code). I edited your original post.

I explain how L10nRoutingModule works:

• L10nRoutingService detects when a navigation starts, and remove the language from the path
• Redirects to the path without language
• When a navigation ends, replaces url with language (no reload)

So you should check:

• If there is any error in console when you press F5 (I see an errorRoute in your routing: what does it do?)

• Debug redirectToPath: https://github.com/robisim74/angular-l10n/blob/master/projects/angular-l10n/src/lib/services/l10n-routing.service.ts#L67-L74: is it redirecting you to a path that exists in your routing?

• If there is any problem in the path, you can fix it by implementing L10nLocation class-interface? See https://github.com/robisim74/angular-l10n#routing

If you can't find the problem this way, a repro is needed. But I don't need the whole app, it should be enough to recreate the problem:

• The configuration for this library
• The routing with errorRoute and the affected sub-routes

You can use empty components, I don't think they are interesting for this problem.

If you can recreate the problem with these items, you can upload to a github project, or use stackblitz.

Otherwise post the relevant code here (configuration and routing, again, components are not needed) and I'll try to recreate the problem myself.

Thanks!

[robisim74]

In the latest v.16, L10RoutingModule has been removed. A new, more stable way of creating localized routing is recommended: https://github.com/robisim74/angular-l10n#localized-routing

You can get it in older versions too, by using L10nUserLanguage instead of L10nLocaleResolver.

Greetings