Set route with country/lang code in url

[psmyda]

Here is my problem. I have to set up routing in Angular so that in URL there will be a country code and a language. for example

https://example.com/usa/en

The tricky part is that this localization parts can change so I have a button to switch country and language so it will be /gb/en or /usa/fr.

How can I get it working like this using localize-router and ngx-translate.

Any help much appreciated.

[jrmcdona]

@psmyda ever figure out an approach? I need locales in my urls such as

example.com/en-US
example.com/fr-FR

[psmyda]

@jrmcdona Hi. Finally I have ended manipulating APP_BASE_HREF for setting country code. Its because its an Universal app.

[ghost]

@psmyda I am also stuck on this, will it be possible to provide some details how you manipulated it?

[psmyda]

Ok so APP_BASE_HREF, in this case, depends on the request URL.
If the request includes it (and its one of the allowed) it will be set otherwise I'm setting default one.
Here is a code for my AppConfigService:

import { Injectable, Injector, Inject, PLATFORM_ID } from "@angular/core";
import { isPlatformServer } from "@angular/common";
import { REQUEST } from "@nguniversal/express-engine/tokens";

@Injectable()
export class AppConfigService {
	public config: any = {
		appBaseHref: "/",
		country: "",
		currency: ""
	};

	constructor(
		private _injector: Injector,
		@Inject(PLATFORM_ID) private platformId: Object
	) {
		if (isPlatformServer(this.platformId)) {
			// -> server rendered
			const req = this._injector.get(REQUEST);
			let parseURL = req.originalUrl.split("/");

			this.setInitialData(parseURL[1]);
		} else {
			let parseURL = location.href.split("/");
			this.setInitialData(parseURL[3]);
		}
	}

	setInitialData(url) {
		if (url == "") {
			this.config.appBaseHref = "/us";
		} else if (url == "gb") {
			this.config.appBaseHref = "/gb";
		} else if (url == "us") {
			this.config.appBaseHref = "/us";
		}
	}

	set(k: string, v: any): void {
		this.config[k] = v;
	}

	get(k: string): any {
		return k ? this.config[k] : this.config;
	}
}

Then in AppModule I'm using it like this:

{
      provide: APP_BASE_HREF,
      useFactory: (config: AppConfigService) => {
        return config.get('appBaseHref')
      },
      deps: [ AppConfigService ]
    },

this is in Providers section for @NgModule