docs: add lazy scripts/styles docs

This was added back in #3401 but never documented.

Also cleans up duplicate docs in overview.

Close #4693

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)

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" },
+],
+```

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" },
+],
+```