Function traverseSnapshot not properly assembling the new translated route. about localize-router

[andrewwhitehead]

I have a potential fix for this here: https://github.com/cywolf/localize-router/tree/fix-151

[JoseCMRocha]

Hi @dragorwyin that is strange your case is very similar with mine and the solution by @CyWolf worked for me, did you check your routing configuration to see if there is something wrong? are you able to create a example to reproduce your problem?

[JoseCMRocha]

Hi @CyWolf just tested that changes and it seems to fix the problem that I described. Did you reported this problem previously on this repository? Asking to see if there is more discussion about the problem reported.
Did you try to create a pull request of your change to this greentube/localize-router? I verified that your solution fix my problem but I don't know if it will break something else.

[andrewwhitehead]

@JoseCMRocha Hiya, I haven't reported the issue separately, and haven't created a PR as I don't have time to add unit test(s) as the moment.

[dragorwyin]

@CyWolf Your solution not working for me when I have translated first slug in path, for example: /en/register/token and /pl/rejestracja/token. After language change it moves me into /pl/rejestracja without handling :token parameter. Even if I did fork and just copied your file. It's huge bug for me actually :?

[dragorwyin]

@JoseCMRocha Here is a reproduction:
I have a app-routing.module.ts file with simple configuration:

import { Routes } from '@angular/router';
import { FullComponent } from './core/layouts/full/full.component';
import { BlankComponent } from './core/layouts/blank/blank.component';
import { NotFoundComponent } from './modules/not-found/not-found.component';
import { LoginComponent } from './modules/login/login.component';
import { AuthGuardConfirmed } from './core/guard/auth-guard-confirmed.service';

export const routes: Routes = [
  {
    path: '',
    component: FullComponent,
    canLoad: [AuthGuardConfirmed],
  }, {
    path: '',
    component: BlankComponent,
    children: [{
      path: 'login',
      component: LoginComponent
    }, {
      path: 'register',
      loadChildren: './modules/register/register.module#RegisterModule',
    }]
  },
  { path: '404', component: NotFoundComponent },
  { path: '**', redirectTo: '/404' }
];

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { FullComponent } from './core/layouts/full/full.component';
import { BlankComponent } from './core/layouts/blank/blank.component';
import { NotFoundComponent } from './modules/not-found/not-found.component';
import { LoginComponent } from './modules/login/login.component';
import { AuthGuardConfirmed } from './core/guard/auth-guard-confirmed.service';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { HttpClientModule, HttpClient } from '@angular/common/http';

import { TranslateModule, TranslateService, TranslateLoader } from '@ngx-translate/core';
import { LocalizeRouterModule, LocalizeRouterSettings, LocalizeParser } from 'localize-router';
import { LocalizeRouterHttpLoader } from 'localize-router-http-loader';
import { routes } from './app-routing.module';
import { RouterModule } from '@angular/router';
import { Location } from '@angular/common';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}


@NgModule({
  declarations: [
    AppComponent,
    BlankComponent,
    NotFoundComponent,
    FullComponent,
    LoginComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    LocalizeRouterModule.forRoot(routes, {
      parser: {
        provide: LocalizeParser,
        useFactory: (translate, location, settings, http) =>
          new LocalizeRouterHttpLoader(translate, location, settings, http),
        deps: [TranslateService, Location, LocalizeRouterSettings, HttpClient]
      }
    }),
    RouterModule.forRoot(routes)
  ],
  providers: [
    AuthGuardConfirmed,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

register.routing.ts:

import { Routes, RouterModule } from '@angular/router';
import { RegisterComponent } from './register.component';
import { ConfirmComponent } from './confirm/confirm.component';

export const routes: Routes = [
  {
    path: '',
    children: [{
      path: '',
      component: RegisterComponent
    }, {
      path: ':token',
      component: ConfirmComponent
    }]
  }
];

export const RegisterRoutes = RouterModule.forChild(routes);

register.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { routes } from './register.routing';

import { MaterialModule } from '../../shared/material.module';
import { SharedModule } from '../../shared/shared.module';

import { ComponentsModule } from '../../components/components.module';
import { RegisterComponent } from './register.component';
import { ConfirmComponent } from './confirm/confirm.component';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { LocalizeRouterModule } from 'localize-router';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    MaterialModule,
    ComponentsModule,
    TranslateModule,
    LocalizeRouterModule.forChild(routes),
    RouterModule.forChild(routes)
  ],
  declarations: [
    RegisterComponent,
    ConfirmComponent,
  ],
})
export class RegisterModule { }

I have translations in assets/i18n (pl.json and en.json):

• pl.json: "{ ROUTES.register": "rejestracja" }",
• en.json: "{ ROUTES.register": "register" }",

I have an locales.json in assets:

{
  "locales": [
    "en",
    "pl"
  ],
  "prefix": "ROUTES."
}

I hope there will be any solution and will be implemented soon in this library ;P

There is also another problem: I cannot translate child name, for example: /pl/rejestracja/potwierdz is an translation of /en/register/confirm. I tried translate confirm slug without any success. Tried use

• { ROUTES.confirm: "potwierdz" },
• { ROUTES.register.confirm: "potwierdz" } and
• { ROUTES.register.confirm: "rejestracja/potwierdz" } without success.

[MarcARoberge]

Hi, just wondering when @CyWolf is going to be merged to fix this issue?

[hohler]

@MarcARoberge as @CyWolf does not have time for tests, I just created a PR from his fork. We need this fix.

[giacomo]

any news on this?

[relvingonzalez]

Are there any plans for this?

[giacomo]

for a patch see #159 (comment)