build: convert examples package to bazel (#28733)

* build: switch example e2e tests to bazel

* No longer builds the example e2e tests using "tsc". The examples are now built with Bazel and can therefore be built with Ivy by using the `--define=compile=aot` switch.
* No longer runs the example e2e tests using the protractor CLI. example e2e tests are executed with the Bazel protractor rule and can therefore run incrementally.

* test: disable failing ivy example e2e tests

*Note for patch branch:* We had to disable more examples in Ivy because
the patch branch does not contain all Ivy/ngtsc fixes.

packages/examples/forms/ts/formBuilder/e2e_test/form_builder_spec.ts

@@ -7,7 +7,7 @@
  */
 
 import {ElementArrayFinder, browser, by, element} from 'protractor';
-import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+import {verifyNoBrowserErrors} from '../../../../test-utils';
 
 describe('formBuilder example', () => {
   afterEach(verifyNoBrowserErrors);
@@ -15,7 +15,7 @@ describe('formBuilder example', () => {
   let paragraphs: ElementArrayFinder;
 
   beforeEach(() => {
-    browser.get('/forms/ts/formBuilder/index.html');
+    browser.get('/formBuilder');
     inputs = element.all(by.css('input'));
     paragraphs = element.all(by.css('p'));
   });

packages/examples/forms/ts/formBuilder/module.ts

@@ -9,12 +9,14 @@
 import {NgModule} from '@angular/core';
 import {ReactiveFormsModule} from '@angular/forms';
 import {BrowserModule} from '@angular/platform-browser';
-import {FormBuilderComp} from './form_builder_example';
+import {DisabledFormControlComponent, FormBuilderComp} from './form_builder_example';
 
 @NgModule({
   imports: [BrowserModule, ReactiveFormsModule],
-  declarations: [FormBuilderComp],
+  declarations: [FormBuilderComp, DisabledFormControlComponent],
   bootstrap: [FormBuilderComp]
 })
 export class AppModule {
 }
+
+export {FormBuilderComp as AppComponent};

packages/examples/forms/ts/nestedFormArray/e2e_test/nested_form_array_spec.ts

@@ -7,7 +7,7 @@
  */
 
 import {ElementArrayFinder, browser, by, element} from 'protractor';
-import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+import {verifyNoBrowserErrors} from '../../../../test-utils';
 
 describe('nestedFormArray example', () => {
   afterEach(verifyNoBrowserErrors);
@@ -15,7 +15,7 @@ describe('nestedFormArray example', () => {
   let buttons: ElementArrayFinder;
 
   beforeEach(() => {
-    browser.get('/forms/ts/nestedFormArray/index.html');
+    browser.get('/nestedFormArray');
     inputs = element.all(by.css('input'));
     buttons = element.all(by.css('button'));
   });

packages/examples/forms/ts/nestedFormArray/module.ts

@@ -18,3 +18,5 @@ import {NestedFormArray} from './nested_form_array_example';
 })
 export class AppModule {
 }
+
+export {NestedFormArray as AppComponent};

packages/examples/forms/ts/nestedFormGroup/e2e_test/nested_form_group_spec.ts

@@ -7,7 +7,7 @@
  */
 
 import {ElementFinder, browser, by, element} from 'protractor';
-import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+import {verifyNoBrowserErrors} from '../../../../test-utils';
 
 describe('nestedFormGroup example', () => {
   afterEach(verifyNoBrowserErrors);
@@ -16,7 +16,7 @@ describe('nestedFormGroup example', () => {
   let button: ElementFinder;
 
   beforeEach(() => {
-    browser.get('/forms/ts/nestedFormGroup/index.html');
+    browser.get('/nestedFormGroup');
     firstInput = element(by.css('[formControlName="first"]'));
     lastInput = element(by.css('[formControlName="last"]'));
     button = element(by.css('button:not([type="submit"])'));

packages/examples/forms/ts/nestedFormGroup/module.ts

@@ -18,3 +18,5 @@ import {NestedFormGroupComp} from './nested_form_group_example';
 })
 export class AppModule {
 }
+
+export {NestedFormGroupComp as AppComponent};

packages/examples/forms/ts/ngModelGroup/e2e_test/ng_model_group_spec.ts

@@ -7,7 +7,7 @@
  */
 
 import {ElementArrayFinder, browser, by, element} from 'protractor';
-import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+import {verifyNoBrowserErrors} from '../../../../test-utils';
 
 describe('ngModelGroup example', () => {
   afterEach(verifyNoBrowserErrors);
@@ -15,7 +15,7 @@ describe('ngModelGroup example', () => {
   let buttons: ElementArrayFinder;
 
   beforeEach(() => {
-    browser.get('/forms/ts/ngModelGroup/index.html');
+    browser.get('/ngModelGroup');
     inputs = element.all(by.css('input'));
     buttons = element.all(by.css('button'));
   });

packages/examples/forms/ts/ngModelGroup/module.ts

@@ -18,3 +18,5 @@ import {NgModelGroupComp} from './ng_model_group_example';
 })
 export class AppModule {
 }
+
+export {NgModelGroupComp as AppComponent};

packages/examples/forms/ts/radioButtons/e2e_test/radio_button_spec.ts

@@ -7,7 +7,7 @@
  */
 
 import {ElementArrayFinder, browser, by, element} from 'protractor';
-import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+import {verifyNoBrowserErrors} from '../../../../test-utils';
 
 describe('radioButtons example', () => {
   afterEach(verifyNoBrowserErrors);
@@ -15,7 +15,7 @@ describe('radioButtons example', () => {
   let paragraphs: ElementArrayFinder;
 
   beforeEach(() => {
-    browser.get('/forms/ts/radioButtons/index.html');
+    browser.get('/radioButtons');
     inputs = element.all(by.css('input'));
     paragraphs = element.all(by.css('p'));
   });

packages/examples/forms/ts/radioButtons/module.ts

@@ -18,3 +18,5 @@ import {RadioButtonComp} from './radio_button_example';
 })
 export class AppModule {
 }
+
+export {RadioButtonComp as AppComponent};

packages/examples/forms/ts/reactiveRadioButtons/e2e_test/reactive_radio_button_spec.ts

@@ -7,14 +7,14 @@
  */
 
 import {ElementArrayFinder, browser, by, element} from 'protractor';
-import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+import {verifyNoBrowserErrors} from '../../../../test-utils';
 
 describe('radioButtons example', () => {
   afterEach(verifyNoBrowserErrors);
   let inputs: ElementArrayFinder;
 
   beforeEach(() => {
-    browser.get('/forms/ts/reactiveRadioButtons/index.html');
+    browser.get('/reactiveRadioButtons');
     inputs = element.all(by.css('input'));
   });
 

packages/examples/forms/ts/reactiveRadioButtons/module.ts

@@ -18,3 +18,5 @@ import {ReactiveRadioButtonComp} from './reactive_radio_button_example';
 })
 export class AppModule {
 }
+
+export {ReactiveRadioButtonComp as AppComponent};

packages/examples/forms/ts/reactiveSelectControl/e2e_test/reactive_select_control_spec.ts

@@ -7,7 +7,7 @@
  */
 
 import {ElementArrayFinder, ElementFinder, browser, by, element} from 'protractor';
-import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+import {verifyNoBrowserErrors} from '../../../../test-utils';
 
 describe('reactiveSelectControl example', () => {
   afterEach(verifyNoBrowserErrors);
@@ -16,7 +16,7 @@ describe('reactiveSelectControl example', () => {
   let p: ElementFinder;
 
   beforeEach(() => {
-    browser.get('/forms/ts/reactiveSelectControl/index.html');
+    browser.get('/reactiveSelectControl');
     select = element(by.css('select'));
     options = element.all(by.css('option'));
     p = element(by.css('p'));

packages/examples/forms/ts/reactiveSelectControl/module.ts

@@ -18,3 +18,5 @@ import {ReactiveSelectComp} from './reactive_select_control_example';
 })
 export class AppModule {
 }
+
+export {ReactiveSelectComp as AppComponent};

packages/examples/forms/ts/selectControl/e2e_test/select_control_spec.ts

@@ -7,7 +7,7 @@
  */
 
 import {ElementArrayFinder, ElementFinder, browser, by, element} from 'protractor';
-import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+import {verifyNoBrowserErrors} from '../../../../test-utils';
 
 describe('selectControl example', () => {
   afterEach(verifyNoBrowserErrors);
@@ -16,7 +16,7 @@ describe('selectControl example', () => {
   let p: ElementFinder;
 
   beforeEach(() => {
-    browser.get('/forms/ts/selectControl/index.html');
+    browser.get('/selectControl');
     select = element(by.css('select'));
     options = element.all(by.css('option'));
     p = element(by.css('p'));

packages/examples/forms/ts/selectControl/module.ts

@@ -18,3 +18,5 @@ import {SelectControlComp} from './select_control_example';
 })
 export class AppModule {
 }
+
+export {SelectControlComp as AppComponent};

packages/examples/forms/ts/simpleForm/e2e_test/simple_form_spec.ts

@@ -7,7 +7,7 @@
  */
 
 import {ElementArrayFinder, browser, by, element} from 'protractor';
-import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+import {verifyNoBrowserErrors} from '../../../../test-utils';
 
 describe('simpleForm example', () => {
   afterEach(verifyNoBrowserErrors);
@@ -15,7 +15,7 @@ describe('simpleForm example', () => {
   let paragraphs: ElementArrayFinder;
 
   beforeEach(() => {
-    browser.get('/forms/ts/simpleForm/index.html');
+    browser.get('/simpleForm');
     inputs = element.all(by.css('input'));
     paragraphs = element.all(by.css('p'));
   });

packages/examples/forms/ts/simpleForm/module.ts

@@ -18,3 +18,5 @@ import {SimpleFormComp} from './simple_form_example';
 })
 export class AppModule {
 }
+
+export {SimpleFormComp as AppComponent};

packages/examples/forms/ts/simpleFormControl/e2e_test/simple_form_control_spec.ts

@@ -7,7 +7,7 @@
  */
 
 import {ElementFinder, browser, by, element} from 'protractor';
-import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+import {verifyNoBrowserErrors} from '../../../../test-utils';
 
 describe('simpleFormControl example', () => {
   afterEach(verifyNoBrowserErrors);
@@ -18,7 +18,7 @@ describe('simpleFormControl example', () => {
     let statusP: ElementFinder;
 
     beforeEach(() => {
-      browser.get('/forms/ts/simpleFormControl/index.html');
+      browser.get('/simpleFormControl');
       input = element(by.css('input'));
       valueP = element(by.css('p:first-of-type'));
       statusP = element(by.css('p:last-of-type'));

packages/examples/forms/ts/simpleFormControl/module.ts

@@ -18,3 +18,5 @@ import {SimpleFormControl} from './simple_form_control_example';
 })
 export class AppModule {
 }
+
+export {SimpleFormControl as AppComponent};

packages/examples/forms/ts/simpleFormGroup/e2e_test/simple_form_group_spec.ts

@@ -7,7 +7,7 @@
  */
 
 import {ElementFinder, browser, by, element} from 'protractor';
-import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+import {verifyNoBrowserErrors} from '../../../../test-utils';
 
 describe('formControlName example', () => {
   afterEach(verifyNoBrowserErrors);
@@ -17,7 +17,7 @@ describe('formControlName example', () => {
     let lastInput: ElementFinder;
 
     beforeEach(() => {
-      browser.get('/forms/ts/simpleFormGroup/index.html');
+      browser.get('/simpleFormGroup');
       firstInput = element(by.css('[formControlName="first"]'));
       lastInput = element(by.css('[formControlName="last"]'));
     });

packages/examples/forms/ts/simpleFormGroup/module.ts

@@ -18,3 +18,5 @@ import {SimpleFormGroup} from './simple_form_group_example';
 })
 export class AppModule {
 }
+
+export {SimpleFormGroup as AppComponent};

packages/examples/forms/ts/simpleNgModel/e2e_test/simple_ng_model_spec.ts

@@ -6,40 +6,45 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {fixmeIvy} from '@angular/private/testing';
 import {ElementArrayFinder, ElementFinder, browser, by, element} from 'protractor';
-import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
 
-describe('simpleNgModel example', () => {
-  afterEach(verifyNoBrowserErrors);
-  let input: ElementFinder;
-  let paragraphs: ElementArrayFinder;
-  let button: ElementFinder;
+import {verifyNoBrowserErrors} from '../../../../test-utils';
 
-  beforeEach(() => {
-    browser.get('/forms/ts/simpleNgModel/index.html');
-    input = element(by.css('input'));
-    paragraphs = element.all(by.css('p'));
-    button = element(by.css('button'));
-  });
+fixmeIvy(
+    'unkown; verifyNoBrowserErrors fails due to "ExpressionChangedAfterItHasBeenCheckedError"' +
+    'Debug by running "yarn bazel run //packages/examples/forms:devserver --define=compile=aot')
+    .describe('simpleNgModel example', () => {
+      afterEach(verifyNoBrowserErrors);
+      let input: ElementFinder;
+      let paragraphs: ElementArrayFinder;
+      let button: ElementFinder;
 
-  it('should update the domain model as you type', () => {
-    input.click();
-    input.sendKeys('Carson');
+      beforeEach(() => {
+        browser.get('/simpleNgModel');
+        input = element(by.css('input'));
+        paragraphs = element.all(by.css('p'));
+        button = element(by.css('button'));
+      });
 
-    expect(paragraphs.get(0).getText()).toEqual('Value: Carson');
-  });
+      it('should update the domain model as you type', () => {
+        input.click();
+        input.sendKeys('Carson');
 
-  it('should report the validity correctly', () => {
-    expect(paragraphs.get(1).getText()).toEqual('Valid: false');
-    input.click();
-    input.sendKeys('a');
+        expect(paragraphs.get(0).getText()).toEqual('Value: Carson');
+      });
 
-    expect(paragraphs.get(1).getText()).toEqual('Valid: true');
-  });
+      it('should report the validity correctly', () => {
+        expect(paragraphs.get(1).getText()).toEqual('Valid: false');
+        input.click();
+        input.sendKeys('a');
 
-  it('should set the value by changing the domain model', () => {
-    button.click();
-    expect(input.getAttribute('value')).toEqual('Nancy');
-  });
+        expect(paragraphs.get(1).getText()).toEqual('Valid: true');
+      });
 
-});
+      it('should set the value by changing the domain model', () => {
+        button.click();
+        expect(input.getAttribute('value')).toEqual('Nancy');
+      });
+
+    });

packages/examples/forms/ts/simpleNgModel/module.ts

@@ -18,3 +18,5 @@ import {SimpleNgModelComp} from './simple_ng_model_example';
 })
 export class AppModule {
 }
+
+export {SimpleNgModelComp as AppComponent};