three request on init

[bardiarastin]

I'm submitting a ... (check one with "x")

[ x] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior
when app inits it sends three request for one json file
Expected/desired behavior
it should send one

Reproduction of the problem

Please tell us about your environment:

• ng2-translate version: 5.0.0

• Angular version: 2.3.1

• Browser: [all ]

• Language: [ TypeScript ]

[ocombe]

Hello, yes it should only send one request. Can you make a plunker with a reproduction of the problem?

[bardiarastin]

unfortunately this app is for a company so i can not put it on a plunker :(

[ocombe]

Did you load the TranslateModule in multiple ngModules and called .forRoot each time?

[bardiarastin]

here is the only ng module i have :

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { HttpModule } from '@angular/http'
import { Http } from '@angular/http'

// components 
import { AppComponent } from './components/root/app.component'
import { HeaderComponent } from './components/header/header.component'
import { SidebarComponent } from './components/sidebar/sidebar.component'
import { FilesComponent } from './components/files/files.component'
import { ProgressBarComponent } from './components/progressbar/progressbar.component'
import { NotificationComponent } from './components/notification/notification.component'
import { ToolbarComponent } from './components/files/toolbar/toolbar.component'

// pipes
import { FileSizePipe } from './pipes/filesize.pipe'

// services
import { LanguageService } from './services/language.service'
import { FileService } from './services/file.service'

// 3rd party modules 
import { TreeModule } from 'angular2-tree-component'
import { DropdownModule } from 'ng2-dropdown'
import { TranslateModule, TranslateStaticLoader, TranslateLoader } from 'ng2-translate'
import { createTranslateLoader } from './config/language.config'

@NgModule({
  declarations: [
    AppComponent,
    FileSizePipe,
    HeaderComponent,
    SidebarComponent,
    FilesComponent,
    ProgressBarComponent,
    NotificationComponent,
    ToolbarComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    TreeModule,
    DropdownModule,
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]
    })
  ],
  providers: [LanguageService, FileService],
  bootstrap: [AppComponent]
})
export class AppModule { }

language.config.ts

`import { TranslateModule, TranslateStaticLoader, TranslateLoader } from 'ng2-translate'
import { Http } from '@angular/http'

export function createTranslateLoader(http: Http) {
    return new TranslateStaticLoader(http, './assets/i18n', '.json')
}

and root component (app.component.ts)

import { Component } from '@angular/core'
import { TranslateService } from 'ng2-translate'
import { LanguageService } from '../../services/language.service'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(private translate: TranslateService, private lang: LanguageService) {
    translate.addLangs(['en', 'fa'])
    translate.setDefaultLang('fa')
    translate.use('fa')
    this.lang.getCurrentLang().subscribe(
      value => {
        this.translate.use(value)
      }
    )
  }
}

language.service.ts

import { Injectable } from '@angular/core'
import { TranslateService } from 'ng2-translate'
import { BehaviorSubject } from 'rxjs/BehaviorSubject'


@Injectable()
export class LanguageService {

  private language: BehaviorSubject<string> = new BehaviorSubject<string>('fa')

  getCurrentLang(): BehaviorSubject<string> {
    return this.language
  }

  changeLang(newLang: string): void {
    this.language.next(newLang)
  }

}

[onecib]

@ocombe
i think because of the fact that we are calling the setDefaultLang method and then calling the use method in the constructor of app.component.ts

translate.setDefaultLang('en');

let browserLang: string = translate.getBrowserLang();
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');

when you comment the setDefaultLang method out, it is loading just one .json file.
What do you think about that ?

[ocombe]

I just noticed that I have the same problem on my project now that I implemented lazy loading, I'll see how to fix it and let you know.

[ocombe]

Ok so I used to call .forRoot in my shared module, and export TranslateModule from there, and configure the module in the constructor of the shared module. But apparently this was executed for each lazy loaded module that imported this shared module...
I moved the forRoot to my root module and just imported TranslateModule in my shared module (without calling forRoot), and now it only loads one json file.

[SamVerschueren]

Exactly, that's why it is called forRoot, because you only have to call it in the root of your project ;).

[ocombe]

and that's why it's in the docs!

[SamVerschueren]

But then again, who reads that :p?

[bardiarastin]

@ocombe would you please make a plunker ? at the moment this plunker is sending 2 requests for en.json

[ocombe]

Yes, that's a different problem though (but one I need to fix).

[deeg]

Is the fix for this to only allow one request to me made a time? I'm happy to work on a PR for this if that is an approach you want to take.

Or is the user just supposed to know not to call use and setDefaultLang for the same lang at the same time and this can be closed?

[fulls1z3]

Hi @ocombe, @SamVerschueren; I also noticed the same issue @deeg described. When use method is called before setDefaultLang method finishes fetching translations from JSON, then ngx-translate doubles the translation retrieval requests.

I know it's maybe not among the priorities while there're tons of other job awaiting to be get done. Just want to let you know, I might come up with something useful when I find some time for it.

[deeg]

Sorry I got busy at the end of last week. I'm hoping to get a fix in for this tomorrow or Monday.

[dgroh]

Also having this issue. json is called twice when using setDefaultLang and use in AppComponent constructor.

[CarlosPinedaT]

@dgroh, , could you solve it? as?

[dhardtke]

We are still having this issue in our app, even though we are running the latest (stable) Angular and ngx-translate version. If I comment out "setDefaultLang()" everything is fine, though.

[CarlosPinedaT]

OK thanks!

[nfavaron]

Still having the issue.

AppModule imports TranslateModule.forRoot() with a TranslateLoader.
AppComponent calls .setDefaultLang() as well as .use() which triggers a 2nd exact same HTTP call.

I need .use() in order to subscribe to the observable.

[bautistaaa]

Still having issue as well. Can we re-open this?