Jesus' tweaks

Author: Foxandxss

public/docs/_examples/i18n/ts-snippets/i18n.config.snippets.ts

@@ -13,15 +13,15 @@
 
 // #docregion i18n-plural-pipe
 @Component({
-  selector: 'app',
+  selector: 'my-app',
   template: `
     <div>
       {{ messages.length | i18nPlural: messageMapping }}
     </div>
-  `,
+  `
 })
-class MyApp {
-  messages: any[];
+export class AppComponent {
+  messages: string[];
   messageMapping: {[k:string]: string} = {
     '=0': 'No messages.',
     '=1': 'One message.',
@@ -32,79 +32,56 @@ class MyApp {
 
 // #docregion i18n-select-pipe
 @Component({
-  selector: 'app',
+  selector: 'my-app',
   template: `
     <div>
-      {{ gender | i18nSelect: inviteMap }}
+      {{ gender | i18nSelect: genderMap }}
     </div>
-  `,
+  `
 })
-class MyApp {
-  gender: string = 'male';
-  inviteMap: any = {
+export class AppComponent {
+  gender = 'male';
+  genderMap = {
     'male': 'Invite him.',
     'female': 'Invite her.',
     'other': 'Invite them.'
   }
 }
 // #enddocregion i18n-select-pipe
 
-// #docregion tsconfig1
+// #docregion tsconfig
 {
   "compilerOptions": {
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
     "target": "es5",
     "module": "commonjs",
-    "outDir": "./dist/out-tsc"
-  },
-  "files": [
-    "./src/main.ts"
-  ]
-}
-// #enddocregion tsconfig1
-
-// #docregion tsconfig2
-{
-  "compilerOptions": {
+    "moduleResolution": "node",
+    "sourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es5",
-    "module": "commonjs",
-    "outDir": "./dist/out-tsc"
+    "removeComments": false,
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true
   },
-  "files": [
-    "./src/main.ts"
-  ],
   "angularCompilerOptions": {
-    "genDir": "./src/i18n"
+    "genDir": "./app/i18n"
   }
 }
-// #enddocregion tsconfig2
+// #enddocregion tsconfig
 
 // #docregion bootstrap
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { enableProdMode } from '@angular/core';
-import { environment } from './environments/environment';
-import { AppModule } from './app/';
 
-if (environment.production) {
-  enableProdMode();
-}
+import { AppModule } from './app.module';
 
 platformBrowserDynamic().bootstrapModule(AppModule);
 // #enddocregion bootstrap
 
 // #docregion bootstrap-i18n
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { enableProdMode, TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';
-import { environment } from './environments/environment';
-import { AppModule } from './app/';
-import { TRANSLATION } from './i18n/messages.fr';
+import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';
 
-if (environment.production) {
-  enableProdMode();
-}
+import { AppModule } from './app.module';
+import { TRANSLATION } from './i18n/messages.fr';
 
 // Compile using french translations
 platformBrowserDynamic().bootstrapModule(
@@ -119,7 +96,6 @@ platformBrowserDynamic().bootstrapModule(
 );
 // #enddocregion bootstrap-i18n
 
-
 // #docregion messages-ts
 export const TRANSLATION = `<?xml version="1.0" encoding="UTF-8"?>
   <xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">

public/docs/ts/latest/guide/_data.json

@@ -105,6 +105,11 @@
     "intro": "Talk to a remote server with an HTTP Client."
   },
 
+  "i18n": {
+    "title": "Internationalization (i18n)",
+    "intro": "Easily translate your website into multiple languages"
+  },
+
   "lifecycle-hooks": {
     "title": "Lifecycle Hooks",
     "intro": "Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them."
@@ -153,10 +158,5 @@
   "webpack": {
     "title": "Webpack: an introduction",
     "intro": "Create your Angular 2 applications with a Webpack based tooling"
-  },
-
-  "i18n": {
-    "title": "Internationalization (i18n)",
-    "intro": "Easily translate your website into multiple languages"
   }
 }

public/docs/ts/latest/guide/i18n.jade

@@ -91,7 +91,7 @@ a(id="i18n-directive")
 :marked
   ### i18n directive
 
-  The i18n directive is what tells Angular where it should inject the translations.
+  The `i18n` directive is what tells Angular where it should inject the translations.
   It is used by both the JiT and the AoT approaches.
 
   We simply add the attribute `i18n` to an element and the content string will be replaced when necessary.
@@ -128,7 +128,7 @@ a(id="i18n-plural-pipe")
 
 .alert.is-important
   :marked
-    The plural pipe is not yet supported by the ng-xi18n messages extractor. 
+    The ng-xi18n messages extractor doesn't support the plural pipe right now.
 
 
 a(id="i18n-select-pipe")
@@ -144,7 +144,7 @@ a(id="i18n-select-pipe")
 +makeExample('i18n/ts-snippets/i18n.config.snippets.ts', 'i18n-select-pipe')(format=".")
 .alert.is-important
   :marked
-    The select pipe is not yet supported by the ng-xi18n messages extractor.
+    The ng-xi18n messages extractor doesn't support the select pipe right now.
 
 
 a(id="extract")
@@ -163,14 +163,15 @@ a(id="ng-xi18n")
   To use it, the first thing that we have to do is to install it:
 
 code-example(language="sh").
-  npm install @angular/compiler-cli --save
+  npm install @angular/compiler-cli @angular/platform-server [email protected] --save
 
 :marked
-  Like `ngc`, `ng-xi18n` is based on `tsc`, the TypeScript compiler. It uses the file `tsconfig.json` to determine where
-  are our files. We have to make sure that we have defined the parameter `files` so that it knows what is the entry point
-  of our application.
+  Like `ngc`, `ng-xi18n` is based on `tsc`, the TypeScript compiler.
 
-+makeExample('i18n/ts-snippets/i18n.config.snippets.ts', 'tsconfig1')(format=".")
+  Let's edit our `tsconfig.json` file and add the `angularCompilerOptions` with `genDir` pointing to the folder where we
+  want `ng-xi18n` to generate the file.
+
++makeExample('i18n/ts-snippets/i18n.config.snippets.ts', 'tsconfig')(format=".")
 
 :marked
   We can then use the `ng-xi18n` binary to generate a file named `messages.xlf` at the root of our application.
@@ -187,11 +188,6 @@ code-example(language="sh").
 
 :marked
   If we want to generate this `messages.xlf` file somewhere in particular, `ng-xi18n` uses the same parameters as `ngc`.
-  
-  Let's edit our `tsconfig.json` file and add the `angularCompilerOptions` with `genDir` pointing to the folder where we
-  want `ng-xi18n` to generate the file.
-
-+makeExample('i18n/ts-snippets/i18n.config.snippets.ts', 'tsconfig2')(format=".")
 
 :marked
   The generated `messages.xlf` file uses by default the format `XML Localisation Interchange File Format` (XLIFF, version 1.2).
@@ -225,7 +221,7 @@ a(id="translate")
 
 .alert.is-helpful
   :marked
-    Using a versionning system such as `GIT` can help us find out easily what new translations have been generated by
+    Using a versioning system such as `GIT` can help us find out easily what new translations have been generated by
     the messages extractor.
 
 a(id="use-jit")
@@ -238,7 +234,7 @@ a(id="use-jit")
   Angular 2 understand `xlf` and `xmb` formats, but we have to provide these message into our application.
   To do that we will have to define a few providers at bootstrap time.
 
-  Let's say that we have the following bootstrap file:
+  Having the following bootstrap file:
 
 +makeExample('i18n/ts-snippets/i18n.config.snippets.ts', 'bootstrap')(format=".")
 
@@ -291,7 +287,7 @@ a(id="use-aot")
   If we want to generate precompiled files for our french translations, we will use:
 
 code-example(language="sh").
-  ngc --i18nFile=./src/i18n/messages.fr.xlf --locale=fr --i18nFormat=xlf
+  ngc --i18nFile=./app/i18n/messages.fr.xlf --locale=fr --i18nFormat=xlf
 
 .alert.is-helpful
   :marked