build: test remaining packages with bazel (#13844)

* Sets up Bazel build and testing for the `cdk-experimental`, `material-experimental` and `material-moment-adapter` package.

Author: devversion

.circleci/config.yml

@@ -83,8 +83,8 @@ jobs:
       - *copy_bazel_config
 
       # TODO(jelbourn): Update this command to run all tests if the Bazel issues have been fixed.
-      - run: bazel build src/cdk/... src/lib/...
-      - run: bazel test src/cdk/... src/lib/...
+      - run: bazel build src/...
+      - run: bazel test src/...
 
       - *save_cache
 

src/cdk-experimental/BUILD.bazel

@@ -1,16 +1,15 @@
 package(default_visibility=["//visibility:public"])
-load("@angular//:index.bzl", "ng_module", "ng_package")
-load("//:packages.bzl", "CDK_EXPERIMENTAL_PACKAGES", "CDK_EXPERIMENTAL_TARGETS", "CDK_TARGETS", "ROLLUP_GLOBALS", "VERSION_PLACEHOLDER_REPLACEMENTS")
 
-# Export the CDK tsconfig so that subpackages can reference it directly.
-exports_files(["tsconfig-build.json"])
+load("@angular//:index.bzl", "ng_package")
+load("//tools:defaults.bzl", "ng_module")
+load("//:packages.bzl", "CDK_EXPERIMENTAL_PACKAGES", "CDK_EXPERIMENTAL_TARGETS",
+  "CDK_TARGETS", "ROLLUP_GLOBALS", "VERSION_PLACEHOLDER_REPLACEMENTS")
 
 ng_module(
   name = "cdk-experimental",
   srcs = glob(["*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/cdk-experimental",
   deps = ["//src/cdk-experimental/%s" % p for p in CDK_EXPERIMENTAL_PACKAGES],
-  tsconfig = "//src/lib:tsconfig-build.json",
 )
 
 ng_package(
@@ -20,5 +19,8 @@ ng_package(
   globals = ROLLUP_GLOBALS,
   replacements = VERSION_PLACEHOLDER_REPLACEMENTS,
   deps = CDK_EXPERIMENTAL_TARGETS,
-  tags = ["publish"],
+  # TODO(devversion): Use the npm package for publishing. Right now this is disabled because
+  # we build using AOT for serving & testing, but the `ng_package` rule should not include factory
+  # files.
+  tags = ["manual"],
 )

src/cdk-experimental/dialog/BUILD.bazel

@@ -1,21 +1,25 @@
 package(default_visibility=["//visibility:public"])
-load("@angular//:index.bzl", "ng_module")
-load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
 
+load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "dialog",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/cdk-experimental/dialog",
   assets = [":dialog-container.css"] + glob(["**/*.html"]),
   deps = [
+    "@angular//packages/animations",
+    "@angular//packages/common",
+    "@angular//packages/core",
+    "@rxjs",
+    "@rxjs//operators",
     "//src/cdk/a11y",
     "//src/cdk/bidi",
     "//src/cdk/keycodes",
     "//src/cdk/overlay",
     "//src/cdk/portal",
   ],
-  tsconfig = "//src/lib:tsconfig-build.json",
 )
 
 # TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup
@@ -29,3 +33,24 @@ sass_binary(
   src = "dialog-container.scss",
 )
 
+ng_test_library(
+  name = "dialog_test_sources",
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    "@angular//packages/common",
+    "@angular//packages/common/testing",
+    "@angular//packages/platform-browser",
+    "@angular//packages/platform-browser/animations",
+    "//src/cdk/bidi",
+    "//src/cdk/keycodes",
+    "//src/cdk/overlay",
+    "//src/cdk/testing",
+    ":dialog",
+  ],
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = [":dialog_test_sources"]
+)
+

src/cdk-experimental/dialog/typings.d.ts

@@ -1,45 +1,30 @@
 package(default_visibility=["//visibility:public"])
-load("@angular//:index.bzl", "ng_module")
-load("@build_bazel_rules_typescript//:defs.bzl", "ts_library", "ts_web_test")
 
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
   name = "scrolling",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/cdk-experimental/scrolling",
   deps = [
+    "@angular//packages/core",
+    "@rxjs",
     "//src/cdk/coercion",
     "//src/cdk/collections",
     "//src/cdk/scrolling",
-    "@rxjs",
   ],
-  tsconfig = "//src/cdk-experimental:tsconfig-build.json",
 )
 
-ts_library(
+ng_test_library(
   name = "scrolling_test_sources",
-  testonly = 1,
   srcs = glob(["**/*.spec.ts"]),
   deps = [
-    ":scrolling",
     "//src/cdk/scrolling",
-    "//src/cdk/testing",
-    "@rxjs",
+    ":scrolling",
   ],
-  tsconfig = "//src/cdk-experimental:tsconfig-build.json",
 )
 
-ts_web_test(
+ng_web_test_suite(
   name = "unit_tests",
-  bootstrap = [
-    "//:web_test_bootstrap_scripts",
-  ],
-  # Do not sort
-  deps = [
-    "//:tslib_bundle",
-    "//:angular_bundles",
-    "//:angular_test_bundles",
-    "//test:angular_test_init",
-    ":scrolling_test_sources",
-  ],
+  deps = [":scrolling_test_sources"]
 )

src/cdk-experimental/scrolling/BUILD.bazel

@@ -1,16 +1,14 @@
 package(default_visibility=["//visibility:public"])
-load("@angular//:index.bzl", "ng_module", "ng_package")
-load("//:packages.bzl", "CDK_TARGETS", "ROLLUP_GLOBALS", "VERSION_PLACEHOLDER_REPLACEMENTS")
 
+load("@angular//:index.bzl", "ng_package")
+load("//tools:defaults.bzl", "ng_module")
+load("//:packages.bzl", "CDK_TARGETS", "ROLLUP_GLOBALS", "VERSION_PLACEHOLDER_REPLACEMENTS")
 
 ng_module(
   name = "material-experimental",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material-experimental",
-  deps = [
-    "//src/lib:material",
-  ] + CDK_TARGETS,
-  tsconfig = "//src/lib:tsconfig-build.json",
+  deps = ["//src/lib:material"] + CDK_TARGETS,
 )
 
 ng_package(
@@ -20,5 +18,6 @@ ng_package(
   globals = ROLLUP_GLOBALS,
   replacements = VERSION_PLACEHOLDER_REPLACEMENTS,
   deps = [":material-experimental"],
-  tags = ["publish"],
+  # TODO(devversion): re-enable once we have set up the proper compiler for the ng_package
+  tags = ["manual"],
 )

src/material-experimental/BUILD.bazel

@@ -1,15 +1,21 @@
 package(default_visibility=["//visibility:public"])
-load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
+
 load("@angular//:index.bzl", "ng_package")
+load("//tools:defaults.bzl", "ng_module")
 load("//:packages.bzl", "ROLLUP_GLOBALS", "VERSION_PLACEHOLDER_REPLACEMENTS")
 
-
-ts_library(
+ng_module(
   name = "material-moment-adapter",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material-moment-adapter",
-  deps = ["//src/lib:material"],
-  tsconfig = "//src/material-moment-adapter:tsconfig-build.json",
+  deps = [
+    "@npm//moment",
+    "//src/lib:material"
+  ],
+  # Explicitly specify the tsconfig that is also used by Gulp. We need to explicitly use this
+  # tsconfig because in order to import Moment with TypeScript, we need some special options
+  # enabled.
+  tsconfig = ":tsconfig-build.json",
 )
 
 ng_package(
@@ -19,5 +25,6 @@ ng_package(
   globals = ROLLUP_GLOBALS,
   replacements = VERSION_PLACEHOLDER_REPLACEMENTS,
   deps = [":material-moment-adapter"],
-  tags = ["publish"],
+  # TODO(devversion): re-enable once we have set up the proper compiler for the ng_package
+  tags = ["manual"],
 )

src/material-moment-adapter/BUILD.bazel

@@ -7,21 +7,13 @@
  */
 
 import {NgModule} from '@angular/core';
-import {
-  DateAdapter,
-  MAT_DATE_LOCALE,
-  MAT_DATE_FORMATS
-} from '@angular/material';
-import {
-  MomentDateAdapter,
-  MAT_MOMENT_DATE_ADAPTER_OPTIONS
-} from './moment-date-adapter';
+import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material';
+import {MAT_MOMENT_DATE_ADAPTER_OPTIONS, MomentDateAdapter} from './moment-date-adapter';
 import {MAT_MOMENT_DATE_FORMATS} from './moment-date-formats';
 
 export * from './moment-date-adapter';
 export * from './moment-date-formats';
 
-
 @NgModule({
   providers: [
     {