👽 add ngx translate config

This commit is contained in:
Baptiste Lemoine 2019-10-01 15:43:37 +02:00
parent cc7b4661ee
commit d1ced70b1b
7 changed files with 122 additions and 53 deletions

26
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "framadate", "name": "framadate-funky-frontend",
"version": "0.0.0", "version": "0.1.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@ -1192,6 +1192,22 @@
"webpack-sources": "1.3.0" "webpack-sources": "1.3.0"
} }
}, },
"@ngx-translate/core": {
"version": "11.0.1",
"resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-11.0.1.tgz",
"integrity": "sha512-nBCa1ZD9fAUY/3eskP3Lql2fNg8OMrYIej1/5GRsfcutx9tG/5fZLCv9m6UCw1aS+u4uK/vXjv1ctG/FdMvaWg==",
"requires": {
"tslib": "^1.9.0"
}
},
"@ngx-translate/http-loader": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@ngx-translate/http-loader/-/http-loader-4.0.0.tgz",
"integrity": "sha512-x8LumqydWD7eX9yQTAVeoCM9gFUIGVTUjZqbxdAUavAA3qVnk9wCQux7iHLPXpydl8vyQmLoPQR+fFU+DUDOMA==",
"requires": {
"tslib": "^1.9.0"
}
},
"@schematics/angular": { "@schematics/angular": {
"version": "8.2.1", "version": "8.2.1",
"resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-8.2.1.tgz", "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-8.2.1.tgz",
@ -4310,9 +4326,9 @@
"dev": true "dev": true
}, },
"handlebars": { "handlebars": {
"version": "4.1.2", "version": "4.4.0",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.2.tgz", "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.4.0.tgz",
"integrity": "sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==", "integrity": "sha512-xkRtOt3/3DzTKMOt3xahj2M/EqNhY988T+imYSlMgs5fVhLN2fmKVVj0LtEGmb+3UUYV5Qmm1052Mm3dIQxOvw==",
"dev": true, "dev": true,
"requires": { "requires": {
"neo-async": "^2.6.0", "neo-async": "^2.6.0",

View File

@ -20,6 +20,8 @@
"@angular/platform-browser": "~8.2.0", "@angular/platform-browser": "~8.2.0",
"@angular/platform-browser-dynamic": "~8.2.0", "@angular/platform-browser-dynamic": "~8.2.0",
"@angular/router": "~8.2.0", "@angular/router": "~8.2.0",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"rxjs": "~6.4.0", "rxjs": "~6.4.0",
"tslib": "^1.10.0", "tslib": "^1.10.0",
"zone.js": "~0.9.1" "zone.js": "~0.9.1"

View File

@ -19,3 +19,13 @@
<router-outlet></router-outlet> <router-outlet></router-outlet>
</main> </main>
<framadate-debugger></framadate-debugger> <framadate-debugger></framadate-debugger>
<div id="translate_example">
<div class="lang-choices">
<button (click)="switchLanguage('en')">en</button>
<button (click)="switchLanguage('fr')">fr</button>
</div>
<h1 translate>Title</h1>
<div>
{{ 'Intro' | translate:user }}
</div>
</div>

View File

@ -1,4 +1,5 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {TranslateService} from "@ngx-translate/core";
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@ -9,4 +10,17 @@ export class AppComponent {
title = 'framadate'; title = 'framadate';
//translation demo: //translation demo:
minutes = 12; minutes = 12;
user = {
name: 'Arthur',
age: 42
};
constructor(private translate: TranslateService) {
this.translate.setDefaultLang('fr');
}
switchLanguage(language: string) {
this.translate.use(language);
}
} }

View File

@ -10,59 +10,72 @@ import {FormsModule} from '@angular/forms';
import {NavigationComponent} from './ui/navigation/navigation.component'; import {NavigationComponent} from './ui/navigation/navigation.component';
import {RouterModule} from '@angular/router'; import {RouterModule} from '@angular/router';
import {Routes} from './config/Routes'; import {Routes} from './config/Routes';
import {CommonModule} from '@angular/common'; import {CommonModule, registerLocaleData} from '@angular/common';
import { DatesComponent } from './pages/dates/dates.component'; import {DatesComponent} from './pages/dates/dates.component';
import { DebuggerComponent } from './debugger/debugger.component'; import {DebuggerComponent} from './debugger/debugger.component';
import { VisibilityComponent } from './pages/visibility/visibility.component'; import {VisibilityComponent} from './pages/visibility/visibility.component';
import { ResumeComponent } from './pages/resume/resume.component'; import {ResumeComponent} from './pages/resume/resume.component';
import { PicturesComponent } from './pages/pictures/pictures.component'; import {PicturesComponent} from './pages/pictures/pictures.component';
import { AnswersComponent } from './pages/answers/answers.component'; import {AnswersComponent} from './pages/answers/answers.component';
import { EndConfirmationComponent } from './pages/end-confirmation/end-confirmation.component'; import {EndConfirmationComponent} from './pages/end-confirmation/end-confirmation.component';
import { CreateOrRetrieveComponent } from './pages/create-or-retrieve/create-or-retrieve.component'; import {CreateOrRetrieveComponent} from './pages/create-or-retrieve/create-or-retrieve.component';
import { CalendarComponent } from './calendar/calendar.component'; import {CalendarComponent} from './calendar/calendar.component';
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr'; import localeFr from '@angular/common/locales/fr';
import { VotingSummaryComponent } from './pages/voting-summary/voting-summary.component'; import {VotingSummaryComponent} from './pages/voting-summary/voting-summary.component';
import { VotingGraphComponent } from './pages/voting-graph/voting-graph.component'; import {VotingGraphComponent} from './pages/voting-graph/voting-graph.component';
import { VotingChoiceComponent } from './pages/voting-choice/voting-choice.component'; import {VotingChoiceComponent} from './pages/voting-choice/voting-choice.component';
import { PasswordComponent } from './pages/password/password.component'; import {PasswordComponent} from './pages/password/password.component';
import { HomeComponent } from './pages/home/home.component'; import {HomeComponent} from './pages/home/home.component';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import {TranslateLoader, TranslateModule, TranslateService} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
registerLocaleData(localeFr, 'fr'); registerLocaleData(localeFr, 'fr');
@NgModule({ export function HttpLoaderFactory(http: HttpClient) {
declarations: [ return new TranslateHttpLoader(http);
AppComponent, }
BaseComponent,
KindComponent,
HeaderComponent,
NavigationComponent,
DatesComponent,
DebuggerComponent,
VisibilityComponent,
ResumeComponent,
PicturesComponent,
AnswersComponent,
EndConfirmationComponent,
CreateOrRetrieveComponent,
CalendarComponent,
VotingSummaryComponent,
VotingGraphComponent,
VotingChoiceComponent,
PasswordComponent,
HomeComponent,
], @NgModule({
imports: [ declarations: [
CommonModule, AppComponent,
BrowserModule, BaseComponent,
AppRoutingModule, KindComponent,
FormsModule, HeaderComponent,
RouterModule.forRoot(Routes) NavigationComponent,
], DatesComponent,
providers: [], DebuggerComponent,
bootstrap: [AppComponent] VisibilityComponent,
ResumeComponent,
PicturesComponent,
AnswersComponent,
EndConfirmationComponent,
CreateOrRetrieveComponent,
CalendarComponent,
VotingSummaryComponent,
VotingGraphComponent,
VotingChoiceComponent,
PasswordComponent,
HomeComponent,
],
imports: [
CommonModule,
BrowserModule,
AppRoutingModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
HttpClientModule,
FormsModule,
RouterModule.forRoot(Routes)
],
providers: [TranslateService],
bootstrap: [AppComponent]
}) })
export class AppModule { export class AppModule {
} }

7
src/assets/i18n/en.json Normal file
View File

@ -0,0 +1,7 @@
{
"Title": "Translation example",
"Intro": "Hello I am {{name}}, I am {{age}} years old.",
"home": {
"title": "home's title"
}
}

7
src/assets/i18n/fr.json Normal file
View File

@ -0,0 +1,7 @@
{
"Title": "Example de traduction",
"Intro": "Bonjour je m'appelle {{name}}, j'ai {{age}} ans.",
"home": {
"title": "le titre de la home"
}
}