diff --git a/aio/content/examples/.DS_Store b/aio/content/examples/.DS_Store
deleted file mode 100644
index 55dd692a1c..0000000000
Binary files a/aio/content/examples/.DS_Store and /dev/null differ
diff --git a/aio/content/guide/i18n.md b/aio/content/guide/i18n.md
index 2915bf727a..4a481d8131 100644
--- a/aio/content/guide/i18n.md
+++ b/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
-of the locale id that you want to use:
+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:
- ng serve --aot --locale fr
+ ng serve --configuration=fr
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:
-ng xi18n --i18nFormat=xlf
-ng xi18n --i18nFormat=xlf2
-ng xi18n --i18nFormat=xmb
+ng xi18n --i18n-format=xlf
+ng xi18n --i18n-format=xlf2
+ng xi18n --i18n-format=xmb
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`:
- ng xi18n --outputPath src/locale
+ ng xi18n --output-path locale
@@ -455,15 +454,15 @@ the parameter `--outFile`:
- ng xi18n --outFile source.xlf
+ ng xi18n --out-file source.xlf
-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`:
- ng xi18n --locale fr
+ ng xi18n --i18n-locale fr
@@ -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
-options with the `ng serve` or `ng build` commands:
+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.
-* `--i18nFile`: the path to the translation file.
-* `--i18nFormat`: the format of the translation file.
-* `--locale`: the locale id.
+* `i18nFile`: the path to the translation file.
+* `i18nFormat`: the format of the translation file.
+* `i18nLocale`: the locale id.
-The example below shows how to serve the French language file created in previous sections of this
-guide:
+
+"configurations": {
+ ...
+ "fr": {
+ "aot": true,
+ "outputPath": "dist/my-project-fr/",
+ "i18nFile": "src/locale/messages.fr.xlf",
+ "i18nFormat": "xlf",
+ "i18nLocale": "fr",
+ ...
+ }
+}
+
+
+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:
- ng serve --aot --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr
+ ng serve --configuration=fr
+
+
+For production builds, you define a separate `production-fr` build configuration in your `angular.json`.
+
+
+"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"
+ },
+ ...
+}
+
+
+The same configuration options can also be provided through the CLI with your existing `production` configuration.
+
+
+ ng build --prod --i18n-file src/locale/messages.fr.xlf --i18n-format xlf --i18n-locale fr
{@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
-`--missingTranslation`. The example below shows how to set the warning level to error:
+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:
-
- ng serve --aot --missingTranslation=error
+
+"configurations": {
+ ...
+ "fr": {
+ ...
+ "i18nMissingTranslation": "error"
+ }
+}
If you use the JIT compiler, specify the warning level in the compiler config at bootstrap by adding
diff --git a/aio/tools/example-zipper/customizer/package-json/i18n.json b/aio/tools/example-zipper/customizer/package-json/i18n.json
index deb97a37b6..d257e96c1d 100644
--- a/aio/tools/example-zipper/customizer/package-json/i18n.json
+++ b/aio/tools/example-zipper/customizer/package-json/i18n.json
@@ -1,17 +1,18 @@
{
"scripts": [
- { "name": "start", "command": "ng serve --aot" },
- { "name": "start:fr", "command": "ng serve --aot --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr" },
+ { "name": "start", "command": "ng serve" },
+ { "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": "extract", "command": "ng xi18n --outputPath=src/locale" }
+ { "name": "e2e", "command": "ng e2e" },
+ { "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",
diff --git a/aio/tools/examples/example-boilerplate.js b/aio/tools/examples/example-boilerplate.js
index 1d5026196a..4f4c7bedf3 100644
--- a/aio/tools/examples/example-boilerplate.js
+++ b/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';
diff --git a/aio/tools/examples/example-boilerplate.spec.js b/aio/tools/examples/example-boilerplate.spec.js
index dbf9820724..91cfd6b044 100644
--- a/aio/tools/examples/example-boilerplate.spec.js
+++ b/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
diff --git a/aio/tools/examples/shared/boilerplate/i18n/angular.json b/aio/tools/examples/shared/boilerplate/i18n/angular.json
new file mode 100644
index 0000000000..00ec0bccd1
--- /dev/null
+++ b/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/**"
+ ]
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/aio/tools/examples/shared/boilerplate/i18n/package.json b/aio/tools/examples/shared/boilerplate/i18n/package.json
index 74ab803af8..7870cc9daa 100644
--- a/aio/tools/examples/shared/boilerplate/i18n/package.json
+++ b/aio/tools/examples/shared/boilerplate/i18n/package.json
@@ -4,49 +4,51 @@
"license": "MIT",
"scripts": {
"ng": "ng",
- "start": "ng serve --aot",
- "start:fr": "ng serve --aot --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr",
+ "start": "ng serve",
+ "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",
- "extract": "ng xi18n --outputPath=src/locale"
+ "e2e": "ng e2e",
+ "extract": "ng xi18n --output-path=locale"
},
"private": true,
"dependencies": {
- "@angular/animations": "^5.0.0",
- "@angular/common": "^5.0.0",
- "@angular/compiler": "^5.0.0",
- "@angular/core": "^5.0.0",
- "@angular/forms": "^5.0.0",
- "@angular/http": "^5.0.0",
- "@angular/platform-browser": "^5.0.0",
- "@angular/platform-browser-dynamic": "^5.0.0",
- "@angular/router": "^5.0.0",
- "core-js": "^2.4.1",
- "rxjs": "^5.5.2",
- "zone.js": "^0.8.14"
+ "@angular/animations": "^6.0.0-rc.5",
+ "@angular/common": "^6.0.0-rc.5",
+ "@angular/compiler": "^6.0.0-rc.5",
+ "@angular/core": "^6.0.0-rc.5",
+ "@angular/forms": "^6.0.0-rc.5",
+ "@angular/http": "^6.0.0-rc.5",
+ "@angular/platform-browser": "^6.0.0-rc.5",
+ "@angular/platform-browser-dynamic": "^6.0.0-rc.5",
+ "@angular/router": "^6.0.0-rc.5",
+ "core-js": "^2.5.4",
+ "rxjs": "6.0.0-uncanny-rc.7",
+ "zone.js": "^0.8.24"
},
"devDependencies": {
- "@angular/cli": "1.5.0",
- "@angular/compiler-cli": "^5.0.0",
- "@angular/language-service": "^5.0.0",
- "@types/jasmine": "~2.8.0",
- "@types/jasminewd2": "~2.0.2",
- "@types/node": "~6.0.60",
- "codelyzer": "~3.2.0",
- "jasmine-core": "~2.8.0",
- "jasmine-spec-reporter": "~4.1.0",
- "karma": "~1.7.0",
- "karma-chrome-launcher": "~2.1.1",
- "karma-cli": "~1.0.1",
- "karma-coverage-istanbul-reporter": "^1.2.1",
- "karma-jasmine": "~1.1.0",
+ "@angular/compiler-cli": "^6.0.0-rc.5",
+ "@angular-devkit/build-angular": "~0.5.0",
+ "@angular/cli": "~6.0.0-rc.4",
+ "@angular/language-service": "^6.0.0-rc.5",
+ "@angular/platform-server": "^6.0.0-rc.5",
+ "@types/jasmine": "~2.8.6",
+ "@types/jasminewd2": "~2.0.3",
+ "@types/node": "~8.9.4",
+ "codelyzer": "~4.2.1",
+ "jasmine-core": "~2.99.1",
+ "jasmine-marbles": "^0.3.1",
+ "jasmine-spec-reporter": "~4.2.1",
+ "karma": "~2.0.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",
- "ts-node": "~3.2.0",
- "tslint": "~5.7.0",
- "typescript": "~2.4.2"
+ "protractor": "~5.3.0",
+ "ts-node": "~5.0.1",
+ "tslint": "~5.9.1",
+ "typescript": "~2.7.2"
}
}
diff --git a/aio/tools/examples/shared/boilerplate/testing/.angular-cli.json b/aio/tools/examples/shared/boilerplate/testing/.angular-cli.json
deleted file mode 100644
index 8e9fd66a57..0000000000
--- a/aio/tools/examples/shared/boilerplate/testing/.angular-cli.json
+++ /dev/null
@@ -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": {}
- }
-}
diff --git a/aio/tools/examples/shared/boilerplate/testing/angular.json b/aio/tools/examples/shared/boilerplate/testing/angular.json
new file mode 100644
index 0000000000..9aaab56b56
--- /dev/null
+++ b/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/**"
+ ]
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file