Unknown route switching language

Hi @meeroslav integrating your localize-router I found what I believe is an issue, correct me if I am wrong, what I am trying to do is that: when a user click on a new language the page is translated and the navigation is updated to march the new language, in summary the basic idea of this module.

The way the feature is implemented is that: I created 2 buttons and on click I invoke a function on my module that using the LocalizeRouterService#changeLanguage method set the new language.

HTML

<span class="pull-left ">
      <button style="padding-left: 0 !important; " class="nav-link d-inline " (click)="switchLanguage( 'en') ">
          English
      </button>
      <button style="padding-left: 0 !important; " class="nav-link d-inline " (click)="switchLanguage( 'it') ">
          Italian
      </button>
</span>

Component

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {

  constructor(private localize: LocalizeRouterService) { }

  ngOnInit() {
    console.log('ROUTES', this.localize.parser.routes);
  }

  switchLanguage(language: string) {
    this.localize.changeLanguage(language);
  }

}

What I observe is this when I click the button the page is translated and the links are updated to the new language as well but when I try to click on any of the links the route is not recognized and the following error is thrown

Error: Cannot match any routes. URL Segment: ‘it/howitworks’

doing some tests I can see that the error goes away and all work fine if after I click the button I manually change the language on the address bar and refresh the page with the new URL.

I spent few minutes debugging and I believe the issue is related to the LocalizeRouteParser#_translateRouteTree method that on line 163 of the master branch should invoke the LocalizeRouteParser#_translateProperty setting to true the 3rd prefixLang parameter. This is because, as far as my understanding goes, in this case the route will be prepended with the new language and as a result the routes configuration will be updated and back on LocalizeRouterService#changeLanguage the browser will be refreshed with the new route and as a result the system will start working correctly. I am not sure if there are other implications that is something that need to be considered.

Looking at the bug list I believe this is a duplicate of #139 but I’ll leave this to you to judge, in the meantime I will update my switchLanguage method so that it refreshes the browser page with new language and update on this.

Thanks, ~Q

[quirinobrizi]

Hi @meeroslav done some more test and the only way that seem to work is to reload the full website so if I write something like that:

switchLanguage(language: string) {
    this.localize.changeLanguage(language);
    console.log('AFTER CHANGE ROUTES', this.localize.parser.routes);
    let currentUrl: string = this.router.url;
    let parts: Array<string> = /\/(.+)\/(.+)/.exec(currentUrl);
    if (parts) {
      let currentLanguage = parts[1];
      let currentPage = parts[2];
      if (currentLanguage != language) {
        let newUrl = `/${language}/${currentPage}`;
        // this.router.navigateByUrl(newUrl);
        window.location.href = newUrl;
      }
    } else {
      console.log('current URL does not match');
      window.location.href = `/${language}`;
    }
  }

it does work, the page is reloaded the new language is set and the navigation works with no problem. What I noticed and that may void what I wrote above but I don’t know the module well enough to say so is that the redirect route is not updated when the the LocalizeRouterService#changeLanguage is invoked.

On Init

START ROUTES (2) [{…}, {…}] {children: Array(5), path: “en”} {path: “”, redirectTo: “en”, pathMatch: “full”}

After LocalizeRouterService#changeLanguage

AFTER CHANGE ROUTES (2) [{…}, {…}] {children: Array(5), path: “it”} {path: “”, redirectTo: “en”, pathMatch: “full”}

Thanks, ~Q

[Roelensdam]

@apolon23 Thanks for the tip, but i DON’T want to reload the page. This make the whole app reload. I DON’T want the component to be reloaded either.