Skip to content

Commit 904ad5e

Browse files
hakonamatataMarkPieszak
hakonamatata
authored and
MarkPieszak
committed
I18n support - Can switch between English and Norwegian (TrilonIO#155)
* added ng2-translate * added translate module to app.module * translation works but json location hardcoded... * added buttons for switching language * some more translations * switching between english and norwegian works Closes TrilonIO#111
1 parent bcbd4e1 commit 904ad5e

File tree

9 files changed

+157
-85
lines changed

9 files changed

+157
-85
lines changed

‎Client/app/app.component.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import { Subscription } from 'rxjs/Subscription';
55
import { isPlatformServer } from '@angular/common';
66
import { LinkService } from './shared/link.service';
77

8+
// i18n support
9+
import { TranslateService } from '@ngx-translate/core';
10+
811
@Component({
912
selector: 'app',
1013
templateUrl: './app.component.html',
@@ -25,8 +28,15 @@ export class AppComponent implements OnInit, OnDestroy {
2528
private activatedRoute: ActivatedRoute,
2629
private title: Title,
2730
private meta: Meta,
28-
private linkService: LinkService
29-
) { }
31+
private linkService: LinkService,
32+
public translate: TranslateService
33+
) {
34+
// this language will be used as a fallback when a translation isn't found in the current language
35+
translate.setDefaultLang('en');
36+
37+
// the lang to use, if the lang isn't available, it will use the current loader to get them
38+
translate.use('en');
39+
}
3040

3141
ngOnInit() {
3242
// Change "Title" on every navigationEnd event

‎Client/app/app.module.ts‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import { NgModule } from '@angular/core';
22
import { RouterModule } from '@angular/router';
3-
import { CommonModule } from '@angular/common';
4-
import { HttpModule } from '@angular/http';
3+
import { CommonModule, APP_BASE_HREF } from '@angular/common';
4+
import { HttpModule, Http } from '@angular/http';
55
import { FormsModule } from '@angular/forms';
66

77
import { Ng2BootstrapModule } from 'ng2-bootstrap';
88

9+
// i18n support
10+
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
11+
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
12+
913
import { AppComponent } from './app.component';
1014
import { NavMenuComponent } from './components/navmenu/navmenu.component';
1115
import { HomeComponent } from './containers/home/home.component';
@@ -17,6 +21,13 @@ import { Ng2BootstrapComponent } from './containers/ng2-bootstrap-demo/ng2bootst
1721
import { LinkService } from './shared/link.service';
1822
import { ConnectionResolver } from './shared/route.resolver';
1923

24+
export function createTranslateLoader(http: Http) {
25+
26+
// BUG: URLs requested via Http on the server must be absolute
27+
// TODO: Should not hardcode localhost://5000, should use APP_BASE_HREF!!
28+
return new TranslateHttpLoader(http, 'http://localhost:5000/assets/i18n/', '.json');
29+
}
30+
2031
@NgModule({
2132
declarations: [
2233
AppComponent,
@@ -33,6 +44,15 @@ import { ConnectionResolver } from './shared/route.resolver';
3344
FormsModule,
3445
Ng2BootstrapModule.forRoot(), // You could also split this up if you don't want the Entire Module imported
3546

47+
// i18n support
48+
TranslateModule.forRoot({
49+
loader: {
50+
provide: TranslateLoader,
51+
useFactory: (createTranslateLoader),
52+
deps: [Http]
53+
}
54+
}),
55+
3656
// App Routing
3757
RouterModule.forRoot([
3858
{
@@ -80,7 +100,7 @@ import { ConnectionResolver } from './shared/route.resolver';
80100
}
81101
},
82102
{
83-
path: 'chat', component: ChatComponent,
103+
path: 'chat', component: ChatComponent,
84104
// Wait until the resolve is finished before loading the Route
85105
resolve: { connection: ConnectionResolver },
86106
data: {
@@ -109,8 +129,9 @@ import { ConnectionResolver } from './shared/route.resolver';
109129
])
110130
],
111131
providers: [
112-
LinkService,
113-
ConnectionResolver
132+
LinkService,
133+
ConnectionResolver,
134+
TranslateModule
114135
]
115136
})
116137
export class AppModule {

‎Client/app/components/navmenu/navmenu.component.html‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,43 @@
11
<div class='main-nav'>
2-
<div class='navbar'>
3-
<div class='navbar-header'>
4-
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
2+
<div class='navbar'>
3+
<div class='navbar-header'>
4+
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
55
<span class='sr-only'>Toggle navigation</span>
66
<span class='icon-bar'></span>
77
<span class='icon-bar'></span>
88
<span class='icon-bar'></span>
99
</button>
10-
<a class='navbar-brand' [routerLink]="['/home']">Angular 4 Universal & ASP.NET Core </a>
11-
</div>
12-
<div class='clearfix'></div>
13-
<div class='navbar-collapse collapse'>
14-
<ul class='nav navbar-nav'>
15-
<li [routerLinkActive]="['link-active']">
16-
<a [routerLink]="['/home']">
17-
<span class='glyphicon glyphicon-home'></span> Home
18-
</a>
19-
</li>
20-
<li [routerLinkActive]="['link-active']">
21-
<a [routerLink]="['/counter']">
22-
<span class='glyphicon glyphicon-education'></span> Counter
23-
</a>
24-
</li>
25-
<li [routerLinkActive]="['link-active']">
26-
<a [routerLink]="['/users']">
27-
<span class='glyphicon glyphicon-user'></span> REST API Demo
28-
</a>
29-
</li>
30-
<li [routerLinkActive]="['link-active']">
31-
<a [routerLink]="['/ng2-bootstrap']">
32-
<span class='glyphicon glyphicon-user'></span> ng2-Bootstrap demo
33-
</a>
34-
</li>
35-
<!--<li [routerLinkActive]="['link-active']">
10+
<a class='navbar-brand' [routerLink]="['/home']">Angular 4 Universal & ASP.NET Core </a>
11+
</div>
12+
<div class='clearfix'></div>
13+
<div class='navbar-collapse collapse'>
14+
<ul class='nav navbar-nav'>
15+
<li [routerLinkActive]="['link-active']">
16+
<a [routerLink]="['/home']">
17+
<span class='glyphicon glyphicon-home'></span> {{ 'HOME' | translate }}
18+
</a>
19+
</li>
20+
<li [routerLinkActive]="['link-active']">
21+
<a [routerLink]="['/counter']">
22+
<span class='glyphicon glyphicon-education'></span> {{ 'COUNTER' | translate }}
23+
</a>
24+
</li>
25+
<li [routerLinkActive]="['link-active']">
26+
<a [routerLink]="['/users']">
27+
<span class='glyphicon glyphicon-user'></span> REST API Demo
28+
</a>
29+
</li>
30+
<li [routerLinkActive]="['link-active']">
31+
<a [routerLink]="['/ng2-bootstrap']">
32+
<span class='glyphicon glyphicon-user'></span> ng2-Bootstrap demo
33+
</a>
34+
</li>
35+
<!--<li [routerLinkActive]="['link-active']">
3636
<a [routerLink]="['/chat']">
3737
<span class='glyphicon glyphicon-comment'></span> Chat
3838
</a>
3939
</li>-->
40-
</ul>
41-
</div>
40+
</ul>
4241
</div>
43-
</div>
42+
</div>
43+
</div>

‎Client/app/containers/home/home.component.html‎

Lines changed: 59 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,76 @@
1-

2-
<h1>{{ title }}</h1>
1+
<h1>
2+
{{ title }}</h1>
33

44
<blockquote>
5-
<strong>Enjoy the latest features from .NET Core & Angular 4.0!</strong>
6-
<br>
7-
For more info check the repo here: <a href="https://github.com/MarkPieszak/aspnetcore-angular2-universal">AspNetCore-Angular2-Universal repo</a>
5+
<strong>Enjoy the latest features from .NET Core & Angular 4.0!</strong>
6+
<br> For more info check the repo here: <a href="https://github.com/MarkPieszak/aspnetcore-angular2-universal">AspNetCore-Angular2-Universal repo</a>
87

9-
<br><br>
8+
<br><br>
109
</blockquote>
1110

1211

1312
<div class="row">
14-
<div class="col-lg-6">
15-
<h2>What does this Starter offer? </h2>
13+
<div class="col-lg-6">
14+
<h2>{{ 'HOME_FEATURE_LIST_TITLE' | translate }} </h2>
15+
<ul>
16+
<li>ASP.NET Core 1.1 :: ( Visual Studio 2017 )</li>
17+
<li>
18+
Angular 4.* front-end UI framework
1619
<ul>
17-
<li>ASP.NET Core 1.1 :: ( Visual Studio 2017 )</li>
18-
<li>
19-
Angular 4.* front-end UI framework
20-
<ul>
21-
<li>Angular **platform-server** (Universal moved into Core here) - server-side rendering for SEO, deep-linking, and incredible performance.</li>
22-
<!--<li>HMR State Management - Don't lose your applications state during HMR!</li>-->
23-
<li>AoT (Ahead-of-time) production compilation for even faster Prod builds.</li>
24-
</ul>
25-
</li>
26-
<li>
27-
The latest TypeScript 2.* features
28-
<!--<ul>
20+
<li>Angular **platform-server** (Universal moved into Core here) - server-side rendering for SEO, deep-linking, and
21+
incredible performance.</li>
22+
<!--<li>HMR State Management - Don't lose your applications state during HMR!</li>-->
23+
<li>AoT (Ahead-of-time) production compilation for even faster Prod builds.</li>
24+
</ul>
25+
</li>
26+
<li>
27+
The latest TypeScript 2.* features
28+
<!--<ul>
2929
<li>
3030
"Path" support example - create your own custom directory paths to avoid `../../` directory diving.<br />
3131
Check the <a href="https://github.com/MarkPieszak/aspnetcore-angular2-universal/blob/master/tsconfig.json">tsconfig</a> to see how they are setup.
3232
</li>
3333
</ul>-->
34-
</li>
35-
<li>
36-
Webpack 2
37-
<ul>
38-
<!--<li>TS2 aware path support</li>-->
39-
<li>Hot Module Reloading/Replacement for an amazing development experience.</li>
40-
<li>Tree-shaking</li>
41-
</ul>
42-
</li>
43-
44-
<li>Bootstrap (ng2-bootstrap) : Bootstrap capable of being rendered even on the server.</li>
45-
<li>Unit testing via karma & jasmine.</li>
46-
<!--<li>e2e testing via protractor.</li>-->
34+
</li>
35+
<li>
36+
Webpack 2
37+
<ul>
38+
<!--<li>TS2 aware path support</li>-->
39+
<li>Hot Module Reloading/Replacement for an amazing development experience.</li>
40+
<li>Tree-shaking</li>
4741
</ul>
48-
</div>
42+
</li>
4943

50-
<div class="col-lg-6">
51-
<h2>Having issues?</h2>
44+
<li>Bootstrap (ng2-bootstrap) : Bootstrap capable of being rendered even on the server.</li>
45+
<li>Unit testing via karma & jasmine.</li>
46+
<!--<li>e2e testing via protractor.</li>-->
47+
</ul>
5248

53-
<ul>
54-
<li><strong>Issues with this Starter?</strong> <br>Please post an issue here: <a href="https://github.com/MarkPieszak/aspnetcore-angular2-universal">AspNetCore-Angular2-Universal repo</a><br><br></li>
55-
<!--<li><strong>Issues with <u>Universal</u> itself?</strong> <br>Please post an issue here: <a href="https://github.com/angular/universal">Angular Universal repo</a></li>-->
56-
</ul>
57-
</div>
49+
</div>
50+
51+
<div class="col-lg-6">
52+
<h2>{{ 'HOME_ISSUES_TITLE' | translate }}</h2>
53+
54+
<ul>
55+
<li><strong>Issues with this Starter?</strong> <br>Please post an issue here: <a href="https://github.com/MarkPieszak/aspnetcore-angular2-universal">AspNetCore-Angular2-Universal repo</a><br><br></li>
56+
<!--<li><strong>Issues with <u>Universal</u> itself?</strong> <br>Please post an issue here: <a href="https://github.com/angular/universal">Angular Universal repo</a></li>-->
57+
</ul>
58+
</div>
59+
60+
</div>
61+
62+
<div class="row">
63+
<div class="col-lg-12">
64+
65+
<h2> {{ 'SWITCH_LANGUAGE' | translate }}</h2>
66+
67+
<button class="btn btn-default" (click)="setLanguage('en')">
68+
<span class="flag-icon flag-icon-us"></span> {{ 'ENGLISH' | translate }}
69+
</button>
70+
71+
<button class="btn btn-default" (click)="setLanguage('no')">
72+
<span class="flag-icon flag-icon-no"></span> {{ 'NORWEGIAN' | translate }}
73+
</button>
5874

59-
</div>
75+
</div>
76+
</div>

‎Client/app/containers/home/home.component.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component, OnInit, Inject } from '@angular/core';
22

3+
import { TranslateService } from '@ngx-translate/core';
34

45
@Component({
56
selector: 'app-home',
@@ -10,12 +11,13 @@ export class HomeComponent implements OnInit {
1011
title: string = 'Angular 4.0 Universal & ASP.NET Core advanced starter-kit';
1112

1213
// Use "constructor"s only for dependency injection
13-
constructor () {
14-
}
14+
constructor(public translate: TranslateService) { }
1515

1616
// Here you want to handle anything with @Input()'s @Output()'s
1717
// Data retrieval / etc - this is when the Component is "ready" and wired up
18-
ngOnInit () {
18+
ngOnInit() { }
1919

20+
public setLanguage(lang) {
21+
this.translate.use(lang);
2022
}
2123
}

‎Views/Shared/_Layout.cshtml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111

1212
<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
1313

14+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css" />
15+
1416
@Html.Raw(ViewData["Styles"])
1517

1618
</head>

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
"@angular/platform-browser-dynamic": "^4.0.0",
2020
"@angular/platform-server": "^4.0.0",
2121
"@angular/router": "^4.0.0",
22+
"@ngx-translate/core": "^6.0.1",
23+
"@ngx-translate/http-loader": "0.0.3",
2224
"@types/node": "^7.0.12",
2325
"angular2-template-loader": "0.6.0",
2426
"aspnet-prerendering": "^2.0.0",
@@ -39,11 +41,11 @@
3941
"json-loader": "^0.5.4",
4042
"ng2-bootstrap": "^1.6.1",
4143
"ng2-signalr": "^2.0.2",
44+
"node-sass": "^4.5.2",
4245
"preboot": "^4.5.2",
4346
"raw-loader": "^0.5.1",
4447
"rimraf": "^2.6.1",
4548
"rxjs": "^5.0.1",
46-
"node-sass": "^4.5.2",
4749
"sass-loader": "^6.0.3",
4850
"signalr": "^2.2.1",
4951
"style-loader": "^0.13.1",

‎wwwroot/assets/i18n/en.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"HOME": "Home",
3+
"HOME_FEATURE_LIST_TITLE": "What does this Starter offer?",
4+
"HOME_ISSUES_TITLE": "Having issues?",
5+
"COUNTER": "Counter",
6+
"SWITCH_LANGUAGE": "Switch language",
7+
"ENGLISH": "English",
8+
"NORWEGIAN": "Norwegian"
9+
}

‎wwwroot/assets/i18n/no.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"HOME": "Hjem",
3+
"HOME_FEATURE_LIST_TITLE": "Hva tilbyr dette prosjektet?",
4+
"HOME_ISSUES_TITLE": "Oppever du problemer?",
5+
"COUNTER": "Teller",
6+
"SWITCH_LANGUAGE": "Bytt språk",
7+
"ENGLISH": "Engelsk",
8+
"NORWEGIAN": "Norsk"
9+
}

0 commit comments

Comments
 (0)