LazyLoad Child Componenter onPage Refresh re-directs:Home Page

[coolwoc]

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

I have an application with two languages TR/EN

1. The app get browser settings for Language Selection by default on Load.
2. I have a lazyload with children componentes
3. I get translate url parameter correctly
4. We go to the children component level
5. We change language selector from en --> tr ( which is not the browser settings language )
6. We reload the page
7. We are redirect to Home Component

🔬 Components Used

app.component.ts

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

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

//* Translate
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { MultiTranslateHttpLoader } from "ngx-translate-multi-http-loader";

import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HomeComponent } from './core/site/home/home.component';

import { NavigationComponent } from './_layout/navigation/navigation.component';
import { FooterComponent } from './_layout/footer/footer.component';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
	return new MultiTranslateHttpLoader(http, [
		{ prefix: "./assets/i18n/_routers/", suffix: ".json" },
		{ prefix: "./assets/i18n/footer/", suffix: ".json" },
		{ prefix: "./assets/i18n/navigation/", suffix: ".json" },
		{ prefix: "./assets/i18n/home/", suffix: ".json" }
	]);
}

@NgModule({
	declarations: [
		AppComponent,
		HomeComponent,
		NavigationComponent,
		FooterComponent
	],
	imports: [
		BrowserModule,
		RouterModule,
		ReactiveFormsModule,
		BrowserAnimationsModule,
		HttpClientModule,
		TranslateModule.forRoot({
			loader: {
				provide: TranslateLoader,
				useFactory: (HttpLoaderFactory),
				deps: [HttpClient]
			},
			isolate: true
		}),
		AppRoutingModule
	],
	exports: [],
	providers: [],
	bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.ts

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

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

import { TranslateService, TranslateModule } from '@ngx-translate/core';

import { LocalizeRouterModule, LocalizeRouterSettings, LocalizeParser } from 'localize-router';
import { LocalizeRouterHttpLoader } from 'localize-router-http-loader';

import { HomeComponent } from './core/site/home/home.component';

export function HttpLoaderFactory(translate: TranslateService, location: Location, settings: LocalizeRouterSettings, http: HttpClient) {
	return new LocalizeRouterHttpLoader(translate, location, settings, http);
}

const routes: Routes = [
	{
		path: '', redirectTo: 'h', pathMatch: 'full'
	},
	{
		path: 'h', //* home
		component: HomeComponent,
	},
	{
		path: 'p', //* static pages
		loadChildren: './core/site/static/static.module#StaticModule',
	},
	{
		path: '**',
		redirectTo: '/h'
	}
];

@NgModule({
	imports: [
		TranslateModule.forRoot(),
		RouterModule.forRoot(
			routes, { enableTracing: false } //* debbuging true
		),
		LocalizeRouterModule.forRoot(routes, {
			parser: {
				provide: LocalizeParser,
				useFactory: HttpLoaderFactory,
				deps: [TranslateService, Location, LocalizeRouterSettings, HttpClient]
			}
		})
	],
	exports: [RouterModule, LocalizeRouterModule]
})
export class AppRoutingModule { }

app.component.ts ( select language by default according with browser settings )

		this.translate.addLangs(['en', 'tr']);

		let langLocalizer = this.localize.parser.getLocationLang();
		let langBrowser = this.translate.getBrowserLang();

		if (langBrowser === langLocalizer || langBrowser === 'en' || 'tr')
		{
			this.translate.setDefaultLang(langBrowser);
			this.localize.changeLanguage(langBrowser);
		} else
		{
			this.translate.setDefaultLang('en');
			this.localize.changeLanguage('en');
		}

satic-routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { LocalizeRouterModule } from 'localize-router';
import { StaticComponent } from './static.component';
import { IndividualComponent } from './individual/individual.component';
const routes: Routes = [
	{
		path: '',
		component: StaticComponent,
		children: [
			{
				path: 'individual',
				component: IndividualComponent
			}
		]
	}
]

@NgModule({
	declarations: [],
	imports: [
		TranslateModule,
		RouterModule.forChild(routes),
		LocalizeRouterModule.forChild(routes)
	],
	exports: [RouterModule, LocalizeRouterModule]
})

export class StaticRoutingModule { }

static.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

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

//* Translate
import { StaticRoutingModule } from './static-routing.module';
import { MultiTranslateHttpLoader } from 'ngx-translate-multi-http-loader';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { StaticComponent } from './static.component';
import { IndividualComponent } from './individual/individual.component';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
	return new MultiTranslateHttpLoader(http, [
		{ prefix: "./assets/i18n/static/", suffix: ".json" },
		{ prefix: "./assets/i18n/staticIndividual/", suffix: ".json" },
	]);
}

@NgModule({
	declarations: [
		StaticComponent,
		IndividualComponent
	],
	imports: [
		CommonModule,
		StaticRoutingModule,
		TranslateModule.forChild({
			loader: {
				provide: TranslateLoader,
				useFactory: (HttpLoaderFactory),
				deps: [HttpClient]
			},
			isolate: true
		})
	],
	exports: []
})
export class StaticModule { }

footer.ts ( changeLanguage method )

	changeLanguage(event) {
		//* set language default
		const tempLang = event.target.value;

		//* updateURL and langCode
		this.localize.changeLanguage(tempLang);

		//* update service across application
		this.localize.routerEvents.subscribe((language: string) => {
			this.translate.use(language);
		});
	}

static.component.ts ( any component level )

	constructor (
		public translate: TranslateService,
		private localize: LocalizeRouterService) {
		//on load componant
		let selectedLanguage = this.localize.parser.currentLang;
		this.translate.use(selectedLanguage);
		// on change language selector
		this.localize.routerEvents.subscribe((language: string) => {
			this.translate.use(language);
		});
	}

🌍 Your Environment

Angular Version:

        "@angular/common": "~7.0.0",
        "@angular/compiler": "~7.0.0",
        "@angular/core": "~7.0.0",
        "@angular/forms": "~7.0.0",
        "@angular/http": "~7.0.0",
        "@angular/platform-browser": "~7.0.0",
        "@angular/platform-browser-dynamic": "~7.0.0",
        "@angular/router": "~7.0.0",

Localize Router Version:

        "@angular/language-service": "~7.0.0",
        "@ngx-translate/core": "^11.0.1",
        "@ngx-translate/http-loader": "^4.0.0",
        "localize-router": "^2.0.0-RC.3",
        "localize-router-http-loader": "^1.0.2",

Anything else relevant?
It seems to me that any router on the page re-direct to homepage when languageChange is different to the browser language settings and we reload the page

Has anyone experience similar issue?

[coolwoc]

I found the issue -- The problem was in the logic of the app.component.