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 +