- * The `postinstall` script will run on every installation of `node_modules`, including those performed by `ng update` and `ng add`.
- * Don't use `--create-ivy-entry-points` as this will cause Node not to resolve the Ivy version of the packages correctly.
-
+* The `postinstall` script will run on every installation of `node_modules`, including those performed by `ng update` and `ng add`.
+* Don't use `--create-ivy-entry-points` as this will cause Node not to resolve the Ivy version of the packages correctly.
+
{@a opting-out-of-angular-ivy}
+
## Opting out of Ivy in version 9
In version 9, Ivy is the default.
@@ -93,6 +100,7 @@ The value of the `enableIvy` flag is set to `true` by default, as of version 9.
The following example shows how to set the `enableIvy` option to `false` in order to opt out of Ivy.
@@ -125,23 +134,27 @@ If you disable Ivy and the project uses internationalization, you can also remov
To remove, delete the `import '@angular/localize/init';` line from the polyfills file.
+
/***************************************************************************************************
* Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
*/
import '@angular/localize/init';
+
{@a using-ssr-without-angular-ivy}
+
### Using SSR without Ivy
-If you opt out of Ivy and your application uses [Angular Universal](guide/universal) to render Angular applications on the server, you must also change the way the server performs bootstrapping.
+If you opt out of Ivy and your application uses [Angular Universal](guide/universal) to render Angular applications on the server, you must also change the way the server performs bootstrapping.
The following example shows how you modify the `server.ts` file to provide the `AppServerModuleNgFactory` as the bootstrap module.
-* Import `AppServerModuleNgFactory` from the `app.server.module.ngfactory` virtual file.
-* Set `bootstrap: AppServerModuleNgFactory` in the `ngExpressEngine` call.
+* Import `AppServerModuleNgFactory` from the `app.server.module.ngfactory` virtual file.
+* Set `bootstrap: AppServerModuleNgFactory` in the `ngExpressEngine` call.
+
import 'zone.js/node';
import { ngExpressEngine } from '@nguniversal/express-engine';
@@ -156,33 +169,33 @@ import { AppServerModuleNgFactory } from './src/app/app.server.module.ngfactory'
export function app() {
const server = express();
const distFolder = join(process.cwd(), 'dist/ivy-test/browser');
-
+
// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
server.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
}));
-
+
server.set('view engine', 'html');
server.set('views', distFolder);
-
+
// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));
-
+
// All regular routes use the Universal engine
server.get('*', (req, res) => {
res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});
-
+
return server;
}
function run() {
const port = process.env.PORT || 4000;
-
+
// Start up the Node server
const server = app();
server.listen(port, () => {
@@ -200,4 +213,13 @@ if (mainModule && mainModule.filename === __filename) {
}
export * from './src/main.server';
+
+
+
+
+[AioGuideI18nCommonMerge]: guide/i18n-common-merge "Common Internationalization task #6: Merge translations into the application | Angular"
+
+
+
+@reviewed 2021-09-02
diff --git a/aio/content/guide/pipes.md b/aio/content/guide/pipes.md
index 6414baf01a4..cf8d25640d2 100644
--- a/aio/content/guide/pipes.md
+++ b/aio/content/guide/pipes.md
@@ -6,24 +6,24 @@ For example, you would use a pipe to show a date as **April 15, 1988** rather th
- For the sample application used in this topic, see the .
+For the sample application used in this topic, see the .
Angular provides built-in pipes for typical data transformations, including transformations for internationalization (i18n), which use locale information to format data.
The following are commonly used built-in pipes for data formatting:
-* [`DatePipe`](api/common/DatePipe): Formats a date value according to locale rules.
-* [`UpperCasePipe`](api/common/UpperCasePipe): Transforms text to all upper case.
-* [`LowerCasePipe`](api/common/LowerCasePipe): Transforms text to all lower case.
-* [`CurrencyPipe`](api/common/CurrencyPipe): Transforms a number to a currency string, formatted according to locale rules.
-* [`DecimalPipe`](/api/common/DecimalPipe): Transforms a number into a string with a decimal point, formatted according to locale rules.
-* [`PercentPipe`](api/common/PercentPipe): Transforms a number to a percentage string, formatted according to locale rules.
+* [`DatePipe`](api/common/DatePipe): Formats a date value according to locale rules.
+* [`UpperCasePipe`](api/common/UpperCasePipe): Transforms text to all upper case.
+* [`LowerCasePipe`](api/common/LowerCasePipe): Transforms text to all lower case.
+* [`CurrencyPipe`](api/common/CurrencyPipe): Transforms a number to a currency string, formatted according to locale rules.
+* [`DecimalPipe`](/api/common/DecimalPipe): Transforms a number into a string with a decimal point, formatted according to locale rules.
+* [`PercentPipe`](api/common/PercentPipe): Transforms a number to a percentage string, formatted according to locale rules.
-* For a complete list of built-in pipes, see the [pipes API documentation](/api/common#pipes "Pipes API reference summary").
-* To learn more about using pipes for internationalization (i18n) efforts, see [formatting data based on locale](/guide/i18n#i18n-pipes "Formatting data based on locale").
+* For a complete list of built-in pipes, see the [pipes API documentation](/api/common#pipes "Pipes API reference summary").
+* To learn more about using pipes for internationalization (i18n) efforts, see [formatting data based on locale][AioGuideI18nCommonFormatDataLocale].
@@ -33,28 +33,21 @@ Create pipes to encapsulate custom transformations and use your custom pipes in
To use pipes you should have a basic understanding of the following:
-* [Typescript](guide/glossary#typescript "Definition of Typescript") and HTML5 programming
-* [Templates](guide/glossary#template "Definition of a template") in HTML with CSS styles
-* [Components](guide/glossary#component "Definition of a component")
+* [Typescript](guide/glossary#typescript "Definition of Typescript") and HTML5 programming
+* [Templates](guide/glossary#template "Definition of a template") in HTML with CSS styles
+* [Components](guide/glossary#component "Definition of a component")
## Using a pipe in a template
To apply a pipe, use the pipe operator (`|`) within a template expression as shown in the following code example, along with the *name* of the pipe, which is `date` for the built-in [`DatePipe`](api/common/DatePipe).
The tabs in the example show the following:
-* `app.component.html` uses `date` in a separate template to display a birthday.
-* `hero-birthday1.component.ts` uses the same pipe as part of an in-line template in a component that also sets the birthday value.
+* `app.component.html` uses `date` in a separate template to display a birthday.
+* `hero-birthday1.component.ts` uses the same pipe as part of an in-line template in a component that also sets the birthday value.
-
-
-
-
+
+
The component's `birthday` value flows through the pipe operator, `|` to the [`date`](api/common/DatePipe) function.
@@ -77,27 +70,15 @@ Some pipes require at least one parameter and allow more optional parameters, su
The tabs in the following example demonstrates toggling between two different formats (`'shortDate'` and `'fullDate'`):
-* The `app.component.html` template uses a format parameter for the [`DatePipe`](api/common/DatePipe) (named `date`) to show the date as **04/15/88**.
-* The `hero-birthday2.component.ts` component binds the pipe's format parameter to the component's `format` property in the `template` section, and adds a button for a click event bound to the component's `toggleFormat()` method.
-* The `hero-birthday2.component.ts` component's `toggleFormat()` method toggles the component's `format` property between a short form
+* The `app.component.html` template uses a format parameter for the [`DatePipe`](api/common/DatePipe) (named `date`) to show the date as **04/15/88**.
+* The `hero-birthday2.component.ts` component binds the pipe's format parameter to the component's `format` property in the `template` section, and adds a button for a click event bound to the component's `toggleFormat()` method.
+* The `hero-birthday2.component.ts` component's `toggleFormat()` method toggles the component's `format` property between a short form
(`'shortDate'`) and a longer form (`'fullDate'`).
-
-
-
-
-
-
+
+
+
Clicking the **Toggle Format** button alternates the date format between **04/15/1988** and **Friday, April 15, 1988**.
@@ -117,16 +98,8 @@ The first tab for the `src/app/app.component.html` template chains `DatePipe` an
The second tab for the `src/app/app.component.html` template passes the `fullDate` parameter to `date` before chaining to `uppercase`, which produces **FRIDAY, APRIL 15, 1988**.
-
-
-
-
+
+
{@a Custom-pipes}
@@ -147,8 +120,8 @@ Use `name` in template expressions as you would for a built-in pipe.
-* Include your pipe in the `declarations` field of the `NgModule` metadata in order for it to be available to a template. See the `app.module.ts` file in the example application (). For details, see [NgModules](guide/ngmodules "NgModules introduction").
-* Register your custom pipes. The [Angular CLI](cli "CLI Overview and Command Reference") [`ng generate pipe`](cli/generate#pipe "ng generate pipe in the CLI Command Reference") command registers the pipe automatically.
+* Include your pipe in the `declarations` field of the `NgModule` metadata in order for it to be available to a template. See the `app.module.ts` file in the example application (). For details, see [NgModules](guide/ngmodules "NgModules introduction").
+* Register your custom pipes. The [Angular CLI](cli "CLI Overview and Command Reference") [`ng generate pipe`](cli/generate#pipe "ng generate pipe in the CLI Command Reference") command registers the pipe automatically.
@@ -166,20 +139,13 @@ Use a custom pipe for this transformation.
The following code example shows two component definitions:
-* The `exponential-strength.pipe.ts` component defines a custom pipe named `exponentialStrength` with the `transform` method that performs the transformation.
-It defines an argument to the `transform` method (`exponent`) for a parameter passed to the pipe.
-
-* The `power-booster.component.ts` component demonstrates how to use the pipe, specifying a value (`2`) and the exponent parameter (`10`).
+* The `exponential-strength.pipe.ts` component defines a custom pipe named `exponentialStrength` with the `transform` method that performs the transformation.
+ It defines an argument to the `transform` method (`exponent`) for a parameter passed to the pipe.
+* The `power-booster.component.ts` component demonstrates how to use the pipe, specifying a value (`2`) and the exponent parameter (`10`).
-
-
-
-
+
+
The browser displays the following:
@@ -207,9 +173,7 @@ If the data is a primitive input value, such as `String` or `Number`, or an obje
For example, you could change the previous custom pipe example to use two-way data binding with `ngModel` to input the amount and boost factor, as shown in the following code example.
-
-
-
+
The `exponentialStrength` pipe executes every time the user changes the "normal power" value or the "boost factor".
@@ -223,20 +187,12 @@ Angular looks for changes to data-bound values in a [change detection](guide/glo
The following example, which doesn't use a pipe, demonstrates how Angular uses its default change detection strategy to monitor and update its display of every hero in the `heroes` array.
The example tabs show the following:
-* In the `flying-heroes.component.html (v1)` template, the `*ngFor` repeater displays the hero names.
-* Its companion component class `flying-heroes.component.ts (v1)` provides heroes, adds heroes into the array, and resets the array.
+* In the `flying-heroes.component.html (v1)` template, the `*ngFor` repeater displays the hero names.
+* Its companion component class `flying-heroes.component.ts (v1)` provides heroes, adds heroes into the array, and resets the array.
-
-
-
-
+
+
Angular updates the display every time the user adds a hero.
@@ -266,20 +222,12 @@ To demonstrate this issue, change the previous example to filter the list of her
Use the `FlyingHeroesPipe` in the `*ngFor` repeater as shown in the following code.
The tabs for the example show the following:
-* The template (`flying-heroes.component.html (flyers)`) with the new pipe.
-* The `FlyingHeroesPipe` custom pipe implementation (`flying-heroes.pipe.ts`).
+* The template (`flying-heroes.component.html (flyers)`) with the new pipe.
+* The `FlyingHeroesPipe` custom pipe implementation (`flying-heroes.pipe.ts`).
-
-
-
-
+
+
The application now shows unexpected behavior: When the user adds flying heroes, none of them appear under "Heroes who fly."
@@ -324,16 +272,8 @@ The following code shows the complete implementation of `FlyingHeroesImpurePipe`
The example shows that you don't have to change anything else—the only difference is setting the `pure` flag as `false` in the pipe metadata.
-
-
-
-
+
+
`FlyingHeroesImpurePipe` is a good candidate for an impure pipe because the `transform` function is trivial and fast:
@@ -347,7 +287,7 @@ As shown in the following code, only the pipe in the template changes.
- To confirm that the display updates as the user adds heroes, see the .
+To confirm that the display updates as the user adds heroes, see the .
@@ -371,9 +311,7 @@ Without this pipe, your component code would have to subscribe to the observable
The following code example binds an observable of message strings
(`message$`) to a view with the `async` pipe.
-
-
-
+
{@a no-filter-pipe}
@@ -389,24 +327,18 @@ Impure pipes are called whenever change detection runs for a component, which co
To avoid performance problems, call the server only when the requested URL changes, as shown in the following example, and use the pipe to cache the server response.
The tabs show the following:
-* The `fetch` pipe (`fetch-json.pipe.ts`).
-* A harness component (`hero-list.component.ts`) for demonstrating the request, using a template that defines two bindings to the pipe requesting the heroes from the `heroes.json` file. The second binding chains the `fetch` pipe with the built-in `JsonPipe` to display the same hero data in JSON format.
+* The `fetch` pipe (`fetch-json.pipe.ts`).
+* A harness component (`hero-list.component.ts`) for demonstrating the request, using a template that defines two bindings to the pipe requesting the heroes from the `heroes.json` file. The second binding chains the `fetch` pipe with the built-in `JsonPipe` to display the same hero data in JSON format.
-
-
-
-
+
+
In the preceding example, a breakpoint on the pipe's request for data shows the following:
-* Each binding gets its own pipe instance.
-* Each pipe instance caches its own URL and data and calls the server only once.
+* Each binding gets its own pipe instance.
+* Each pipe instance caches its own URL and data and calls the server only once.
The `fetch` and `fetch-json` pipes display the heroes in the browser as follows:
@@ -436,5 +368,12 @@ The pipe operator cannot be used without parentheses in the first and second ope
Due to precedence, if you want a pipe to apply to the result of a ternary, wrap the entire expression in parentheses; for example, `(a ? b : c) | x`.
-
-
+
+
+
+
+[AioGuideI18nCommonFormatDataLocale]: guide/i18n-common-format-data-locale "Format data based on locale | Angular"
+
+
+
+@reviewed 2021-09-02
diff --git a/aio/content/guide/workspace-config.md b/aio/content/guide/workspace-config.md
index 742c6327b40..4c8035c7d8e 100644
--- a/aio/content/guide/workspace-config.md
+++ b/aio/content/guide/workspace-config.md
@@ -9,11 +9,11 @@ At the top level of `angular.json`, a few properties configure the workspace, an
The following properties, at the top level of the file, configure the workspace.
-* `version`: The configuration-file version.
-* `newProjectRoot`: Path where new projects are created. Absolute or relative to the workspace folder.
-* `defaultProject`: Default project name to use in commands, where not provided as an argument. When you use `ng new` to create a new application in a new workspace, that application is the default project for the workspace until you change it here.
-* `schematics` : A set of [schematics](guide/glossary#schematic) that customize the `ng generate` sub-command option defaults for this workspace. See [Generation schematics](#schematics) below.
-* `projects` : Contains a subsection for each project (library or application) in the workspace, with the per-project configuration options.
+* `version`: The configuration-file version.
+* `newProjectRoot`: Path where new projects are created. Absolute or relative to the workspace folder.
+* `defaultProject`: Default project name to use in commands, where not provided as an argument. When you use `ng new` to create a new application in a new workspace, that application is the default project for the workspace until you change it here.
+* `schematics` : A set of [schematics](guide/glossary#schematic) that customize the `ng generate` sub-command option defaults for this workspace. See [Generation schematics](#schematics) below.
+* `projects` : Contains a subsection for each project (library or application) in the workspace, with the per-project configuration options.
The initial application that you create with `ng new app_name` is listed under "projects":
@@ -32,11 +32,12 @@ When you create a library project with `ng generate library`, the library projec
- Note that the `projects` section of the configuration file does not correspond exactly to the workspace file structure.
- * The initial application created by `ng new` is at the top level of the workspace file structure.
- * Additional applications and libraries go into a `projects` folder in the workspace.
+**NOTE**: The `projects` section of the configuration file does not correspond exactly to the workspace file structure.
- For more information, see [Workspace and project file structure](guide/file-structure).
+* The initial application created by `ng new` is at the top level of the workspace file structure.
+* Additional applications and libraries go into a `projects` folder in the workspace.
+
+For more information, see [Workspace and project file structure](guide/file-structure).
@@ -46,25 +47,25 @@ The following top-level configuration properties are available for each project,
- "my-app": {
- "root": "",
- "sourceRoot": "src",
- "projectType": "application",
- "prefix": "app",
- "schematics": {},
- "architect": {}
- }
+"my-app": {
+ "root": "",
+ "sourceRoot": "src",
+ "projectType": "application",
+ "prefix": "app",
+ "schematics": {},
+ "architect": {}
+}
-| PROPERTY | DESCRIPTION |
-| :-------------- | :---------------------------- |
+| PROPERTY | DESCRIPTION |
+|:--- |:--- |
| `root` | The root folder for this project's files, relative to the workspace folder. Empty for the initial app, which resides at the top level of the workspace. |
-| `sourceRoot` | The root folder for this project's source files. |
-| `projectType` | One of "application" or "library". An application can run independently in a browser, while a library cannot.|
-| `prefix` | A string that Angular prepends to generated selectors. Can be customized to identify an application or feature area. |
-| `schematics` | A set of schematics that customize the `ng generate` sub-command option defaults for this project. See [Generation schematics](#schematics) below. |
-| `architect` | Configuration defaults for Architect builder targets for this project. |
+| `sourceRoot` | The root folder for this project's source files. |
+| `projectType` | One of "application" or "library". An application can run independently in a browser, while a library cannot. |
+| `prefix` | A string that Angular prepends to generated selectors. Can be customized to identify an application or feature area. |
+| `schematics` | A set of schematics that customize the `ng generate` sub-command option defaults for this project. See [Generation schematics](#schematics) below. |
+| `architect` | Configuration defaults for Architect builder targets for this project. |
{@a schematics}
@@ -98,13 +99,13 @@ Angular defines default builders for use with specific CLI commands, or with the
The JSON schemas that define the options and defaults for each of these default builders are collected in the [`@angular-devkit/build-angular`](https://github.com/angular/angular-cli/blob/master/packages/angular/cli/lib/config/schema.json) package.
The schemas configure options for the following builders.
-* app-shell
-* browser
-* dev-server
-* extract-i18n
-* karma
-* server
-* tslint
+* app-shell
+* browser
+* dev-server
+* extract-i18n
+* karma
+* server
+* tslint
### Configuring builder targets
@@ -118,38 +119,31 @@ See the example in [Build target](#build-target) below.
- "architect": {
- "build": { },
- "serve": { },
- "e2e" : { },
- "test": { },
- "lint": { },
- "extract-i18n": { },
- "server": { },
- "app-shell": { }
- }
+"architect": {
+ "build": { },
+ "serve": { },
+ "e2e" : { },
+ "test": { },
+ "lint": { },
+ "extract-i18n": { },
+ "server": { },
+ "app-shell": { }
+}
-* The `architect/build` section configures defaults for options of the `ng build` command.
-See [Build target](#build-target) below for more information.
-
-* The `architect/serve` section overrides build defaults and supplies additional serve defaults for the `ng serve` command. In addition to the options available for the `ng build` command, it adds options related to serving the application.
-
-* The `architect/e2e` section overrides build-option defaults for building end-to-end testing applications using the `ng e2e` command.
-
-* The `architect/test` section overrides build-option defaults for test builds and supplies additional test-running defaults for the `ng test` command.
-
-* The `architect/lint` section configures defaults for options of the `ng lint` command, which performs code analysis on project source files.
-
-* The `architect/extract-i18n` section configures defaults for options of the `ng extract-i18n` command, which extracts marked message strings from source code and outputs translation files.
-
-* The `architect/server` section configures defaults for creating a Universal application with server-side rendering, using the `ng run
:server` command.
-
-* The `architect/app-shell` section configures defaults for creating an application shell for a progressive web application (PWA), using the `ng run :app-shell` command.
+* The `architect/build` section configures defaults for options of the `ng build` command.
+ See [Build target](#build-target) below for more information.
+* The `architect/serve` section overrides build defaults and supplies additional serve defaults for the `ng serve` command. In addition to the options available for the `ng build` command, it adds options related to serving the application.
+* The `architect/e2e` section overrides build-option defaults for building end-to-end testing applications using the `ng e2e` command.
+* The `architect/test` section overrides build-option defaults for test builds and supplies additional test-running defaults for the `ng test` command.
+* The `architect/lint` section configures defaults for options of the `ng lint` command, which performs code analysis on project source files.
+* The `architect/extract-i18n` section configures defaults for options of the `ng extract-i18n` command, which extracts marked message strings from source code and outputs translation files.
+* The `architect/server` section configures defaults for creating a Universal application with server-side rendering, using the `ng run :server` command.
+* The `architect/app-shell` section configures defaults for creating an application shell for a progressive web application (PWA), using the `ng run :app-shell` command.
In general, the options for which you can configure defaults correspond to the command options listed in the [CLI reference page](cli) for each command.
-Note that all options in the configuration file must use [camelCase](guide/glossary#case-conventions), rather than dash-case.
+**NOTE**: All options in the configuration file must use [camelCase](guide/glossary#case-conventions), rather than dash-case.
{@a build-target}
@@ -157,28 +151,28 @@ Note that all options in the configuration file must use [camelCase](guide/gloss
The `architect/build` section configures defaults for options of the `ng build` command. It has the following top-level properties.
-| PROPERTY | DESCRIPTION |
-| :-------------- | :---------------------------- |
-| `builder` | The npm package for the build tool used to create this target. The default builder for an application (`ng build myApp`) is `@angular-devkit/build-angular:browser`, which uses the [webpack](https://webpack.js.org/) package bundler. Note that a different builder is used for building a library (`ng build myLib`). |
-| `options` | This section contains default build target options, used when no named alternative configuration is specified. See [Default build targets](#default-build-targets) below. |
-| `configurations`| This section defines and names alternative configurations for different intended destinations. It contains a section for each named configuration, which sets the default options for that intended environment. See [Alternate build configurations](#build-configs) below. |
-
+| PROPERTY | DESCRIPTION |
+|:--- |:--- |
+| `builder` | The npm package for the build tool used to create this target. The default builder for an application (`ng build myApp`) is `@angular-devkit/build-angular:browser`, which uses the [webpack](https://webpack.js.org) package bundler. **NOTE**: A different builder is used for building a library (`ng build myLib`). |
+| `options` | This section contains default build target options, used when no named alternative configuration is specified. See [Default build targets](#default-build-targets) below. |
+| `configurations`| This section defines and names alternative configurations for different intended destinations. It contains a section for each named configuration, which sets the default options for that intended environment. See [Alternate build configurations](#build-configs) below. |
{@a build-configs}
### Alternate build configurations
Angular CLI comes with two build configurations: `production` and `development`. By default, the `ng build` command uses the `production` configuration, which applies a number of build optimizations, including:
-* Bundling files
-* Minimizing excess whitespace
-* Removing comments and dead code
-* Rewriting code to use short, mangled names (minification)
-You can define and name additional alternate configurations (such as `stage`, for instance) appropriate to your development process. Some examples of different build configurations are `stable`, `archive` and `next` used by AIO itself, and the individual locale-specific configurations required for building localized versions of an application. For details, see [Internationalization (i18n)](guide/i18n#merge-aot).
+* Bundling files
+* Minimizing excess whitespace
+* Removing comments and dead code
+* Rewriting code to use short, mangled names (minification)
+
+You can define and name additional alternate configurations (such as `stage`, for instance) appropriate to your development process. Some examples of different build configurations are `stable`, `archive` and `next` used by AIO itself, and the individual locale-specific configurations required for building localized versions of an application. For details, see [Internationalization (i18n)][AioGuideI18nCommonMerge].
You can select an alternate configuration by passing its name to the `--configuration` command line flag.
-You can also pass in more than one configuration name as a comma-separated list. For example, to apply both `stage` and `fr` build configurations, use the command `ng build --configuration stage,fr`. In this case, the command parses the named configurations from left to right. If multiple configurations change the same setting, the last-set value is the final one. So in this example, if both `stage` and `fr` configurations set the output path the value in `fr` would get used.
+You can also pass in more than one configuration name as a comma-separated list. For example, to apply both `stage` and `fr` build configurations, use the command `ng build --configuration stage,fr`. In this case, the command parses the named configurations from left to right. If multiple configurations change the same setting, the last-set value is the final one. So in this example, if both `stage` and `fr` configurations set the output path the value in `fr` would get used.
{@a build-props}
@@ -188,14 +182,14 @@ The configurable options for a default or targeted build generally correspond to
Some additional options can only be set through the configuration file, either by direct editing or with the [`ng config`](cli/config) command.
-| OPTIONS PROPERTIES | DESCRIPTION |
-| :------------------------- | :---------------------------- |
-| `assets` | An object containing paths to static assets to add to the global context of the project. The default paths point to the project's icon file and its `assets` folder. See more in [Assets configuration](#asset-config) below. |
-| `styles` | An array of style files to add to the global context of the project. Angular CLI supports CSS imports and all major CSS preprocessors: [sass/scss](https://sass-lang.com/) and [less](http://lesscss.org/). See more in [Styles and scripts configuration](#style-script-config) below. |
-| `stylePreprocessorOptions` | An object containing option-value pairs to pass to style preprocessors. See more in [Styles and scripts configuration](#style-script-config) below. |
-| `scripts` | An object containing JavaScript script files to add to the global context of the project. The scripts are loaded exactly as if you had added them in a `