Skip to content

Commit 7d6db00

Browse files
alan-agius4thePunderWoman
authored andcommitted
docs: update docs to reflect production mode by default (angular#41173)
In CLI version 12, we introduced the concept of production builds by default. With this change we update the documentation to reflect the changes. More information about the change can be found angular/angular-cli#20128 PR Close angular#41173
1 parent 1a9f526 commit 7d6db00

File tree

10 files changed

+36
-26
lines changed

10 files changed

+36
-26
lines changed

aio/content/guide/app-shell.md

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,16 @@ After running this command you will notice that the `angular.json` configuration
3131
<code-example language="json">
3232
"server": {
3333
"builder": "@angular-devkit/build-angular:server",
34+
"defaultConfiguration": "production",
3435
"options": {
3536
"outputPath": "dist/my-app/server",
3637
"main": "src/main.server.ts",
3738
"tsConfig": "tsconfig.server.json"
3839
},
3940
"configurations": {
41+
"development": {
42+
"outputHashing": "none",
43+
},
4044
"production": {
4145
"outputHashing": "media",
4246
"fileReplacements": [
@@ -52,12 +56,15 @@ After running this command you will notice that the `angular.json` configuration
5256
},
5357
"app-shell": {
5458
"builder": "@angular-devkit/build-angular:app-shell",
59+
"defaultConfiguration": "production",
5560
"options": {
56-
"browserTarget": "my-app:build",
57-
"serverTarget": "my-app:server",
5861
"route": "shell"
5962
},
6063
"configurations": {
64+
"development": {
65+
"browserTarget": "my-app:build:development",
66+
"serverTarget": "my-app:server:development",
67+
},
6168
"production": {
6269
"browserTarget": "my-app:build:production",
6370
"serverTarget": "my-app:server:production"
@@ -71,7 +78,7 @@ After running this command you will notice that the `angular.json` configuration
7178
Use the CLI to build the `app-shell` target.
7279

7380
<code-example language="bash">
74-
ng run my-app:app-shell
81+
ng run my-app:app-shell:development
7582
</code-example>
7683

7784
Or to use the production configuration.

aio/content/guide/build.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ For example:
117117
...
118118
```
119119

120-
This means that when you build your production configuration (using `ng build --prod` or `ng build --configuration=production`), the `src/environments/environment.ts` file is replaced with the target-specific version of the file, `src/environments/environment.prod.ts`.
120+
This means that when you build your production configuration with `ng build --configuration production`, the `src/environments/environment.ts` file is replaced with the target-specific version of the file, `src/environments/environment.prod.ts`.
121121

122122
You can add additional configurations as required. To add a staging environment, create a copy of `src/environments/environment.ts` called `src/environments/environment.staging.ts`, then add a `staging` configuration to `angular.json`:
123123

aio/content/guide/creating-libraries.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,13 @@ When you generate a new library, the workspace configuration file, `angular.json
4545
You can build, test, and lint the project with CLI commands:
4646

4747
<code-example language="bash">
48-
ng build my-lib
48+
ng build my-lib --configuration development
4949
ng test my-lib
5050
ng lint my-lib
5151
</code-example>
5252

5353
Notice that the configured builder for the project is different from the default builder for app projects.
54-
This builder, among other things, ensures that the library is always built with the [AOT compiler](guide/aot-compiler), without the need to specify the `--prod` flag.
54+
This builder, among other things, ensures that the library is always built with the [AOT compiler](guide/aot-compiler).
5555

5656
To make library code reusable you must define a public API for it. This "user layer" defines what is available to consumers of your library. A user of your library should be able to access public functionality (such as NgModules, service providers and general utility functions) through a single import path.
5757

@@ -118,10 +118,10 @@ To learn more, see [Schematics Overview](guide/schematics) and [Schematics for
118118

119119
Use the Angular CLI and the npm package manager to build and publish your library as an npm package.
120120

121-
Before publishing a library to NPM, build it using the `--prod` flag which will use the older compiler and runtime known as View Engine instead of Ivy.
121+
Before publishing a library to NPM, build it using the `production` configuration which uses the older compiler and runtime known as View Engine instead of Ivy.
122122

123123
<code-example language="bash">
124-
ng build my-lib --prod
124+
ng build my-lib
125125
cd dist/my-lib
126126
npm publish
127127
</code-example>

aio/content/guide/deployment.md

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ ng deploy
6868

6969
The command is interactive. In this case, you must have or create a Firebase account, and authenticate using that account. The command prompts you to select a Firebase project for deployment
7070

71-
After the command produces an optimal build of your application (equivalent to `ng deploy --prod`), it'll upload the production assets to Firebase.
71+
The command builds your application and uploads the production assets to Firebase.
7272

7373
In the table below, you can find a list of packages which implement deployment functionality to different platforms. The `deploy` command for each package may require different command line options. You can read more by following the links associated with the package names below:
7474

@@ -92,7 +92,7 @@ For the simplest deployment, create a production build and copy the output direc
9292

9393
<code-example language="none" class="code-shell">
9494

95-
ng build --prod
95+
ng build
9696

9797
</code-example>
9898

@@ -135,7 +135,7 @@ To deploy your Angular application to [GitHub Pages](https://help.github.com/art
135135

136136
<code-example language="none" class="code-shell">
137137

138-
ng build --prod --output-path docs --base-href /your_project_name/
138+
ng build --output-path docs --base-href /your_project_name/
139139

140140
</code-example>
141141

@@ -299,7 +299,7 @@ Read about how to enable CORS for specific servers at
299299
{@a optimize}
300300
## Production optimizations
301301

302-
The `--prod` _meta-flag_ engages the following build optimization features.
302+
The `production` configuration engages the following build optimization features.
303303

304304
* [Ahead-of-Time (AOT) Compilation](guide/aot-compiler): pre-compiles Angular component templates.
305305
* [Production mode](#enable-prod-mode): deploys the production environment which enables _production mode_.
@@ -323,9 +323,10 @@ In addition to build optimizations, Angular also has a runtime production mode.
323323

324324
</code-example>
325325

326-
Switching to _production mode_ makes it run faster by disabling development specific checks such as the dual change detection cycles.
327-
328-
When you enable production builds via `--prod` command line flag, the runtime production mode is enabled as well.
326+
_Production mode_ improves application performance by disabling development-only safety
327+
checks and debugging utilities, such as the expression-changed-after-checked detection.
328+
Building your application with the production configuration automatically enables Angular's
329+
runtime production mode.
329330

330331
{@a lazy-loading}
331332

@@ -394,7 +395,7 @@ Build your app for production _including the source maps_
394395

395396
<code-example language="none" class="code-shell">
396397

397-
ng build --prod --source-map
398+
ng build --source-map
398399

399400
</code-example>
400401

aio/content/guide/glossary.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -907,7 +907,7 @@ A buildable or runnable subset of a [project](#project), configured as an object
907907

908908
In the `angular.json` file, each project has an "architect" section that contains targets which configure builders. Some of these targets correspond to [CLI commands](#cli), such as `build`, `serve`, `test`, and `lint`.
909909

910-
For example, the Architect builder invoked by the `ng build` command to compile a project uses a particular build tool, and has a default configuration whose values can be overridden on the command line. The `build` target also defines an alternate configuration for a "production" build, that can be invoked with the `--prod` flag on the `build` command.
910+
For example, the Architect builder invoked by the `ng build` command to compile a project uses a particular build tool, and has a default configuration with values that you can override on the command line. The `build` target also defines an alternate configuration for a "development" build, which you can invoke with the `--configuration development` flag on the `build` command.
911911

912912
The Architect tool provides a set of builders. The [`ng new` command](cli/new) provides a set of targets for the initial application project. The [`ng generate application`](cli/generate#application) and [`ng generate library`](cli/generate#library) commands provide a set of targets for each new [project](#project). These targets, their options and configurations, can be customized to meet the needs of your project. For example, you may want to add a "staging" or "testing" configuration to a project's "build" target.
913913

aio/content/guide/i18n.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -642,7 +642,7 @@ You can also use the `--localize` option with the [`ng build`](/cli/build "CLI r
642642
The CLI builds all locales defined in the build configuration, which is similar to setting the `"localize"` option to `true` as described in the previous section.
643643

644644
<code-example language="sh" class="code-shell">
645-
ng build --prod --localize
645+
ng build --localize
646646
</code-example>
647647

648648
{@a localize-build-one-locale}

aio/content/guide/service-worker-config.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ A basic understanding of the following:
99

1010
The `ngsw-config.json` configuration file specifies which files and data URLs the Angular service
1111
worker should cache and how it should update the cached files and data. The [Angular CLI](cli)
12-
processes the configuration file during `ng build --prod`. Manually, you can process it with the
12+
processes the configuration file during `ng build`. Manually, you can process it with the
1313
`ngsw-config` tool (where `<project-name>` is the name of the project being built):
1414

1515
<code-example language="sh">

aio/content/guide/service-worker-getting-started.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ The above command completes the following actions:
3232
Now, build the project:
3333

3434
```sh
35-
ng build --prod
35+
ng build
3636
```
3737

3838
The CLI project is now set up to use the Angular service worker.
@@ -130,7 +130,7 @@ next step is understanding how updates work. Let's make a change to the applicat
130130
6. Build and run the server again:
131131

132132
```sh
133-
ng build --prod
133+
ng build
134134
http-server -p 8080 -c-1 dist/<project-name>
135135
```
136136

aio/content/guide/workspace-config.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -174,16 +174,18 @@ The `architect/build` section configures defaults for options of the `ng build`
174174

175175
### Alternate build configurations
176176

177-
By default, a `production` configuration is defined, and the `ng build` command has `--prod` option that builds using this configuration. The `production` configuration sets defaults that optimize the app in a number of ways, such as bundling files, minimizing excess whitespace, removing comments and dead code, and rewriting code to use short, cryptic names ("minification").
177+
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:
178+
* Bundling files
179+
* Minimizing excess whitespace
180+
* Removing comments and dead code
181+
* Rewriting code to use short, mangled names (minification)
178182

179183
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 app. For details, see [Internationalization (i18n)](guide/i18n#merge-aot).
180184

181185
You can select an alternate configuration by passing its name to the `--configuration` command line flag.
182186

183187
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.
184188

185-
If the `--prod` command line flag is also used, it is applied first, and its settings can be overridden by any configurations specified via the `--configuration` flag.
186-
187189
{@a build-props}
188190

189191
### Additional build and test options

aio/content/start/start-deployment.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,10 @@ A best practice is to run your project locally before you deploy it. To run your
5151
{@a building}
5252
## Building and hosting your application
5353

54-
1. To build your application for production, use the `build` command with the `prod` flag.
54+
1. To build your application for production, use the `build` command. By default, this command uses the `production` build configuration.
5555

5656
```sh
57-
ng build --prod
57+
ng build
5858
```
5959

6060
This command creates a `dist` folder in the application root directory with all the files that a hosting service needs for serving your application.

0 commit comments

Comments
 (0)