Children routes issue lazy load module

[BruneXX]

I'm submitting a ... (check one with "x")

[x ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if similar feature request does not exist
[x ] support request => Suggested place for help and support is [stackoverflow](https://stackoverflow.com/), search for similar question before posting

Description

I having an issue related to the child routes,
I've main module app-routing.module.ts importing the main routes like:

{
    path: 'auth',
    loadChildren: './components/auth/auth.module#AuthModule'
  }

Then in the auth.routes.ts, I've the following:

export const routes = [
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent }
];

then in auth.module.ts:

import { routes } from './auth.routes';
import { LocalizeRouterModule } from '@gilsdav/ngx-translate-router';

[....]

  imports: [
    RouterModule.forChild(routes),
    LocalizeRouterModule.forChild(routes)
 ]

But trying to access to translated route, for example:

/en/auth/register                       works **OK**
/es/autenticacion/registro         translated route is simply **NOT WORKING**.

Instead of that I'm receiving the following error:
core.js:4002 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'es/autenticacion/registro'

The weird thing is that, if in my main routes (app.routes.ts) that then is imported in app.module.ts add the following:

{
    path: 'auth',
    loadChildren: './components/auth/auth.module#AuthModule'
  },
  {
    path: 'auth/register',
    loadChildren: './components/auth/auth.module#AuthModule'
  },
  {
    path: 'auth/login',
    loadChildren: './components/auth/auth.module#AuthModule'
  }

it works like a charm, so the issue is just when I trying to add children routes. And it's simply giving that error...

🌍 Your Environment

Angular Version: 8.2.5
Localize Router Version: 2.0.0

[BruneXX]

I've found a workaround, passing ROUTES.parentRoute.childRoute it works but not in all cases, for example in a route with params this is happening:

/{lang}/{parentTranslatedOK}/{childNotTranslated}/{:id}

/es/mi-ruta-padre/**child-route**/1 <----- child-route is not translated to spanish in this example.

There's something that's not fully working here.

[gilsdav]

@BruneXX Keep in mind this library (localize-router) doesn't currently support Angular 8.
The deprecated loadChildren syntax is no longer available if you are using my fork (ngx-translate-router).
loadChildren: './components/auth/auth.module#AuthModule'. Use new Angular 8 syntax: loadChildren: import('./components/auth/auth.module').then(mod => mod.AuthModule')

[BruneXX]

Hi @gilsdav yesterday I've found an issue where you've proposed that, I've tried and it looks the same for me, also I've tried in your demo and I can see no changes in the current behavior, am I doing something wrong?

The syntax that I've tried, is exactly this: (that you proposed)
loadChildren: () => import('./components/auth/auth.module').then((mod) => mod.AuthModule)

So.. I've found other behaviors trying other things too, for example: (whatever be the language set)
if I navigate to:
/en/auth/register then when try to navigate to /en/auth/login route changes, but view is not rendered, instead of that nothing happens, there's no error and no view updated. I suspect that is because it's in the same parent route, /en/auth and it's not taking efect over the child route when that happens, does make sense for you?

So.. I've tried with your project and I saw a similar behavior, but the difference it's that it just not translated the child.
Image attached:

So, to summarize, the issues are:

1. The child route is not translated (depending on configuration) and the view is not updating when the parent it's the same. for example /en/auth/{whatever}

2. Other case is the child is translated, but the view is not rendered at all. (even the first time.)

[BruneXX]

PS: Also another thing that I'm wondering.. Is there a way to navigate to route in component? because using:

this.router.navigate(['my-route/test', param]);

or any other navigate result in:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'my-route/test/1'
Error: Cannot match any routes. URL Segment: 'my-route/test/1'

also, I've used:

const translatedPath: any = this.localize.translateRoute('my-route/test');
this.router.navigate([translatedPath, param]);

With the same error.

[gilsdav]

@BruneXX
If you don't specify it's a root path, the lib will not add lang.
You probably have to use: const translatedPath = this.localize.translateRoute('/my-route/test') as string;

For the rest it's not possible to give you a diagnostic without seeing all your routes.
You can check all these working routes: https://github.com/gilsdav/ngx-translate-router/blob/master/src/app/app-routing.module.ts