diff --git a/aio/content/guide/deployment.md b/aio/content/guide/deployment.md
index 6384ef1525..db23565a86 100644
--- a/aio/content/guide/deployment.md
+++ b/aio/content/guide/deployment.md
@@ -30,7 +30,9 @@ You will need two terminals to get the live-reload experience.
* On the first terminal, run the [`ng build` command](cli/build) in *watch* mode to compile the application to the `dist` folder.
+
ng build --watch
+
Like the `ng serve` command, this regenerates output files when source files change.
@@ -38,7 +40,9 @@ You will need two terminals to get the live-reload experience.
* On the second terminal, install a web server (such as [lite-server](https://github.com/johnpapa/lite-server)), and run it against the output folder. For example:
+
lite-server --baseDir="dist"
+
The server will automatically reload your browser when new files are output.
@@ -56,7 +60,9 @@ For the simplest deployment, create a production build and copy the output direc
1. Start with the production build:
+
ng build --prod
+
@@ -78,7 +84,9 @@ Make a note of the user name and project name in GitHub.
1. Build your project using Github project name, with the Angular CLI command [`ng build`](cli/build) and the options shown here:
- ng build --prod --output-path docs --base-href //
+
+ ng build --prod --output-path docs --base-href /<project_name>/
+
1. When the build is complete, make a copy of `docs/index.html` and name it `docs/404.html`.
@@ -144,6 +152,7 @@ The list is by no means exhaustive, but should provide you with a good starting
(https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/):
+
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
@@ -152,6 +161,7 @@ The list is by no means exhaustive, but should provide you with a good starting
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html
+
@@ -160,7 +170,9 @@ The list is by no means exhaustive, but should provide you with a good starting
modified to serve `index.html`:
+
try_files $uri $uri/ /index.html;
+
@@ -168,6 +180,7 @@ modified to serve `index.html`:
[here](http://stackoverflow.com/a/26152011/2116927):
+
<system.webServer>
<rewrite>
<rules>
@@ -182,6 +195,7 @@ modified to serve `index.html`:
</rules>
</rewrite>
</system.webServer>
+
@@ -200,10 +214,12 @@ and to
[rewrite rule](https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-rewrites).
+
"rewrites": [ {
"source": "**",
"destination": "/index.html"
} ]
+
{@a cors}
@@ -245,9 +261,11 @@ See [`ng build`](cli/build) for more about CLI build options and what they do.
In addition to build optimizations, Angular also has a runtime production mode. Angular apps run in development mode by default, as you can see by the following message on the browser console:
-```
+
+
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
-```
+
+
Switching to _production mode_ makes it run faster by disabling development specific checks such as the dual change detection cycles.
@@ -311,26 +329,34 @@ tool is a great way to inspect the generated JavaScript bundles after a producti
Install `source-map-explorer`:
+
npm install source-map-explorer --save-dev
+
Build your app for production _including the source maps_
+
ng build --prod --source-map
+
List the generated bundles in the `dist/` folder.
+
ls dist/*.bundle.js
+
Run the explorer to generate a graphical representation of one of the bundles.
The following example displays the graph for the _main_ bundle.
+
node_modules/.bin/source-map-explorer dist/main.*.bundle.js
+
The `source-map-explorer` analyzes the source map generated with the bundle and draws a map of all dependencies,
@@ -419,6 +445,7 @@ When you create a production build using [`ng build --prod`](cli/build), the CLI
The `index.html` file is also modified during the build process to include script tags that enable differential loading. See the sample output below from the `index.html` file produced during a build using `ng build`.
+
@@ -434,6 +461,7 @@ The `index.html` file is also modified during the build process to include scrip
+
Each script tag has a `type="module"` or `nomodule` attribute. Browsers with native support for ES modules only load the scripts with the `module` type attribute and ignore scripts with the `nomodule` attribute. Legacy browsers only load the scripts with the `nomodule` attribute, and ignore the script tags with the `module` type that load ES modules.
@@ -464,6 +492,7 @@ not IE 9-11 # For IE 9-11 support, remove 'not'.
The `tsconfig.json` looks like this:
+
{
"compileOnSave": false,
"compilerOptions": {
@@ -486,6 +515,7 @@ The `tsconfig.json` looks like this:
]
}
}
+
By default, legacy browsers such as IE 9-11 are ignored, and the compilation target is ES2015. As a result, this produces two builds, and differential loading is enabled. If you ignore browsers without ES2015 support, a single build is produced. To see the build result for differential loading based on different configurations, refer to the table below.
@@ -533,17 +563,20 @@ To maintain the benefits of differential loading, however, a better option is to
To do this for `ng serve`, create a new file, `tsconfig-es5.app.json` next to `tsconfig.app.json` with the following content.
+
{
"extends": "./tsconfig.app.json",
"compilerOptions": {
"target": "es5"
}
}
+
In `angular.json` add two new configuration sections under the `build` and `serve` targets to point to the new TypeScript configuration.
+
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
@@ -572,12 +605,15 @@ In `angular.json` add two new configuration sections under the `build` and `serv
}
}
},
+
You can then run the serve with this configuration.
+
ng serve --configuration es5
+
{@ differential-test}
@@ -587,15 +623,18 @@ ng serve --configuration es5
Create a new file, `tsconfig-es5.spec.json` next to `tsconfig.spec.json` with the following content.
+
{
"extends": "./tsconfig.spec.json",
"compilerOptions": {
"target": "es5"
}
}
+
+
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
@@ -607,12 +646,15 @@ Create a new file, `tsconfig-es5.spec.json` next to `tsconfig.spec.json` with th
}
}
},
+
+
ng test --configuration es5
+
### Configuring the e2e command
@@ -620,6 +662,7 @@ ng test --configuration es5
Create an ES5 serve configuration as explained above (link to the above serve section), and configuration an ES5 configuration for the E2E target.
+
"test": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
@@ -634,10 +677,13 @@ Create an ES5 serve configuration as explained above (link to the above serve se
}
}
},
+
You can then run the e2e's with this configuration
+
ng e2e --configuration es5
+