Merge pull request #136 from angular/master

Update upstream

Author: GulajavaMinistudio

docs/documentation/stories/budgets.md

@@ -4,16 +4,16 @@ As applications grow in functionality, they also grow in size. Budgets is a feat
 Angular CLI which allows you to set budget thresholds in your configuration to ensure parts
 of your application stay within boundries which you set.
 
-**.angular-cli.json**
+**angular.json**
 ```
 {
   ...
-  apps: [
-    {
+  "configurations": {
+    "production": {
       ...
       budgets: []
     }
-  ]
+  }
 }
 ```
 

docs/documentation/stories/code-coverage.md

@@ -8,9 +8,9 @@ To generate a coverage report run the following command in the root of your proj
 ng test --watch=false --code-coverage
 ```
 
-Once the tests complete a new `/coverage` folder will appear in the project. In your Finder or Windows Explorer open the `index.html` file. You should see a report with your source code and code coverage values. 
+Once the tests complete a new `/coverage` folder will appear in the project. In your Finder or Windows Explorer open the `index.html` file. You should see a report with your source code and code coverage values.
 
-Using the code coverage percentages we can estimate how much of our code is tested. It is up to your team to determine how much code should be unit tested. 
+Using the code coverage percentages we can estimate how much of our code is tested. It is up to your team to determine how much code should be unit tested.
 
 ## Code Coverage Enforcement
 
@@ -27,6 +27,19 @@ coverageIstanbulReporter: {
     functions: 80
   }
 }
-``` 
+```
+
+The `thresholds` property will enforce a minimum of 80% code coverage when the unit tests are run in the project.
+
+Another option to simplify the usage of code coverage, instead of passing it via the command line every time. Is to set the value within the configuration file `angular.json`.
+
+```json
+  ...
+  "test": {
+    "options": {
+      "codeCoverage": true
+    }
+  }
+```
 
-The `thresholds` property will enforce a minimum of 80% code coverage when the unit tests are run in the project.
+This will produce code coverage results whenever tests are run for the project.

docs/documentation/stories/configure-hmr.md

@@ -41,29 +41,29 @@ export const environment = {
 ```
 
 
-Update `.angular-cli.json` by adding the new environment the existing environments object:
+Update `angular.json` to include an hmr environment as explained [here](./application-environments) and add a configuration within serve to enable hmr.
 
 ```json
-"environmentSource": "environments/environment.ts",
-"environments": {
-  "dev": "environments/environment.ts",
-  "hmr": "environments/environment.hmr.ts",
-  "prod": "environments/environment.prod.ts"
-},
+  "serve": {
+    "configuration": {
+      ...
+      "hmr": true
+    }
+  }
 ```
 
-Run `ng serve` with the flag `--hmr -e=hmr` to enable hmr and select the new environment:
+Run `ng serve` with the flag `--configuration hmr` to enable hmr and select the new environment:
 
 ```bash
-ng serve --hmr -e=hmr
+ng serve --configuration hmr
 ```
 
 Create a shortcut for this by updating  `package.json` and adding an entry to the script object:
 
 ```json
 "scripts": {
   ...
-  "hmr": "ng serve --hmr -e=hmr"
+  "hmr": "ng serve --configuration hmr"
 }
 ```
 

docs/documentation/stories/css-preprocessors.md

@@ -28,7 +28,8 @@ ng new sassy-project --style=sass
 Or set the default style on an existing project:
 
 ```bash
-ng set defaults.styleExt scss
+ng config schematics.@schematics/angular:component.styleext scss
+# note: @schematics/angular is the default schematic for the Angular CLI
 ```
 
 Style strings added to the `@Component.styles` array _must be written in CSS_ because the CLI cannot apply a pre-processor to inline styles.

docs/documentation/stories/include-bootstrap.md

@@ -22,31 +22,32 @@ With the new project created and ready you will next need to install bootstrap t
 Using the `--save` option the dependency will be saved in package.json
 
 ```sh
-# version 3.x
 npm install bootstrap --save
-
-# version 4.x
-npm install bootstrap@next --save
 ```
 
 ### Configuring Project
 
 Now that the project is set up it must be configured to include the bootstrap CSS.
 
-- Open the file `.angular-cli.json` from the root of your project.
-- Under the property `apps` the first item in that array is the default application.
-- There is a property `styles` which allows external global styles to be applied to your application.
+- Open the file `angular.json` from the root of your project.
+- Under the property `projects` find your project.
+- Inside `architect.build.options` locate the `styles` property.
+- This property allows external global styles to be applied to your application.
 - Specify the path to `bootstrap.min.css`
 
   It should look like the following when you are done:
   ```json
-  "styles": [
-    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
-    "styles.css"
-  ],
+  "build": {
+    "options": {
+      "styles": [
+        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
+        "styles.css"
+      ],
+    }
+  }
   ```
 
-**Note:** When you make changes to `.angular-cli.json` you will need to re-start `ng serve` to pick up configuration changes.
+**Note:** When you make changes to `angular.json` you will need to re-start `ng serve` to pick up configuration changes.
 
 ### Testing Project
 
@@ -74,11 +75,7 @@ cd my-app
 ### Installing Bootstrap
 
 ```sh
-# version 3.x
-npm install bootstrap-sass --save
-
-# version 4.x
-npm install bootstrap@next --save
+npm install bootstrap --save
 ```
 
 ### Configuring Project
@@ -94,11 +91,6 @@ $icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
 In `styles.scss` add the following:
 
 ```sass
-// version 3
-@import 'variables';
-@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';
-
-// version 4
 @import 'variables';
 @import '../node_modules/bootstrap/scss/bootstrap';
 ```
@@ -117,10 +109,6 @@ Verify the bootstrap styled button appears.
 To ensure your variables are used open `_variables.scss` and add the following:
 
 ```sass
-// version 3
-$brand-primary: red;
-
-// version 4
 $primary: red;
 ```
 

docs/documentation/stories/include-font-awesome.md

@@ -19,12 +19,15 @@ npm install --save font-awesome
 
 To add Font Awesome CSS icons to your app...
 ```json
-// in .angular-cli.json
-
-"styles": [
-  "styles.css",
-  "../node_modules/font-awesome/css/font-awesome.css"
-]
+// in angular.json
+"build": {
+  "options": {
+    "styles": [
+      "../node_modules/font-awesome/css/font-awesome.css"
+      "styles.css"
+    ],
+  }
+}
 ```
 ### Using SASS
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/cli",
-  "version": "6.0.0-rc.6",
+  "version": "6.0.0-rc.7",
   "description": "CLI tool for Angular",
   "main": "packages/@angular/cli/lib/cli/index.js",
   "trackingCode": "UA-8594346-19",

package.json

@@ -38,7 +38,7 @@ if (found) {
     The Angular CLI configuration format has been changed, and your existing configuration can
     be updated automatically by running the following command:
 
-      ng update @angular/cli --migrate-only --from=1
+      ng update @angular/cli
     ${'='.repeat(80)}
     \u001b[39m`.replace(/^ {4}/gm, ''));
 }