1

My app.component looks like this:

export class AppComponent {

    public constructor(public translate: TranslateService) {

        const userLang = navigator.language.split('-')[0];
        const acceptedUserLang = /(de|en)/gi.test(userLang) ? userLang : 'en';
        this.translate.setDefaultLang('en');
        this.translate.use(acceptedUserLang);
    }
}

My app.routing has the following definition:

const appRoutes: Routes = [
    {path: 'signUpSuccess/:language', component: SignUpSuccessComponent},
];

And my signUpSuccess.component:

export class SignUpSuccessComponent {

    public constructor(translate: TranslateService, route: ActivatedRoute) {
        translate.use(route.snapshot.params['language']);
    }
}

When I load the page with /signUpSuccess/de, app.component sets the language to en, ng2-translate starts to fetch the en.json from the server, then signUpSuccess.component sets the language to de, ng2-translate starts t fetch the de.json from the server. If, for any reason now de.json wins the race and arrives first at the client, then the language will switch to en when the en.json arrives the client. How can I avoid this?

stofl
  • 2,950
  • 6
  • 35
  • 48

1 Answers1

0

See this demo plunker: https://plnkr.co/edit/dfhdAI1o6VhVHFcnKmWH?p=preview

You can use this function

switchMap()

With this function the previous request will be canceled, if they are still pending.

slaesh
  • 16,659
  • 6
  • 50
  • 52
  • Thank you for your time, to write the code and help me. But ng2-translate is an angular plugin. I'll look into their code. ... I thought it must be my fault. – stofl Aug 31 '16 at 19:46