How to maintain state when switching locale in an Angular-i18n AOT SPA?

Question

I'm attempting to build a multi-language SPA using Angular-i18n, XLIFF files and AOT. I've read the Angular guide as well as eg. the Stackoverflow post Angular 5 internationalization , and understand that the i18n process will result in separate SPAs, one per language. These will be hosted under ./<locale>/ folders.

How do I switch between these SPA without losing my state?

1. I only know the user's locale once he/she logged in. I'm aware that there's a browser-based locale, but the use can choose a locale in the SPA. That locale is the one that counts.
2. What if the user updates his/her settings and changes locale?

In both cases it seems I'd have to redirect the user from eg. myapp/en/index.html to myapp/pt/index.html. This will however not carry over state, ie. on the target site the user will most likely not be logged in. Does Angular have a "best practice" for this use case?

login( event ) {
    event.preventDefault();
    this.loginService.authenticate( this.loginFormGroup.value.username, this.loginFormGroup.value.password )
        .subscribe( result => {
            if ( result === LoginResponse.Success ) {
                // login successful
                this.router.navigate( ['/'] );
            } else if ( result === LoginResponse.NeedsNewPassword ) {
                this.router.navigate( ['/staticdata/changepassword'] );
            } else {
                this.loginFailed = true;
                throw ( new Error( 'Username or password is incorrect' ) );
            }
        },
        err => {
            this.loginFailed = true;
            this.store.dispatch( this.errorActions.setErrorContext( err ) );
        } );
}

If I change this.router.navigate( ['/'] ) to window.location.href = currentPrincipal.locale + '/index.html' or similar, the principal will see another login page, now in a different locale.

Thanks Simon