From 68d4a4c6d688ec20268f0bb9ee063cb4ec19b320 Mon Sep 17 00:00:00 2001
From: Filipe Silva <filipematossilva@gmail.com>
Date: Tue, 14 Feb 2017 16:00:14 +0000
Subject: [PATCH] docs: add lazy scripts/styles docs

This was added back in #3401 but never documented.

Also cleans up duplicate docs in overview.
---
 docs/documentation/overview.md               | 65 --------------------
 docs/documentation/stories/global-scripts.md | 23 +++++++
 docs/documentation/stories/global-styles.md  | 19 ++++++
 3 files changed, 42 insertions(+), 65 deletions(-)
 create mode 100644 docs/documentation/stories/global-scripts.md

diff --git a/docs/documentation/overview.md b/docs/documentation/overview.md
index 3f6caae4261c..d9ac72a1dd9f 100644
--- a/docs/documentation/overview.md
+++ b/docs/documentation/overview.md
@@ -20,25 +20,6 @@ ng serve
 ```
 Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
 
-### Build Targets and Environment Files
-
-`ng build` can specify both a build target (`--target=production` or `--target=development`) and an
-environment file to be used with that build (`--environment=dev` or `--environment=prod`).
-By default, the development build target and environment are used.
-
-The mapping used to determine which environment file is used can be found in `angular-cli.json`:
-
-```json
-"environments": {
-  "source": "environments/environment.ts",
-  "dev": "environments/environment.ts",
-  "prod": "environments/environment.prod.ts"
-}
-```
-
-These options also apply to the serve command. If you do not pass a value for `environment`,
-it will default to `dev` for `development` and `prod` for `production`.
-
 ### Bundling
 
 All builds make use of bundling, and using the `--prod` flag in  `ng build --prod`
@@ -61,52 +42,6 @@ ng e2e
 Before running the tests make sure you are serving the app via `ng serve`.
 End-to-end tests are run via [Protractor](https://angular.github.io/protractor/).
 
-### Global styles
-
-The `styles.css` file allows users to add global styles and supports
-[CSS imports](https://developer.mozilla.org/en/docs/Web/CSS/@import).
-
-If the project is created with the `--style=sass` option, this will be a `.sass`
-file instead, and the same applies to `scss/less/styl`.
-
-You can add more global styles via the `apps[0].styles` property in `angular-cli.json`.
-
-### Global Library Installation
-
-Some javascript libraries need to be added to the global scope, and loaded as if
-they were in a script tag. We can do this using the `apps[0].scripts` and
-`apps[0].styles` properties of `angular-cli.json`.
-
-As an example, to use [Bootstrap 4](http://v4-alpha.getbootstrap.com/) this is
-what you need to do:
-
-First install Bootstrap from `npm`:
-
-```bash
-npm install bootstrap@next
-```
-
-Then add the needed script files to `apps[0].scripts`:
-
-```json
-"scripts": [
-  "../node_modules/jquery/dist/jquery.js",
-  "../node_modules/tether/dist/js/tether.js",
-  "../node_modules/bootstrap/dist/js/bootstrap.js"
-],
-```
-
-Finally add the Bootstrap CSS to the `apps[0].styles` array:
-```json
-"styles": [
-  "../node_modules/bootstrap/dist/css/bootstrap.css",
-  "styles.css"
-],
-```
-
-Restart `ng serve` if you're running it, and Bootstrap 4 should be working on
-your app.
-
 ### Additional Commands
 * [ng new](new)
 * [ng update](update)
diff --git a/docs/documentation/stories/global-scripts.md b/docs/documentation/stories/global-scripts.md
new file mode 100644
index 000000000000..0d8a2be58f60
--- /dev/null
+++ b/docs/documentation/stories/global-scripts.md
@@ -0,0 +1,23 @@
+# Global styles
+
+You can add Javascript files to the global scope via the `apps[0].scripts`
+property in `angular-cli.json`.
+These will be loaded exactly as if you had added them in a `<script>` tag inside `index.html`.
+
+This is especially useful for legacy libraries or analytic snippets.
+
+```json
+"scripts": [
+  "global-script.js",
+],
+```
+
+You can also rename the output and lazy load it by using the object format:
+
+```json
+"scripts": [
+  "global-script.js",
+  { "input": "lazy-script.js", "lazy": true },
+  { "input": "pre-rename-script.js", "output": "renamed-script" },
+],
+```
\ No newline at end of file
diff --git a/docs/documentation/stories/global-styles.md b/docs/documentation/stories/global-styles.md
index bde05c290546..696b4a903896 100644
--- a/docs/documentation/stories/global-styles.md
+++ b/docs/documentation/stories/global-styles.md
@@ -7,3 +7,22 @@ If the project is created with the `--style=sass` option, this will be a `.sass`
 file instead, and the same applies to `scss/less/styl`.
 
 You can add more global styles via the `apps[0].styles` property in `angular-cli.json`.
+These will be loaded exactly as if you had added them in a `<link>` tag inside `index.html`.
+
+```json
+"styles": [
+  "styles.css",
+  "more-styles.css",
+],
+```
+
+You can also rename the output and lazy load it by using the object format:
+
+```json
+"styles": [
+  "styles.css",
+  "more-styles.css",
+  { "input": "lazy-style.scss", "lazy": true },
+  { "input": "pre-rename-style.scss", "output": "renamed-style" },
+],
+```
\ No newline at end of file