Problem with ngx-translate no translate


#1

62/5000

Hello everyone,
I have a problem, my translation does not work
app.module.ts

import {Http, HttpModule} from '@angular/http';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
//api
import { ErrorHandler, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { SplashScreen } from '@ionic-native/splash-screen';
import { SQLite } from '@ionic-native/sqlite';
import { StatusBar } from '@ionic-native/status-bar';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
//page
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { SignupPage } from '../pages/signup/signup';
import { TabsPage } from '../pages/tabs/tabs';
import { WelcomePage } from '../pages/welcome/welcome';
import { MyApp } from './app.component';
import { SelectionPage } from '../pages/selection/selection';
import { TallyPage } from '../pages/tally/tally';
import { StatementPage } from '../pages/statement/statement';
import { SummaryPage } from '../pages/summary/summary';


export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', 'fr.json');
}

@NgModule({
  declarations: [
    MyApp,
    AppComponent,
    WelcomePage,
    StatementPage,
    SummaryPage,
    TallyPage,
    SelectionPage,
    LoginPage,
    SignupPage,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    FormsModule,
    IonicModule.forRoot(MyApp),
    HttpModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: ( createTranslateLoader ),
        deps: [HttpClient]
      }
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AppComponent,
    WelcomePage,
    SummaryPage,
    StatementPage,
    TallyPage,
    SelectionPage,
    LoginPage,
    SignupPage,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    SQLite,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}


app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TranslateService } from '@ngx-translate/core';

import { WelcomePage } from '../pages/welcome/welcome';

@Component({
  templateUrl: 'app.html',
})
export class MyApp {
  rootPage:any = WelcomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public translateService: TranslateService,) {

    this.translateService.setDefaultLang('en');
    this.translateService.use('fr');

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

and welcome.html

<ion-content padding id="Welcome">

  <h1>{{ 'tally' | translate }}</h1>
  <div>decouverte de la connection</div>

  <button ion-button block class="margintop" (tap)="SignupPage()">signup</button>
  <button ion-button block color="danger" (tap)="LoginPage()">Login</button>

</ion-content>

thanks

ludo


#2

problÚme résolu erreur de frappe de ma part trouvé aprÚs 3 heures de recherche.

le post peu ĂȘtre supprimĂ© merci


#3

Are you lazyloading your pages?


#4

he/she found his/her solution, there was a typing mistake somewhere


#5

C’est il :wink:
Ce probleme etant resolu je cherche maintenant Ă  utiliser globalization mais je ne trouve pas comment installer correctement.
Toute ma traduction est faite mais le mois de la date reste affiché en anglais et pas possible de traduire MMMM


#6

Si tu utilises uniquement “fr”, peut-ĂȘtre https://angular.io/guide/i18n ?

providers: [ { provide: LOCALE_ID, useValue: 'fr' } ],

#7

J’ai voulu installer comme indiquer sur le lien mais il me manque le fichier angular.json.
J’ai donc fais la mise a jour du angular/cli comme dit sur d’autre site mais j’ai toujours pas ce fichier du coup je peux pas installer


#8

T’utilises Ionic v3 ou v4?

Ionic v3 = Angular v5 = pas de angular.json
Ionic v4 = Angular v6 = angular.json


#9

Je suis avec ionic 3 et angular 5
J’ai telechargĂ© l’example donnĂ© dans angular donc est ce que je pourrais copier fichier et le mettre dans mon projet?


#10

pas sĂ»re que je comprennes ce que tu veux faire. angular.json est un fichier de configuration de Angular v6 respectivement n’aurait aucun effet dans une app v5

tu parles de quel exemple?


#11

sur le lien que tu m’a donnĂ© pour angular https://angular.io/guide/i18n
il y a un dossier exemple a telecharger.
comment faire alors avec ma version 5?


#12

Ah ok now je comprends de quoi tu parles, je crois pas que tu as besoin de leur démo

  1. tu utilises ngx-translate et pas angular i18n pour tes traductions et comme tu as dis, ça ça fonctionne

  2. maintenant ce que tu as besoin c’est de formater les dates non? donc il te faut juste essayĂ© de modifier ton app.module comme dans leur code d’exemple respectivement la partie LOCALE_ID est ce qui t’intĂ©resses

     import { LOCALE_ID, NgModule } from '@angular/core';
     import { BrowserModule } from '@angular/platform-browser';
     
     import { AppComponent } from '../src/app/app.component';
     
     @NgModule({
       imports: [ BrowserModule ],
       declarations: [ AppComponent ],
       providers: [ { provide: LOCALE_ID, useValue: 'fr' } ],
       bootstrap: [ AppComponent ]
     })
     export class AppModule { }
    

enfin je suppose


#13

Le module ‘
/src/app/app.component’ est introuvable. :slightly_frowning_face:

je cherche


#14

Uniquement la ligne

providers: [ { provide: LOCALE_ID, useValue: 'fr' } ],

et ses imports t’intĂ©resse, ignore le reste


#15

ton app est open source?


#16

open source??? heuuuuu je sais pas


#17

tu peux poster tout le code de ton module app.module.ts alors?

un peu compliquĂ© de voir ou sont tes erreurs sans plus d’indications prĂ©cises


#18

bon j’ai trouvĂ©. qui cherche trouve :wink:
j’ai du ajouter:
dans app.module.ts

import { registerLocaleData } from '@angular/common';
import  localeFr from '@angular/common/locales/fr';

puis

providers: [ { provide: LOCALE_ID, useValue: 'fr' } ],

et (a la fin du app.module)

registerLocaleData(localeFr, 'fr');

sans ses éléments ça ne fonctionne pas

merci du coup de mains, comme toujours :wink::wink::slightly_smiling_face::slightly_smiling_face:


#19

cool, bravo! have fun :wink:


#20

merci encore pour l’aide