localize-router incompatible with @angular/router: ^6.0.0

[andresceron]

Hi!
I have been having an issue with localize-router and @angular/router: 6.0.0.
It doesn't change the url /en /es when doing changeLanguage. After a deeper looking I tested it with @angular/router: 5.2.6 and it does work with it.

Would you be able to fix this any time soon so it is compatible with @angular/router:6.0.0 ?

Thanks!

[Sambaja]

Is there any update on this ? I want to migrate my project to angular 6 and this is one of my last issues !

[vdeantoni]

Is there an ETA for this?

$ ng update @angular/core Package "localize-router" has an incompatible peer dependency to "rxjs" (requires "^5.0.0", would install "6.2.0"). Incompatible peer dependencies found. See above.

[philip-firstorder]

Until this is updated, you can temporarily add rxjs-compat to your packages, it should fix it.

    "rxjs": "6.2.1",
    "rxjs-compat": "6.2.1",

[Empereol]

@philip-firstorder , does this work for you? When I use rxjs-compat, localize-router doesn't work appropriately. The language will translate but the active route will not change and the localized routes can't be matched.

[philip-firstorder]

@Empereol don’t know about the routes, but my translation worked. Note that I used both rxjs and rxjs-compat.

[modul8com]

There's a pull request waiting to be included, would you mind checking why it fails ?

[philip-firstorder]

Travis Config installs node_js v5, shouldn’t it have at least 8.9? And then there are the other dependency warnings as the versions don’t match.

Only the owner of this repo can change this however.

[alvarofelipe12]

Hello guys.
Is there any confirmation of this issue? and also is there another way of doing this?

I tried with the rxjs-compat and isn't working @philip-firstorder

Until this is updated, you can temporarily add rxjs-compat to your packages, it should fix it.

[gilsdav]

@alvarofelipe12 You can actually try to use my fork that I use on Angular 6: https://github.com/gilsdav/ngx-translate-router
I don't know what is happening on this repo but it does not seem to be moving much :(

[andresceron]

Hi @gilsdav. Is your fork working as expected with the url's?
I am going to upgrade my angular repo to 6 or 7 and would know if this works so I can proceed.
Thanks!

[andresceron]

Hi @gilsdav I have tested your fork and it doesnt work.
It only "reset" the URL, so if I had www.test.com/en/myName and then click to change lang to spanish, it changes the language to spanish but no url. It set the url like: www.test.com/es/

[gilsdav]

Hello @andresceron , we use it on my company with complex routes and we actually don't have this problem anymore.

Are you using version (1.0.2) : @gilsdav/ngx-translate-router@1.0.2 ?
And what version of Angular are you using ?

Is-it possible that this redirection can come from a guard ?
Or are you using a custom RouteReuseStrategy in your app ?

If the problem persist, I am interested that you create an issue at https://github.com/gilsdav/ngx-translate-router/issues with your routes (or your project sources) to be able to reproduce it.

You can also take a look at the test project to see its functional implementation: https://github.com/gilsdav/ngx-translate-router/tree/from-localize-router/src

[andresceron]

Hi @gilsdav
I am using the: "@gilsdav/ngx-translate-router": "^1.0.2" with the Angular 7.0.0.
I have some redirect guard, that redirects to the "home" url if the url isnt found. I will try again by disabling the guard. I am not using any custom RouteReuseStrategy that I am aware off.

But let see if the problem isnt because of the Angular 7 version.

Another issue I encountered was that to use your ngx-translate-router I needed to change the "localize-router-http-loader" from 'localize-router' to your fork version inside the node_modules.

[andresceron]

Hi again @gilsdav, I desactivated the guard and it only redirect to a / path, without language nor nothing and breaks to redirect. I will now try to downgrade to ng6. I will keep you in touch. Thanks!

[gilsdav]

@andresceron I'm waiting for you to keep me informed.
I just created a issue for the localize-router-http-loader fork: gilsdav/ngx-translate-router#3

I didn't take time to fork it because it doesn't work on each cases like with Angular Universal so I personally prefer to use manual loader.

Tested on Angular 7 and nothing special detected.

[andresceron]

Ok, i have downgraded to Angular 6 and it does the same.
So I dont know if it is something with my code or something else.

What I do is following:
From home I go to (for example) the about page:
Inside the about page I have 2 buttons (and some random labels to see if the language change work).
When clicking on the language the expected behaviour is to change the route with the updated lang name that comes from a label and also the content.

In the about-router-module I have "LocalizeRouterModule.forChild(routes)," in the imports.
In the component I have the following:
useLanguage(language: string) {
this.localize.changeLanguage(language);
}

[gilsdav]

@andresceron Ok I think I got it.
Do you use deep empty path ?

mainRoutes = [{
    path:'', loadChildren: 'path_to_module'
}];

subRoutes = [{
    path:'', component: myComponent
}];

If yes, can you try something like this ?

mainRoutes = [{
    path:'', pathMatch: 'full', redirectTo: '/home'
},
{
    path:'home', loadChildren: 'path_to_module'
}];

subRoutes = [{
    path:'', component: myComponent
}];

Be aware that besides not working here, deep empty path never worked in Universal.

[andresceron]

Hmm.. I use:

export const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    loadChildren: './routes/+home/home.module#HomeModule'
  },
  {
    path: 'about',
    loadChildren: './routes/+about/about.module#AboutModule'
  },
  {
    path: 'dashboard',
    loadChildren: './routes/+dashboard/dashboard.module#DashboardModule',
  }

[gilsdav]

@andresceron So can you try ?

export const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: '/home'
  },
  {
    path: 'home',
    loadChildren: './routes/+home/home.module#HomeModule'
  },
  {
    path: 'about',
    loadChildren: './routes/+about/about.module#AboutModule'
  },
  {
    path: 'dashboard',
    loadChildren: './routes/+dashboard/dashboard.module#DashboardModule',
  }

[andresceron]

Yes, I got the same results as before, but..

But I then looked to all my paths and looked that I had a '**' path, and when I removed that path

{
  path: '**',
  redirectTo: ''
}

The error I got was this:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'en/about-us/about-us'
Error: Cannot match any routes. URL Segment: 'en/about-us/about-us' at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError

[gilsdav]

@andresceron The issue look's like gilsdav/ngx-translate-router#1 .
We will continue our conversation about this issue on it.
Can you add a comment on it with your main route (like in your previous comment) and your sub routing of AboutModule ?
Thank's in advance.

[andresceron]

Ok, I will.
Thanks for your help!

[meeroslav]

Localize router now supports Angular v6 and v7. Please upgrade to the latest 2.x.x version.