build: build and test examples using bazel

.circleci/config.yml

@@ -397,7 +397,6 @@ jobs:
       - *define_env_vars
       - *yarn_install
       - run: yarn tsc -p packages
-      - run: yarn tsc -p packages/examples
       - run: yarn tsc -p modules
       - run: yarn karma start ./karma-js.conf.js --single-run --browsers=ChromeNoSandbox
 
@@ -424,7 +423,6 @@ jobs:
           command: ./scripts/saucelabs/start-tunnel.sh
           background: true
       - run: yarn tsc -p packages
-      - run: yarn tsc -p packages/examples
       - run: yarn tsc -p modules
         # Waits for the Saucelabs tunnel to be ready. This ensures that we don't run tests
         # too early without Saucelabs not being ready.
@@ -452,10 +450,9 @@ jobs:
       - run: ./scripts/build-e2e-tests.sh --use-existing-packages-dist
       - run:
           name: Starting servers for e2e tests
-          command: yarn gulp serve serve-examples
+          command: yarn gulp serve
           background: true
       - run: NODE_PATH=$NODE_PATH:./dist/all yarn protractor ./protractor-e2e.conf.js --bundles=true
-      - run: NODE_PATH=$NODE_PATH:./dist/all yarn protractor ./protractor-examples-e2e.conf.js --bundles=true
       - run: NODE_PATH=$NODE_PATH:./dist/all yarn protractor ./protractor-perf.conf.js --bundles=true --dryrun
 
   legacy-misc-tests:

gulpfile.js

@@ -39,7 +39,6 @@ gulp.task('source-map-test', loadTask('source-map-test'));
 gulp.task('tools:build', loadTask('tools-build'));
 gulp.task('check-cycle', loadTask('check-cycle'));
 gulp.task('serve', loadTask('serve', 'default'));
-gulp.task('serve-examples', loadTask('serve', 'examples'));
 gulp.task('changelog', loadTask('changelog'));
 gulp.task('check-env', () => {/* this is a noop because the env test ran already above */});
 gulp.task('cldr:extract', loadTask('cldr', 'extract'));

package.json

@@ -38,12 +38,14 @@
     "@bazel/karma": "~0.22.1",
     "@bazel/typescript": "~0.22.1",
     "@schematics/angular": "^7.0.4",
+    "@types/angular": "^1.6.47",
     "@types/chokidar": "1.7.3",
     "@types/convert-source-map": "^1.5.1",
     "@types/diff": "^3.2.2",
     "@types/fs-extra": "4.0.2",
     "@types/hammerjs": "2.0.35",
     "@types/jasmine": "^2.8.8",
+    "@types/jasminewd2": "^2.0.6",
     "@types/mock-fs": "^3.6.30",
     "@types/node": "^10.9.4",
     "@types/selenium-webdriver": "3.0.7",
@@ -98,9 +100,7 @@
     "@bazel/bazel": "~0.22.0",
     "@bazel/buildifier": "^0.19.2",
     "@bazel/ibazel": "~0.9.0",
-    "@types/angular": "^1.6.47",
     "@types/base64-js": "1.2.5",
-    "@types/jasminewd2": "^2.0.4",
     "@types/minimist": "^1.2.0",
     "@types/systemjs": "0.19.32",
     "browserstacktunnel-wrapper": "2.0.1",

packages/examples/BUILD.bazel

@@ -0,0 +1,4 @@
+exports_files([
+    "index.html",
+    "tsconfig-e2e.json",
+])

packages/examples/README.md

@@ -7,28 +7,15 @@ behavior) just like an Angular application developer would write.
 # Running the examples
 
 ```
-# # execute the following command only when framework code changes
-./build.sh
+# Serving individual examples (e.g. common)
+yarn bazel run //packages/examples/common:devserver
 
-# run when test change
-./packages/examples/build.sh  
-
-# start server
-$(npm bin)/gulp serve-examples
+# "core" examples
+yarn bazel run //packages/examples/core:devserver
 ```
 
-navigate to [http://localhost:8001](http://localhost:8001)
-
 # Running the tests
 
 ```
- # run only when framework code changes
-./build.sh
-
-# run to compile tests and run them
-./packages/examples/test.sh
-```
-
-NOTE: sometimes the http server does not exit properly and it retains the `8001` port.
- in such a case you can use `lsof -i:8001` to see which process it is and then use `kill` 
- to remove it. (Or in single command: `lsof -i:8001 -t | xargs kill`)
+yarn bazel test //packages/examples/...
+```

packages/examples/common/BUILD.bazel

@@ -0,0 +1,63 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//packages/bazel:index.bzl", "protractor_web_test_suite")
+load("//tools:defaults.bzl", "ng_module", "ts_library")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
+
+ng_module(
+    name = "common_examples",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*_spec.ts"],
+    ),
+    # TODO: FW-1004 Type checking is currently not complete.
+    type_check = False,
+    deps = [
+        "//packages/common",
+        "//packages/core",
+        "//packages/platform-browser",
+        "//packages/platform-browser-dynamic",
+        "//packages/router",
+        "@rxjs",
+    ],
+)
+
+ts_library(
+    name = "common_tests_lib",
+    testonly = True,
+    srcs = glob(["**/*_spec.ts"]),
+    tsconfig = "//packages/examples:tsconfig-e2e.json",
+    deps = [
+        "//packages/examples/test-utils",
+        "//packages/private/testing",
+        "@ngdeps//@types/jasminewd2",
+        "@ngdeps//protractor",
+    ],
+)
+
+ts_devserver(
+    name = "devserver",
+    entry_module = "@angular/examples/common/main",
+    index_html = "//packages/examples:index.html",
+    port = 4200,
+    scripts = ["@ngdeps//node_modules/tslib:tslib.js"],
+    static_files = [
+        "@ngdeps//node_modules/zone.js:dist/zone.js",
+        # This is needed because the "ngComponentOutlet" test uses the JIT compiler
+        # and needs to be able to read metadata at runtime.
+        "@ngdeps//node_modules/reflect-metadata:Reflect.js",
+    ],
+    deps = [":common_examples"],
+)
+
+protractor_web_test_suite(
+    name = "protractor_tests",
+    data = ["//packages/bazel/src/protractor/utils"],
+    on_prepare = ":start-server.js",
+    server = ":devserver",
+    deps = [
+        ":common_tests_lib",
+        "@ngdeps//protractor",
+        "@ngdeps//selenium-webdriver",
+    ],
+)

packages/examples/common/location/ts/e2e_test/location_component_spec.ts

@@ -8,7 +8,7 @@
 
 import {$, browser, by, element, protractor} from 'protractor';
 
-import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+import {verifyNoBrowserErrors} from '../../../../test-utils';
 
 
 function waitForElement(selector: string) {
@@ -21,10 +21,9 @@ describe('Location', () => {
   afterEach(verifyNoBrowserErrors);
 
   it('should verify paths', () => {
-    browser.get('/common/location/ts/#/bar/baz');
+    browser.get('/location/#/bar/baz');
     waitForElement('hash-location');
-    expect(element.all(by.css('path-location code')).get(0).getText())
-        .toEqual('/common/location/ts');
+    expect(element.all(by.css('path-location code')).get(0).getText()).toEqual('/location');
     expect(element.all(by.css('hash-location code')).get(0).getText()).toEqual('/bar/baz');
   });
 });

packages/examples/common/location/ts/module.ts

@@ -17,14 +17,13 @@ import {PathLocationComponent} from './path_location_component';
   selector: 'example-app',
   template: `<hash-location></hash-location><path-location></path-location>`
 })
-export class ExampleAppComponent {
+export class AppComponent {
 }
 
 @NgModule({
-  declarations: [ExampleAppComponent, PathLocationComponent, HashLocationComponent],
+  declarations: [AppComponent, PathLocationComponent, HashLocationComponent],
   providers: [{provide: APP_BASE_HREF, useValue: '/'}],
   imports: [BrowserModule],
-  bootstrap: [ExampleAppComponent]
 })
 export class AppModule {
 }

packages/examples/_common/main-dynamic.ts → packages/examples/common/main.ts

@@ -5,9 +5,8 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
-import * as mod from './module';
+import {TestsAppModuleNgFactory} from './test_module.ngfactory';
 
-if (mod.AppModule) {
-  platformBrowserDynamic().bootstrapModule(mod.AppModule);
-}
+platformBrowserDynamic().bootstrapModuleFactory(TestsAppModuleNgFactory);