localize-router not working as expected with Angular Universal: server-side rendering

[SolveWithShri]

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
[ ] support request => Suggested place for help and support is [stackoverflow](https://stackoverflow.com/), search for similar question before posting

Description

When i use localize router with Angular Universal: server-side rendering it does not render pages as expected.

Note - LazyUniversalModuleLoaderProvider is commented in app.server.module.ts file as it throws error.

Cases -

Case-1 : When i directly try to load a page with URL (http://localhost:4000/fr/heros/accueil)
- Then first i see server side rendered GotLostPage and then actual page (/fr/heros/accueil) once client side app is loaded.
- GotLostPage is on route - { path: '**', component: GotLostPageComponent }
- When i check the page source it has content of GotLostPage

Case-2 : When i un-commented LazyUniversalModuleLoaderProvider in app.server.module.ts file then i got following error on request -

Case-3 : It works as expected for root route

🔬 Minimal Reproduction (if applicable)

Here is a repo to reproduce it -
https://github.com/ShrikantAdhav/angular-universal-localize-router

🌍 Your Environment

Angular Version:
Angular CLI: 7.0.6
Node: 8.11.3
OS: win32 x64
Angular: 7.0.4

Localize Router Version:

"@gilsdav/ngx-translate-router": "~1.0.2",
"@gilsdav/ngx-translate-router-http-loader": "~1.0.0",
"@ngx-cache/core": "~6.0.0",
"@ngx-translate/core": "~11.0.0",
"@ngx-translate/http-loader": "~4.0.0",
"@ngx-universal/translate-loader": "~5.0.0",
"localize-router": "^2.0.0-RC.2",
"localize-router-lazy-universal-module-loader": "1.0.0-ntr",

Anything else relevant?

[SolveWithShri]

@meeroslav Any input on this ?
Thanks!

[youtpout]

Hello seems to work if you use children and not load children

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Location } from '@angular/common';

import { DashboardComponent } from './dashboard/dashboard.component';
// import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { HeroesComponent } from "./heroes/heroes.component";

import { LocalizeRouterModule, LocalizeRouterSettings, LocalizeParser, ManualParserLoader } from 'localize-router';
// import { LocalizeRouterHttpLoader } from '@gilsdav/ngx-translate-router-http-loader';
import { TranslateService } from '@ngx-translate/core';
import { GotLostPageComponent } from './got-lost-page/got-lost-page.component';

/* export function createTranslateLoader(translate: TranslateService, location: Location, settings: LocalizeRouterSettings, http: HttpClient) {
return new LocalizeRouterHttpLoader(translate, location, settings, http)
} */

export function createTranslateLoader(translate: TranslateService, location: Location, settings: LocalizeRouterSettings,) {
return new ManualParserLoader(translate, location, settings, ['en', 'fr'], 'ROUTES.');
}

const child: Routes = [
{ path: "", redirectTo: "home", pathMatch: "full" },
{ path: "home", component: HeroesComponent }
];

const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'detail/:id', component: HeroDetailComponent },
{ path: 'heroes', children: child },
{ path: '**', component: GotLostPageComponent }
];

@NgModule({
imports: [
RouterModule.forRoot(routes),
LocalizeRouterModule.forRoot(routes, {
parser: {
provide: LocalizeParser,
useFactory: (createTranslateLoader),
deps: [TranslateService, Location, LocalizeRouterSettings/, HttpClient/]
}
})
],
exports: [ RouterModule, LocalizeRouterModule ]
})
export class AppRoutingModule {}

[gilsdav]

Hello @ShrikantAdhav ,
Sorry for the late response.

If I undersand, you have forked my repo and replaced every ngx-translate-router by localize-router.

Please refer to https://github.com/gilsdav/universal-localize-module-loader ReadMe.

If you use localize-router => 1.0.0
If you use ngx-translate-router => 1.0.0-ntr

ntr suffix is for Ngx-Translate-Router

So replace "localize-router-lazy-universal-module-loader": "1.0.0-ntr" by "localize-router-lazy-universal-module-loader": "1.0.0"

If it doesn't work with new version of localize-router, fill free to open issue on this repo.

Edited

universal-localize-module-loader generate an error on build with new version of module-map-ngfactory-loader.
In created an issue and will deploy a new version soon gilsdav/universal-localize-module-loader#3

[gilsdav]

@ShrikantAdhav I released a new version for Angular 7. Can you try with "localize-router-lazy-universal-module-loader": "1.0.1" ?

[hohler]

I think it's working now, but somehow the rendered page flickers and "reloads" in the browser. This is just when it's a lazy loaded module.

Configuration:

• Angular 7
• [email protected]
• [email protected]

// Actually, the flickering is also with your example https://github.com/gilsdav/angular-universal-localize-router (Angular 7)

To hopefully disable the flickering, "initialNavigation" could be set, but this is an other issue #157 here

[SolveWithShri]

Thanks @gilsdav For the support :)

As mentioned by @hohler that its working, i am closing the issue.