Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit e6199a8

Browse files
wardbellwardbell
authored
docs(i18n): add internationalization (i18n) guide (#2491)
* docs(i18n): add internationalization (i18n) guide * docs(cb-i18n): revamped to System.import the translation file
1 parent 64d5b3d commit e6199a8

27 files changed

+590
-5
lines changed

‎gulpfile.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -297,7 +297,7 @@ function runE2eTsTests(appDir, outputFile) {
297297
} catch (e) {
298298
exampleConfig = {};
299299
}
300-
300+
301301
var config = {
302302
build: exampleConfig.build || 'tsc',
303303
run: exampleConfig.run || 'http-server:e2e'
@@ -1263,7 +1263,7 @@ function apiExamplesWatch(postShredAction) {
12631263
}
12641264

12651265
function devGuideExamplesWatch(shredOptions, postShredAction, focus) {
1266-
var watchPattern = focus ? '**/' + focus + '/**/*.*' : '**/*.*';
1266+
var watchPattern = focus ? '**/{' + focus + ',cb-' + focus+ '}/**/*.*' : '**/*.*';
12671267
var includePattern = path.join(shredOptions.examplesDir, watchPattern);
12681268
// removed this version because gulp.watch has the same glob issue that dgeni has.
12691269
// var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*');

‎public/docs/_examples/cb-i18n/e2e-spec.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/// <reference path='../_protractor/e2e.d.ts' />
2+
'use strict';
3+
describe('i18n E2E Tests', () => {
4+
5+
beforeEach(function () {
6+
browser.get('');
7+
});
8+
9+
it('should display i18n translated welcome: Bonjour i18n!', function () {
10+
expect(element(by.css('h1')).getText()).toEqual('Bonjour i18n!');
11+
});
12+
13+
});

‎public/docs/_examples/cb-i18n/ts/.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
**/*.ngfactory.ts
2+
**/*.metadata.json
3+
**/messages.xlf
4+
dist
5+
!app/tsconfig.json
6+
!rollup.js

‎public/docs/_examples/cb-i18n/ts/app/app.component.1.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!--#docregion greeting-->
2+
<h1>Hello i18n!</h1>
3+
<!--#enddocregion greeting-->
4+
5+
<!--#docregion i18n-attribute-->
6+
<h1 i18n>Hello i18n!</h1>
7+
<!--#enddocregion i18n-attribute-->
8+
9+
<!--#docregion i18n-attribute-desc-->
10+
<h1 i18n="An introduction header for this sample">Hello i18n!</h1>
11+
<!--#enddocregion i18n-attribute-desc-->

‎public/docs/_examples/cb-i18n/ts/app/app.component.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<!--#docregion-->
2+
<!--#docregion i18n-attribute-meaning-->
3+
<h1 i18n="User welcome|An introduction header for this sample">Hello i18n!</h1>
4+
<!--#enddocregion i18n-attribute-meaning-->

‎public/docs/_examples/cb-i18n/ts/app/app.component.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// #docregion
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
moduleId: module.id,
6+
selector: 'my-app',
7+
templateUrl: 'app.component.html'
8+
})
9+
export class AppComponent { }
10+

‎public/docs/_examples/cb-i18n/ts/app/app.module.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// #docregion
2+
import { NgModule } from '@angular/core';
3+
import { BrowserModule } from '@angular/platform-browser';
4+
5+
import { AppComponent } from './app.component';
6+
7+
@NgModule({
8+
imports: [ BrowserModule ],
9+
declarations: [ AppComponent ],
10+
bootstrap: [ AppComponent ]
11+
})
12+
13+
export class AppModule { }

‎public/docs/_examples/cb-i18n/ts/app/i18n-providers.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// #docregion
2+
import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';
3+
4+
export function getTranslationProviders(): Promise<Object[]> {
5+
6+
// Get the locale id from the global
7+
const locale = document['locale'] as string;
8+
9+
// return no providers if fail to get translation file for locale
10+
const noProviders: Object[] = [];
11+
12+
// No locale or English: no translation providers
13+
if (!locale || locale === 'en') {
14+
return Promise.resolve(noProviders);
15+
}
16+
17+
// Ex: 'i18n/fr/messages.fr.xlf`
18+
const translationFile = `./i18n/${locale}/messages.${locale}.xlf`;
19+
20+
return getTranslationsWithSystemJs(translationFile)
21+
.then( (translations: string ) => [
22+
{ provide: TRANSLATIONS, useValue: translations },
23+
{ provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
24+
{ provide: LOCALE_ID, useValue: locale }
25+
])
26+
.catch(() => noProviders); // ignore if file not found
27+
}
28+
29+
declare var System: any;
30+
31+
function getTranslationsWithSystemJs(file: string) {
32+
return System.import(file + '!text'); // relies on text plugin
33+
}

‎public/docs/_examples/cb-i18n/ts/app/main.1.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// #docregion
2+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3+
4+
import { AppModule } from './app.module';
5+
6+
platformBrowserDynamic().bootstrapModule(AppModule);

‎public/docs/_examples/cb-i18n/ts/app/main.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// #docregion
2+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3+
import { getTranslationProviders } from './i18n-providers';
4+
5+
import { AppModule } from './app.module';
6+
7+
getTranslationProviders().then(providers => {
8+
const options = { providers };
9+
platformBrowserDynamic().bootstrapModule(AppModule, options);
10+
});

‎public/docs/_examples/cb-i18n/ts/example-config.json

Whitespace-only changes.

‎public/docs/_examples/cb-i18n/ts/i18n/fr/messages.fr.xlf

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
3+
<file source-language="en" datatype="plaintext" original="ng2.template">
4+
<body>
5+
<trans-unit id="af2ccf4b5dba59616e92cf1531505af02da8f6d2" datatype="html">
6+
<source>Hello i18n!</source>
7+
<target>Bonjour i18n!</target>
8+
<note priority="1" from="description">An introduction header for this sample</note>
9+
<note priority="1" from="meaning">User welcome</note>
10+
</trans-unit>
11+
</body>
12+
</file>
13+
</xliff>

‎public/docs/_examples/cb-i18n/ts/i18n/fr/messages.fr.xlf.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!-- The `messages.fr.xlf` after translation for documentation purposes -->
2+
<!-- #docregion -->
3+
<?xml version="1.0" encoding="UTF-8" ?>
4+
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
5+
<file source-language="en" datatype="plaintext" original="ng2.template">
6+
<body>
7+
<!-- #docregion trans-unit -->
8+
<trans-unit id="af2ccf4b5dba59616e92cf1531505af02da8f6d2" datatype="html">
9+
<source>Hello i18n!</source>
10+
<target>Bonjour i18n!</target>
11+
<note priority="1" from="description">An introduction header for this sample</note>
12+
<note priority="1" from="meaning">User welcome</note>
13+
</trans-unit>
14+
<!-- #enddocregion trans-unit -->
15+
</body>
16+
</file>
17+
</xliff>

‎public/docs/_examples/cb-i18n/ts/i18n/trans-unit.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!-- #docregion -->
2+
<trans-unit id="af2ccf4b5dba59616e92cf1531505af02da8f6d2" datatype="html">
3+
<source>Hello i18n!</source>
4+
<target/>
5+
<note priority="1" from="description">An introduction header for this sample</note>
6+
<note priority="1" from="meaning">User welcome</note>
7+
</trans-unit>

‎public/docs/_examples/cb-i18n/ts/index.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<!-- #docregion -->
3+
<html>
4+
<head>
5+
<title>Angular i18n example</title>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="styles.css">
9+
10+
<script src="node_modules/core-js/client/shim.min.js"></script>
11+
12+
<script src="node_modules/zone.js/dist/zone.js"></script>
13+
<script src="node_modules/reflect-metadata/Reflect.js"></script>
14+
<script src="node_modules/systemjs/dist/system.src.js"></script>
15+
16+
<script src="systemjs.config.js"></script>
17+
18+
<!-- #docregion i18n -->
19+
<script>
20+
// Get the locale id somehow
21+
document.locale = 'fr';
22+
23+
// Map to the text plugin
24+
System.config({
25+
map: {
26+
text: 'systemjs-text-plugin.js'
27+
}
28+
});
29+
30+
// Launch the app
31+
System.import('app').catch(function(err){ console.error(err); });
32+
</script>
33+
<!-- #enddocregion i18n -->
34+
</head>
35+
36+
<body>
37+
<my-app>Loading...</my-app>
38+
</body>
39+
</html>

‎public/docs/_examples/cb-i18n/ts/plnkr.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"description": "i18n",
3+
"files": [
4+
"app/**/*.css",
5+
"app/**/*.html",
6+
"app/**/*.ts",
7+
"i18n/messages.xlf",
8+
"i18n/fr/messages.fr.xlf",
9+
10+
"!**/*.[1].*",
11+
12+
"styles.css",
13+
"systemjs-text-plugin.js",
14+
"index.html"
15+
],
16+
"tags": ["i18n"]
17+
}

‎public/docs/_examples/cb-i18n/ts/systemjs-text-plugin.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// #docregion
2+
/*
3+
SystemJS Text plugin from
4+
https://github.com/systemjs/plugin-text/blob/master/text.js
5+
*/
6+
exports.translate = function(load) {
7+
if (this.builder && this.transpiler) {
8+
load.metadata.format = 'esm';
9+
return 'exp' + 'ort var __useDefault = true; exp' + 'ort default ' + JSON.stringify(load.source) + ';';
10+
}
11+
12+
load.metadata.format = 'amd';
13+
return 'def' + 'ine(function() {\nreturn ' + JSON.stringify(load.source) + ';\n});';
14+
}

‎public/docs/_examples/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
"test:webpack": "karma start karma.webpack.conf.js",
2121
"build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail",
2222
"build:cli": "ng build",
23-
"build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup.js"
23+
"build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup.js",
24+
"extract": "ng-xi18n"
2425
},
2526
"keywords": [],
2627
"author": "",

‎public/docs/dart/latest/cookbook/_data.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,12 @@
4747
"hide": true
4848
},
4949

50+
"i18n": {
51+
"title": "Internationalization (i18n)",
52+
"intro": "Translate the app's template text into multiple languages",
53+
"hide": true
54+
},
55+
5056
"rc4-to-rc5": {
5157
"title": "RC4 to RC5 Migration",
5258
"intro": "Migrate your RC4 app to RC5 in minutes.",

‎public/docs/dart/latest/cookbook/i18n.jade

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
include ../../../_includes/_ts-temp

‎public/docs/dart/latest/guide/i18n.jade

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
!= partial("../../../_includes/_ts-temp")

‎public/docs/js/latest/cookbook/_data.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,12 @@
4242
"intro": "Validate user's form entries"
4343
},
4444

45+
"i18n": {
46+
"title": "Internationalization (i18n)",
47+
"intro": "Translate the app's template text into multiple languages",
48+
"hide": true
49+
},
50+
4551
"rc4-to-rc5": {
4652
"title": "RC4 to RC5 Migration",
4753
"intro": "Migrate your RC4 app to RC5 in minutes.",

‎public/docs/js/latest/cookbook/i18n.jade

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
include ../../../_includes/_ts-temp

‎public/docs/js/latest/guide/i18n.jade

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
!= partial("../../../_includes/_ts-temp")

‎public/docs/ts/latest/cookbook/_data.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,11 @@
4646
"intro": "Validate user's form entries"
4747
},
4848

49+
"i18n": {
50+
"title": "Internationalization (i18n)",
51+
"intro": "Translate the app's template text into multiple languages"
52+
},
53+
4954
"rc4-to-rc5": {
5055
"title": "RC4 to RC5 Migration",
5156
"intro": "Migrate your RC4 app to RC5 in minutes."

0 commit comments

Comments
 (0)