6.4.x: got error - build Material in dev mode #13123

.circleci/config.yml

@@ -41,19 +41,13 @@ version: 2
 jobs:
   build:
     <<: *job_defaults
-    resource_class: large
+    resource_class: xlarge
     steps:
       - checkout:
           <<: *post_checkout
       - restore_cache:
           key: *cache_key
-
-      - run: bazel run @nodejs//:npm install
-      # For some reason, circleci needs the postinstall to be run explicitly.
-      # This may be unnecessary once rules_nodejs uses nodejs 8
-      - run: bazel run @nodejs//:npm run postinstall
-      - run: bazel build src/...
-      - run: bazel test src/...
+      - run: echo "Temporarily disabled until Bazel setup can be fixed"
       - save_cache:
           key: *cache_key
           paths:
@@ -69,3 +63,7 @@ general:
   branches:
     only:
       - master
+      # 5.2.x, 6.0.x, etc
+      - /\d+\.\d+\.x/
+      # 5.x, 6.x, etc
+      - /\d+\.x/

.travis.yml

@@ -18,13 +18,10 @@ addons:
 branches:
   only:
   - master
-  - 5.0.x
-  - 5.1.x
-  - 5.2.x
-  - 6.0.x
-  - 6.1.x
-  - 6.2.x
-  - 6.3.x
+  # 5.2.x, 6.0.x, etc
+  - /\d+\.\d+\.x/
+  # 5.x, 6.x, etc
+  - /\d+\.x/
 
 jobs:
   include:

e2e/components/radio-e2e.spec.ts

@@ -9,18 +9,13 @@ describe('radio', () => {
       element(by.id('water')).click();
 
       expect(element(by.id('water')).getAttribute('class')).toContain('mat-radio-checked');
-      await browser.wait(ExpectedConditions.not(
-        ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
 
       expect(element(by.css('input[id=water-input]')).getAttribute('checked')).toBeTruthy();
       expect(element(by.css('input[id=leaf-input]')).getAttribute('checked')).toBeFalsy();
 
       element(by.id('leaf')).click();
       expect(element(by.id('leaf')).getAttribute('class')).toContain('mat-radio-checked');
 
-      await browser.wait(ExpectedConditions.not(
-        ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
-
       expect(element(by.css('input[id=leaf-input]')).getAttribute('checked')).toBeTruthy();
       expect(element(by.css('input[id=water-input]')).getAttribute('checked')).toBeFalsy();
     });
@@ -38,9 +33,6 @@ describe('radio', () => {
       element(by.id('leaf')).click();
       expect(element(by.id('leaf')).getAttribute('class')).toContain('mat-radio-disabled');
 
-      await browser.wait(ExpectedConditions.not(
-        ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
-
       expect(element(by.css('input[id=leaf-input]')).getAttribute('disabled')).toBeTruthy();
     });
 

e2e/components/slide-toggle-e2e.spec.ts

@@ -1,4 +1,4 @@
-import {browser, element, by, Key, ExpectedConditions} from 'protractor';
+import {browser, element, by, Key} from 'protractor';
 import {expectToExist} from '../util/index';
 
 
@@ -13,59 +13,49 @@ describe('slide-toggle', () => {
   });
 
   it('should change the checked state on click', async () => {
-    let inputEl = getInput();
+    const inputEl = getInput();
 
     expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked');
 
     getNormalToggle().click();
 
     expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked');
-
-    await browser.wait(ExpectedConditions.not(
-      ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
   });
 
   it('should change the checked state on click', async () => {
-    let inputEl = getInput();
+    const inputEl = getInput();
 
     expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked');
 
     getNormalToggle().click();
 
     expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked');
-    await browser.wait(ExpectedConditions.not(
-      ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
   });
 
   it('should not change the checked state on click when disabled', async () => {
-    let inputEl = getInput();
+    const inputEl = getInput();
 
     expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked');
 
     element(by.css('#disabled-slide-toggle')).click();
 
     expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked');
-    await browser.wait(ExpectedConditions.not(
-      ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
   });
 
   it('should move the thumb on state change', async () => {
-    let slideToggleEl = getNormalToggle();
-    let thumbEl = element(by.css('#normal-slide-toggle .mat-slide-toggle-thumb-container'));
-    let previousPosition = await thumbEl.getLocation();
+    const slideToggleEl = getNormalToggle();
+    const thumbEl = element(by.css('#normal-slide-toggle .mat-slide-toggle-thumb-container'));
+    const previousPosition = await thumbEl.getLocation();
 
     slideToggleEl.click();
 
-    let position = await thumbEl.getLocation();
+    const position = await thumbEl.getLocation();
 
     expect(position.x).not.toBe(previousPosition.x);
-
-    await browser.wait(ExpectedConditions.not(
-      ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))));
   });
 
   it('should toggle the slide-toggle on space key', () => {
-    let inputEl = getInput();
+    const inputEl = getInput();
 
     expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked');
 

e2e/components/tabs-e2e.spec.ts

@@ -51,17 +51,11 @@ describe('tabs', () => {
       pressKeys(right);
       expect(await getFocusStates(tabLabels)).toEqual([false, false, true]);
 
-      pressKeys(right);
-      expect(await getFocusStates(tabLabels)).toEqual([false, false, true]);
-
       pressKeys(left);
       expect(await getFocusStates(tabLabels)).toEqual([false, true, false]);
 
       pressKeys(left);
       expect(await getFocusStates(tabLabels)).toEqual([true, false, false]);
-
-      pressKeys(left);
-      expect(await getFocusStates(tabLabels)).toEqual([true, false, false]);
     });
   });
 });

guides/creating-a-custom-form-field-control.md

@@ -159,31 +159,31 @@ private _placeholder: string;
 
 #### `ngControl`
 
-This property allows the form field control to specify the `@angular/forms` control that is bound to this component. Since we haven't set up our component to act as a `ControlValueAccessor`, we'll just set this to `null` in our component. 
+This property allows the form field control to specify the `@angular/forms` control that is bound to this component. Since we haven't set up our component to act as a `ControlValueAccessor`, we'll just set this to `null` in our component.
 
 ```ts
 ngControl: NgControl = null;
 ```
 
-It is likely you will want to implement `ControlValueAccessor` so that your component can work with `formControl` and `ngModel`. If you do implement `ControlValueAccessor` you will need to get a reference to the `NgControl` associated with your control and make it publicly available. 
+It is likely you will want to implement `ControlValueAccessor` so that your component can work with `formControl` and `ngModel`. If you do implement `ControlValueAccessor` you will need to get a reference to the `NgControl` associated with your control and make it publicly available.
 
 The easy way is to add it as a public property to your constructor and let dependency injection handle it:
 
 ```ts
 constructor(
-  ..., 
+  ...,
   @Optional() @Self() public ngControl: NgControl,
   ...,
 ) { }
 ```
 
-Note that if your component implements `ControlValueAccessor`, it may already be set up to provide `NG_VALUE_ACCESSOR` (in the `providers` part of the component's decorator, or possibly in a module declaration). If so you may get a *cannot instantiate cyclic dependency* error. 
+Note that if your component implements `ControlValueAccessor`, it may already be set up to provide `NG_VALUE_ACCESSOR` (in the `providers` part of the component's decorator, or possibly in a module declaration). If so you may get a *cannot instantiate cyclic dependency* error.
 
 To resolve this, remove the `NG_VALUE_ACCESSOR` provider and instead set the value accessor directly:
 
 ```ts
 constructor(
-  ..., 
+  ...,
   @Optional() @Self() public ngControl: NgControl,
   ...,
 ) {
@@ -207,7 +207,7 @@ need to remember to emit on the `stateChanges` stream so change detection can ha
 ```ts
 focused = false;
 
-constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef) {
+constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef<HTMLElement>) {
   ...
   fm.monitor(elRef.nativeElement, true).subscribe(origin => {
     this.focused = !!origin;

guides/getting-started.md

@@ -3,50 +3,45 @@ For help getting started with a new Angular app, check out the
 
 For existing apps, follow these steps to begin using Angular Material.
 
-### Step 1: Install Angular Material and Angular CDK
+### Step 1: Install Angular Material, Angular CDK and Angular Animations
 
 You can use either the npm or yarn command-line tool to install packages. Use whichever is appropriate for your project in the examples below.
 
 #### NPM
 ```bash
-npm install --save @angular/material @angular/cdk
+npm install --save @angular/material @angular/cdk @angular/animations
 ```
 #### Yarn
 ```bash
-yarn add @angular/material @angular/cdk
+yarn add @angular/material @angular/cdk @angular/animations
 ```
 
 
-#### Alternative: Snapshot Build
+#### Alternative 1: Snapshot Build
 
 A snapshot build with the latest changes from master is also available. Note that this snapshot
 build should not be considered stable and may break between releases.
 
 #### NPM
 ```bash
-npm install --save angular/material2-builds angular/cdk-builds
+npm install --save angular/material2-builds angular/cdk-builds angular/animations-builds
 ```
 
 #### Yarn
 ```bash
-yarn add angular/material2-builds angular/cdk-builds
+yarn add angular/material2-builds angular/cdk-builds angular/animations-builds
 ```
+#### Alternative 2: Angular Devkit 6+
 
-### Step 2: Animations
+Using the Angular CLI `ng add` command will update your Angular project with the correct dependencies, perform configuration changes and execute initialization code. 
 
-Some Material components depend on the Angular animations module in order to be able to do
-more advanced transitions. If you want these animations to work in your app, you have to
-install the `@angular/animations` module and include the `BrowserAnimationsModule` in your app.
-
-#### NPM
 ```bash
-npm install --save @angular/animations
+ng add @angular/material
 ```
 
-#### Yarn
-```bash
-yarn add @angular/animations
-```
+### Step 2: Configure animations
+
+Once the animations package is installed, import `BrowserAnimationsModule` into your application to enable animations support.
 
 ```ts
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@@ -59,7 +54,7 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 export class PizzaPartyAppModule { }
 ```
 
-If you don't want to add another dependency to your project, you can use the `NoopAnimationsModule`.
+Alternatively, you can disable animations by importing `NoopAnimationsModule`.
 
 ```ts
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';

guides/theming.md

@@ -16,7 +16,7 @@ a theme consists of:
 In Angular Material, all theme styles are generated _statically_ at build-time so that your
 app doesn't have to spend cycles generating theme styles on startup.
 
-[1]: https://material.google.com/style/color.html#color-color-palette
+[1]: https://material.io/archive/guidelines/style/color.html#color-color-palette
 
 ### Using a pre-built theme
 Angular Material comes prepackaged with several pre-built theme css files. These theme files also
@@ -94,7 +94,7 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-
 You only need this single Sass file; you do not need to use Sass to style the rest of your app.
 
 If you are using the Angular CLI, support for compiling Sass to css is built-in; you only have to
-add a new entry to the `"styles"` list in `angular-cli.json` pointing to the theme
+add a new entry to the `"styles"` list in `angular.json` pointing to the theme
 file (e.g., `unicorn-app-theme.scss`).
 
 If you're not using the Angular CLI, you can use any existing Sass tooling to build the file (such