docs(aio): Update i18n example to Angular V6 (#23660)

PR Close #23660

aio/content/guide/i18n.md

@@ -42,11 +42,10 @@ locale id to find the correct corresponding locale data.
 
 By default, Angular uses the locale `en-US`, which is English as spoken in the United States of America.
 
-To set your app's locale to another value, use the CLI parameter `--locale` with the value
+To set your app's locale to another value, use the CLI parameter `--configuration` with the value of the locale id that you want to use:
-of the locale id that you want to use:
 
 <code-example language="sh" class="code-shell">
-  ng serve --aot --locale fr
+  ng serve --configuration=fr
 </code-example>
 
 If you use JIT, you also need to define the `LOCALE_ID` provider in your main module:
@@ -86,7 +85,7 @@ and `PercentPipe` use locale data to format data based on the `LOCALE_ID`.
 
 By default, Angular only contains locale data for `en-US`. If you set the value of
 `LOCALE_ID` to another locale, you must import locale data for that new locale.
-The CLI imports the locale data for you when you use the parameter `--locale` with `ng serve` and
+The CLI imports the locale data for you when you use the parameter `--configuration` with `ng serve` and
 `ng build`.
 
 If you want to import locale data for other languages, you can do it manually:
@@ -424,9 +423,9 @@ You can specify the translation format explicitly with the `--i18nFormat` flag a
 these example commands:
 
 <code-example language="sh" class="code-shell">
-ng xi18n  --i18nFormat=xlf
+ng xi18n  --i18n-format=xlf
-ng xi18n  --i18nFormat=xlf2
+ng xi18n  --i18n-format=xlf2
-ng xi18n  --i18nFormat=xmb
+ng xi18n  --i18n-format=xmb
 </code-example>
 
 The sample in this guide uses the default XLIFF 1.2 format.
@@ -442,11 +441,11 @@ The sample in this guide uses the default XLIFF 1.2 format.
 ### Other options
 
 You can specify the output path used by the CLI to extract your translation source file with
-the parameter `--outputPath`:
+the parameter `--output-path`:
 
 <code-example language="sh" class="code-shell">
 
-  ng xi18n --outputPath src/locale
+  ng xi18n --output-path locale
 
 </code-example>
 
@@ -455,15 +454,15 @@ the parameter `--outFile`:
 
 <code-example language="sh" class="code-shell">
 
-  ng xi18n --outFile source.xlf
+  ng xi18n --out-file source.xlf
 
 </code-example>
 
-You can specify the base locale of your app with the parameter `--locale`:
+You can specify the base locale of your app with the parameter `--i18n-locale`:
 
 <code-example language="sh" class="code-shell">
 
-  ng xi18n --locale fr
+  ng xi18n --i18n-locale fr
 
 </code-example>
 
@@ -663,7 +662,7 @@ format that Angular understands, such as `.xtb`.
 How you provide this information depends upon whether you compile with
 the JIT compiler or the AOT compiler.
 
-  * With [AOT](guide/i18n#merge-aot), you pass the information as a CLI parameter.
+  * With [AOT](guide/i18n#merge-aot), you pass the information as a configuration
   * With [JIT](guide/i18n#merge-jit), you provide the information at bootstrap time.
 
 
@@ -677,18 +676,67 @@ When you internationalize with the AOT compiler, you must pre-build a separate a
 package for each language and serve the appropriate package based on either server-side language
 detection or url parameters.
 
-You also need to instruct the AOT compiler to use your translation file. To do so, you use three
+You also need to instruct the AOT compiler to use your translation configuration. To do so, you configure the translation with three options in your `angular.json` file.
-options with the `ng serve` or `ng build` commands:
 
-* `--i18nFile`: the path to the translation file.
+* `i18nFile`: the path to the translation file.
-* `--i18nFormat`: the format of the translation file.
+* `i18nFormat`: the format of the translation file.
-* `--locale`: the locale id.
+* `i18nLocale`: the locale id.
 
-The example below shows how to serve the French language file created in previous sections of this
+<code-example format="." language="ts">
-guide:
+"configurations": {
+  ...
+  "fr": {
+    "aot": true,
+    "outputPath": "dist/my-project-fr/",
+    "i18nFile": "src/locale/messages.fr.xlf",
+    "i18nFormat": "xlf",
+    "i18nLocale": "fr",
+    ...
+  }
+}
+</code-example>
+
+You then pass the configuration with the `ng serve` or `ng build` commands. The example below shows how to serve the French language file created in previous sections of this guide:
 
 <code-example language="sh" class="code-shell">
-  ng serve --aot --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr
+  ng serve --configuration=fr
+</code-example>
+
+For production builds, you define a separate `production-fr` build configuration in your `angular.json`.
+
+<code-example format="." language="ts">
+"configurations": {
+  ...
+  "production-fr": {
+    "fileReplacements": [
+      {
+        "replace": "src/environments/environment.ts",
+        "with": "src/environments/environment.prod.ts"
+      }
+    ],
+    "optimization": true,
+    "outputHashing": "all",
+    "sourceMap": false,
+    "extractCss": true,
+    "namedChunks": false,
+    "aot": true,
+    "extractLicenses": true,
+    "vendorChunk": false,
+    "buildOptimizer": true,
+    "outputPath": "dist/my-project-fr/",
+    "i18nFile": "src/locale/messages.fr.xlf",
+    "i18nFormat": "xlf",
+    "i18nLocale": "fr",
+    "i18nMissingTranslation": "error"
+  },
+  ...
+}
+</code-example>
+
+The same configuration options can also be provided through the CLI with your existing `production` configuration.
+
+<code-example language="sh" class="code-shell">
+  ng build --prod --i18n-file src/locale/messages.fr.xlf --i18n-format xlf --i18n-locale fr
 </code-example>
 
 {@a merge-jit}
@@ -731,11 +779,16 @@ compilation, the app will fail to load.
 * Warning (default): show a 'Missing translation' warning in the console or shell.
 * Ignore: do nothing.
 
-If you use the AOT compiler, specify the warning level by using the CLI parameter
+You specify the warning level in the `configurations` section your Angular CLI build configuration. The example below shows how to set the warning level to error:
-`--missingTranslation`. The example below shows how to set the warning level to error:
 
-<code-example language="sh" class="code-shell">
+<code-example format="." language="ts">
-  ng serve --aot --missingTranslation=error
+"configurations": {
+  ...
+  "fr": {
+    ...
+    "i18nMissingTranslation": "error"
+  }
+}
 </code-example>
 
 If you use the JIT compiler, specify the warning level in the compiler config at bootstrap by adding

aio/tools/example-zipper/customizer/package-json/i18n.json

@@ -1,17 +1,18 @@
 {
   "scripts": [
-    { "name": "start", "command": "ng serve --aot" },
+    { "name": "start", "command": "ng serve" },
-    { "name": "start:fr", "command": "ng serve --aot --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr" },
+    { "name": "start:fr", "command": "ng serve --configuration=fr" },
     { "name": "build", "command": "ng build --prod" },
-    { "name": "build:fr", "command": "ng build --prod --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr" },
+    { "name": "build:fr", "command": "ng build --configuration=production-fr" },
     { "name": "test", "command": "ng test" },
     { "name": "lint", "command": "ng lint" },
-    { "name": "e2e", "command": "ng e2e --aot --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr" },
+    { "name": "e2e", "command": "ng e2e" },
-    { "name": "extract", "command": "ng xi18n --outputPath=src/locale" }
+    { "name": "extract", "command": "ng xi18n --output-path=locale" }
   ],
   "dependencies": [],
   "devDependencies": [
     "@angular/cli",
+    "@angular-devkit/build-angular",
     "@types/jasminewd2",
     "jasmine-spec-reporter",
     "karma-coverage-istanbul-reporter",

aio/tools/examples/example-boilerplate.js

@@ -52,6 +52,7 @@ const cliRelativePath = BOILERPLATE_PATHS.cli.map(file => `../cli/${file}`);
 
 BOILERPLATE_PATHS.i18n = [
   ...cliRelativePath,
+  'angular.json',
   'package.json'
 ];
 
@@ -63,7 +64,7 @@ BOILERPLATE_PATHS.universal = [
 
 BOILERPLATE_PATHS.testing = [
   ...cliRelativePath,
-  '.angular-cli.json'
+  'angular.json'
 ];
 
 const EXAMPLE_CONFIG_FILENAME = 'example-config.json';

aio/tools/examples/example-boilerplate.spec.js

@@ -11,7 +11,7 @@ describe('example-boilerplate tool', () => {
     const sharedNodeModulesDir = path.resolve(sharedDir, 'node_modules');
     const BPFiles = {
       cli: 19,
-      i18n: 1,
+      i18n: 2,
       universal: 2,
       systemjs: 7,
       common: 1

aio/tools/examples/shared/boilerplate/i18n/angular.json

@@ -0,0 +1,172 @@
+{
+  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular.io-example": {
+      "root": "",
+      "projectType": "application",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/angular.io-example",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "favicon.ico",
+                "input": "src",
+                "output": "/"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "/assets"
+              }
+            ],
+            "styles": [
+              {
+                "input": "src/styles.css"
+              }
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            },
+            "production-fr": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "outputPath": "dist/my-project-fr/",
+              "i18nFile": "src/locale/messages.fr.xlf",
+              "i18nFormat": "xlf",
+              "i18nLocale": "fr",
+              "i18nMissingTranslation": "error"
+            },
+            "fr": {
+              "aot": true,
+              "outputPath": "dist/my-project-fr/",
+              "i18nFile": "src/locale/messages.fr.xlf",
+              "i18nFormat": "xlf",
+              "i18nLocale": "fr",
+              "i18nMissingTranslation": "error"
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "angular.io-example:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular.io-example:build:production"
+            },
+            "fr": {
+              "browserTarget": "angular.io-example:build:fr"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "angular.io-example:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "src/karma.conf.js",
+            "styles": [
+              {
+                "input": "styles.css"
+              }
+            ],
+            "scripts": [],
+            "assets": [
+              {
+                "glob": "favicon.ico",
+                "input": "src/",
+                "output": "/"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "/assets"
+              }
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "angular.io-example-e2e": {
+      "root": "e2e/",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "angular.io-example:serve:fr"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": "e2e/tsconfig.e2e.json",
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  }
+}

aio/tools/examples/shared/boilerplate/i18n/package.json

@@ -4,49 +4,51 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --aot",
+    "start": "ng serve",
-    "start:fr": "ng serve --aot --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr",
+    "start:fr": "ng serve --configuration=fr",
     "build": "ng build --prod",
-    "build:fr": "ng build --prod --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr",
+    "build:fr": "ng build --configuration=production-fr",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e --aot --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr",
+    "e2e": "ng e2e",
-    "extract": "ng xi18n --outputPath=src/locale"
+    "extract": "ng xi18n --output-path=locale"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.0.0",
+    "@angular/animations": "^6.0.0-rc.5",
-    "@angular/common": "^5.0.0",
+    "@angular/common": "^6.0.0-rc.5",
-    "@angular/compiler": "^5.0.0",
+    "@angular/compiler": "^6.0.0-rc.5",
-    "@angular/core": "^5.0.0",
+    "@angular/core": "^6.0.0-rc.5",
-    "@angular/forms": "^5.0.0",
+    "@angular/forms": "^6.0.0-rc.5",
-    "@angular/http": "^5.0.0",
+    "@angular/http": "^6.0.0-rc.5",
-    "@angular/platform-browser": "^5.0.0",
+    "@angular/platform-browser": "^6.0.0-rc.5",
-    "@angular/platform-browser-dynamic": "^5.0.0",
+    "@angular/platform-browser-dynamic": "^6.0.0-rc.5",
-    "@angular/router": "^5.0.0",
+    "@angular/router": "^6.0.0-rc.5",
-    "core-js": "^2.4.1",
+    "core-js": "^2.5.4",
-    "rxjs": "^5.5.2",
+    "rxjs": "6.0.0-uncanny-rc.7",
-    "zone.js": "^0.8.14"
+    "zone.js": "^0.8.24"
   },
   "devDependencies": {
-    "@angular/cli": "1.5.0",
+    "@angular/compiler-cli": "^6.0.0-rc.5",
-    "@angular/compiler-cli": "^5.0.0",
+    "@angular-devkit/build-angular": "~0.5.0",
-    "@angular/language-service": "^5.0.0",
+    "@angular/cli": "~6.0.0-rc.4",
-    "@types/jasmine": "~2.8.0",
+    "@angular/language-service": "^6.0.0-rc.5",
-    "@types/jasminewd2": "~2.0.2",
+    "@angular/platform-server": "^6.0.0-rc.5",
-    "@types/node": "~6.0.60",
+    "@types/jasmine": "~2.8.6",
-    "codelyzer": "~3.2.0",
+    "@types/jasminewd2": "~2.0.3",
-    "jasmine-core": "~2.8.0",
+    "@types/node": "~8.9.4",
-    "jasmine-spec-reporter": "~4.1.0",
+    "codelyzer": "~4.2.1",
-    "karma": "~1.7.0",
+    "jasmine-core": "~2.99.1",
-    "karma-chrome-launcher": "~2.1.1",
+    "jasmine-marbles": "^0.3.1",
-    "karma-cli": "~1.0.1",
+    "jasmine-spec-reporter": "~4.2.1",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma": "~2.0.0",
-    "karma-jasmine": "~1.1.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~1.4.2",
+    "karma-jasmine": "~1.1.1",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.1.2",
+    "protractor": "~5.3.0",
-    "ts-node": "~3.2.0",
+    "ts-node": "~5.0.1",
-    "tslint": "~5.7.0",
+    "tslint": "~5.9.1",
-    "typescript": "~2.4.2"
+    "typescript": "~2.7.2"
   }
 }

aio/tools/examples/shared/boilerplate/testing/.angular-cli.json

@@ -1,61 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "angular.io-example"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "test.css",
-        "styles.css"
-      ],
-      "scripts": [],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "project": "src/tsconfig.app.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "src/tsconfig.spec.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json",
-      "exclude": "**/node_modules/**"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "css",
-    "component": {}
-  }
-}

aio/tools/examples/shared/boilerplate/testing/angular.json

@@ -0,0 +1,142 @@
+{
+  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular.io-example": {
+      "root": "",
+      "projectType": "application",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/angular.io-example",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "favicon.ico",
+                "input": "src",
+                "output": "/"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "/assets"
+              }
+            ],
+            "styles": [
+              {
+                "input": "src/styles.css"
+              },
+              {
+                "input": "src/test.css"
+              }
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "angular.io-example:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular.io-example:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "angular.io-example:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "src/karma.conf.js",
+            "styles": [
+              {
+                "input": "styles.css"
+              }
+            ],
+            "scripts": [],
+            "assets": [
+              {
+                "glob": "favicon.ico",
+                "input": "src/",
+                "output": "/"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "/assets"
+              }
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "angular.io-example-e2e": {
+      "root": "e2e/",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "angular.io-example:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": "e2e/tsconfig.e2e.json",
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  }
+}