docs: update global styles/scripts/lib wiki

Author: filipesilva

docs/documentation/stories/global-lib.md

@@ -1,37 +1,36 @@
 # 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`.
+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 `scripts` and `styles` options of the build target in `angular.json`.
 
-As an example, to use [Bootstrap 4](https://getbootstrap.com/docs/4.0/getting-started/introduction/) this is
-what you need to do:
+As an example, to use [Bootstrap 4](https://getbootstrap.com/docs/4.0/getting-started/introduction/)
+this is what you need to do:
 
 First install Bootstrap from `npm`:
 
 ```bash
 npm install jquery --save
 npm install popper.js --save
-npm install bootstrap@next --save
+npm install bootstrap --save
 ```
 
-Then add the needed script files to `apps[0].scripts`:
+Then add the needed script files to `scripts`:
 
 ```json
 "scripts": [
-  "../node_modules/jquery/dist/jquery.slim.js",
-  "../node_modules/popper.js/dist/umd/popper.js",
-  "../node_modules/bootstrap/dist/js/bootstrap.js"
+  "node_modules/jquery/dist/jquery.slim.js",
+  "node_modules/popper.js/dist/umd/popper.js",
+  "node_modules/bootstrap/dist/js/bootstrap.js"
 ],
 ```
 
-Finally add the Bootstrap CSS to the `apps[0].styles` array:
+Finally add the Bootstrap CSS to the `styles` array:
 ```json
 "styles": [
-  "../node_modules/bootstrap/dist/css/bootstrap.css",
-  "styles.css"
+  "node_modules/bootstrap/dist/css/bootstrap.css",
+  "src/styles.css"
 ],
 ```
 
-Restart `ng serve` if you're running it, and Bootstrap 4 should be working on
-your app.
+Restart `ng serve` if you're running it, and Bootstrap 4 should be working on your app.

docs/documentation/stories/global-scripts.md

@@ -1,32 +1,38 @@
 # Global scripts
 
-You can add Javascript files to the global scope via the `apps[0].scripts`
-property in `.angular-cli.json`.
+You can add Javascript files to the global scope via the `scripts` option inside your
+project's build target options in `angular.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",
-],
+"architect": {
+  "build": {
+    "builder": "@angular-devkit/build-angular:browser",
+    "options": {
+      "scripts": [
+        "src/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" },
+  "src/global-script.js",
+  { "input": "src/lazy-script.js", "lazy": true },
+  { "input": "src/pre-rename-script.js", "bundleName": "renamed-script" },
 ],
 ```
 
+Note: you will also need to add any scripts to the `test` builder if you need them for unit tests.
+
 ## Using global libraries inside your app
 
 Once you import a library via the scripts array, you should **not** import it via a import statement
 in your TypeScript code (e.g. `import * as $ from 'jquery';`).
-If you do that, you'll end up with two different copies of the library: one imported as a
+If you do that you'll end up with two different copies of the library: one imported as a
 global library, and one imported as a module.
 
 This is especially bad for libraries with plugins, like JQuery, because each copy will have

docs/documentation/stories/global-styles.md

@@ -6,36 +6,42 @@ The `styles.css` file allows users to add global styles and supports
 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`.
+You can add more global styles via the `styles` option inside your project's build target options
+in `angular.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",
-],
+"architect": {
+  "build": {
+    "builder": "@angular-devkit/build-angular:browser",
+    "options": {
+      "styles": [
+        "src/styles.css",
+        "src/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" },
+  "src/styles.css",
+  "src/more-styles.css",
+  { "input": "src/lazy-style.scss", "lazy": true },
+  { "input": "src/pre-rename-style.scss", "bundleName": "renamed-style" },
 ],
 ```
 
 In Sass and Stylus you can also make use of the `includePaths` functionality for both component and
 global styles, which allows you to add extra base paths that will be checked for imports.
 
-To add paths, use the `stylePreprocessorOptions` entry in angular-cli.json `app` object:
+To add paths, use the `stylePreprocessorOptions` option:
 
 ```
 "stylePreprocessorOptions": {
   "includePaths": [
-    "style-paths"
+    "src/style-paths"
   ]
 },
 ```
@@ -49,4 +55,6 @@ project without the need for a relative path:
 @import '../style-paths/variables';
 // But now this works as well
 @import 'variables';
-```
+```
+
+Note: you will also need to add any styles to the `test` builder if you need them for unit tests.