fix: bazel support for downstream apps (#13836)

Author: gregmagolan

WORKSPACE

@@ -17,13 +17,15 @@ http_archive(
 # Add Angular source and Bazel rules.
 http_archive(
   name = "angular",
-  url = "https://github.com/angular/angular/archive/7.0.1.zip",
-  strip_prefix = "angular-7.0.1",
+  url = "https://github.com/angular/angular/archive/7.0.2.zip",
+  strip_prefix = "angular-7.0.2",
 )
 
 # Add RxJS as repository because those are needed in order to build Angular from source.
 # Also we cannot refer to the RxJS version from the node modules because self-managed
 # node modules are not guaranteed to be installed.
+# TODO(gmagolan): remove this once rxjs ships with an named UMD bundle and we
+# are no longer building it from source.
 http_archive(
   name = "rxjs",
   url = "https://registry.yarnpkg.com/rxjs/-/rxjs-6.3.3.tgz",
@@ -72,12 +74,14 @@ node_repositories(
   yarn_version = "1.9.4",
 )
 
-# Use Bazel managed node modules. See more below: 
-# https://github.com/bazelbuild/rules_nodejs#bazel-managed-vs-self-managed-dependencies
+# @npm is temporarily needed to build @rxjs from source since its ts_library
+# targets will depend on an @npm workspace by default.
+# TODO(gmagolan): remove this once rxjs ships with an named UMD bundle and we
+# are no longer building it from source.
 yarn_install(
   name = "npm",
-  package_json = "//:package.json",
-  yarn_lock = "//:yarn.lock",
+  package_json = "//tools:npm/package.json",
+  yarn_lock = "//tools:npm/yarn.lock",
 )
 
 # Setup TypeScript Bazel workspace
@@ -88,6 +92,9 @@ ts_setup_workspace()
 load("@angular//:index.bzl", "ng_setup_workspace")
 ng_setup_workspace()
 
+load("@angular_material//:index.bzl", "angular_material_setup_workspace")
+angular_material_setup_workspace()
+
 # Setup Go toolchain (required for Bazel web testing rules)
 load("@io_bazel_rules_go//go:def.bzl", "go_rules_dependencies", "go_register_toolchains")
 go_rules_dependencies()

index.bzl

@@ -0,0 +1,14 @@
+# Copyright Google LLC All Rights Reserved.
+#
+# 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
+"""Public API surface is re-exported here.
+
+This API is exported for users building Angular Material from source in
+downstream projects.
+"""
+
+load("//tools:angular_material_setup_workspace.bzl",
+    _angular_material_setup_workspace = "angular_material_setup_workspace")
+
+angular_material_setup_workspace = _angular_material_setup_workspace

package.json

@@ -29,13 +29,13 @@
   "version": "7.0.2",
   "requiredAngularVersion": ">=7.0.0",
   "dependencies": {
-    "@angular/animations": "^7.0.0",
-    "@angular/common": "^7.0.0",
-    "@angular/compiler": "^7.0.0",
-    "@angular/core": "^7.0.0",
-    "@angular/elements": "^7.0.0",
-    "@angular/forms": "^7.0.0",
-    "@angular/platform-browser": "^7.0.0",
+    "@angular/animations": "^7.0.2",
+    "@angular/common": "^7.0.2",
+    "@angular/compiler": "^7.0.2",
+    "@angular/core": "^7.0.2",
+    "@angular/elements": "^7.0.2",
+    "@angular/forms": "^7.0.2",
+    "@angular/platform-browser": "^7.0.2",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.4.1",
     "rxjs": "^6.3.3",
@@ -47,13 +47,13 @@
   "devDependencies": {
     "@angular-devkit/core": "^7.0.1",
     "@angular-devkit/schematics": "^7.0.1",
-    "@angular/bazel": "7.0.1",
-    "@angular/compiler-cli": "^7.0.0",
-    "@angular/http": "^7.0.0",
-    "@angular/platform-browser-dynamic": "^7.0.0",
-    "@angular/platform-server": "^7.0.0",
-    "@angular/router": "^7.0.0",
-    "@angular/upgrade": "^7.0.0",
+    "@angular/bazel": "^7.0.2",
+    "@angular/compiler-cli": "^7.0.2",
+    "@angular/http": "^7.0.2",
+    "@angular/platform-browser-dynamic": "^7.0.2",
+    "@angular/platform-server": "^7.0.2",
+    "@angular/router": "^7.0.2",
+    "@angular/upgrade": "^7.0.2",
     "@bazel/ibazel": "0.6.0",
     "@bazel/karma": "0.20.3",
     "@bazel/typescript": "0.20.3",

src/cdk/coercion/BUILD.bazel

@@ -6,14 +6,14 @@ ts_library(
   name = "coercion",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/cdk/coercion",
-  deps = ["@npm//tslib"],
+  deps = ["@matdeps//tslib"],
 )
 
 ts_library(
   name = "coercion_test_sources",
   srcs = glob(["**/*.spec.ts"]),
   deps = [
-    "@npm//@types/jasmine",
+    "@matdeps//@types/jasmine",
     ":coercion"
   ],
   testonly = 1,

src/cdk/collections/BUILD.bazel

@@ -16,7 +16,7 @@ ts_library(
   name = "collections_test_sources",
   srcs = glob(["**/*.spec.ts"]),
   deps = [
-    "@npm//@types/jasmine",
+    "@matdeps//@types/jasmine",
     ":collections"
   ],
   testonly = 1,

src/cdk/keycodes/BUILD.bazel

@@ -6,5 +6,5 @@ ts_library(
   name = "keycodes",
   module_name = "@angular/cdk/keycodes",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
-  deps = ["@npm//tslib"],
+  deps = ["@matdeps//tslib"],
 )

src/cdk/schematics/BUILD.bazel

@@ -1,9 +1,8 @@
 package(default_visibility = ["//visibility:public"])
 
-load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
 load("@build_bazel_rules_nodejs//:defs.bzl", "npm_package")
 load("//:packages.bzl", "VERSION_PLACEHOLDER_REPLACEMENTS")
-load("//tools:defaults.bzl", "jasmine_node_test")
+load("//tools:defaults.bzl", "jasmine_node_test", "ts_library")
 
 # TODO(devversion): remove when https://github.com/bazelbuild/rules_nodejs/issues/352 is fixed
 exports_files(["#bazel_workaround.txt"])
@@ -24,15 +23,15 @@ ts_library(
   ]),
   tsconfig = ":tsconfig.json",
   deps = [
-    "@npm//@schematics/angular",
-    "@npm//@angular-devkit/schematics",
+    "@matdeps//@schematics/angular",
+    "@matdeps//@angular-devkit/schematics",
     # TODO(devversion): Only include jasmine for test sources (See: tsconfig types).
-    "@npm//@types/jasmine",
-    "@npm//@types/node",
-    "@npm//glob",
-    "@npm//parse5",
-    "@npm//tslint",
-    "@npm//typescript"
+    "@matdeps//@types/jasmine",
+    "@matdeps//@types/node",
+    "@matdeps//glob",
+    "@matdeps//parse5",
+    "@matdeps//tslint",
+    "@matdeps//typescript"
   ],
 )
 
@@ -57,13 +56,13 @@ ts_library(
   srcs = glob(["**/*.spec.ts"], exclude = ["**/files/**/*.spec.ts"]),
   deps = [
     "//src/cdk/schematics/testing",
-    "@npm//@schematics/angular",
-    "@npm//@angular-devkit/schematics",
-    "@npm//@types/jasmine",
-    "@npm//@types/node",
-    "@npm//mock-fs",
-    "@npm//tslint",
-    "@npm//typescript",
+    "@matdeps//@schematics/angular",
+    "@matdeps//@angular-devkit/schematics",
+    "@matdeps//@types/jasmine",
+    "@matdeps//@types/node",
+    "@matdeps//mock-fs",
+    "@matdeps//tslint",
+    "@matdeps//typescript",
     ":schematics",
   ],
   tsconfig = ":tsconfig.json",

src/cdk/schematics/testing/BUILD.bazel

@@ -7,12 +7,12 @@ ts_library(
   module_name = "@angular/cdk/schematics/testing",
   srcs = glob(["**/*.ts"]),
   deps = [
-    "@npm//@angular-devkit/core",
-    "@npm//@angular-devkit/schematics",
-    "@npm//@schematics/angular",
-    "@npm//@types/node",
-    "@npm//@types/fs-extra",
-    "@npm//fs-extra",
-    "@npm//rxjs",
+    "@matdeps//@angular-devkit/core",
+    "@matdeps//@angular-devkit/schematics",
+    "@matdeps//@schematics/angular",
+    "@matdeps//@types/node",
+    "@matdeps//@types/fs-extra",
+    "@matdeps//fs-extra",
+    "@matdeps//rxjs",
   ],
 )

src/lib/form-field/BUILD.bazel

@@ -10,10 +10,10 @@ ng_module(
   assets = [
     ":form-field.css",
     ":form-field-fill.css",
+    ":form-field-input.css",
     ":form-field-legacy.css",
     ":form-field-outline.css",
     ":form-field-standard.css",
-    "//src/lib/input:input.css"
   ] + glob(["**/*.html"]),
   deps = [
     "@angular//packages/animations",
@@ -49,6 +49,12 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
+sass_binary(
+  name = "form_field_input_scss",
+  src = "form-field-input.scss",
+  deps = ["//src/lib/core:core_scss_lib"],
+)
+
 sass_binary(
   name = "form_field_legacy_scss",
   src = "form-field-legacy.scss",

src/lib/input/input.scss src/lib/form-field/form-field-input.scss

@@ -99,16 +99,16 @@ export const MAT_FORM_FIELD_DEFAULT_OPTIONS =
   selector: 'mat-form-field',
   exportAs: 'matFormField',
   templateUrl: 'form-field.html',
-  // MatInput is a directive and can't have styles, so we need to include its styles here.
-  // The MatInput styles are fairly minimal so it shouldn't be a big deal for people who
-  // aren't using MatInput.
+  // MatInput is a directive and can't have styles, so we need to include its styles here
+  // in form-field-input.css. The MatInput styles are fairly minimal so it shouldn't be a
+  // big deal for people who aren't using MatInput.
   styleUrls: [
     'form-field.css',
     'form-field-fill.css',
+    'form-field-input.css',
     'form-field-legacy.css',
     'form-field-outline.css',
     'form-field-standard.css',
-    '../input/input.css',
   ],
   animations: [matFormFieldAnimations.transitionMessages],
   host: {

src/lib/form-field/form-field.ts

@@ -7,9 +7,7 @@ ng_module(
   name = "input",
   srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
   module_name = "@angular/material/input",
-  assets = [
-    ":input.css",
-  ] + glob(["**/*.html"]),
+  assets = glob(["**/*.html"]),
   deps = [
     "@angular//packages/common",
     "@angular//packages/core",
@@ -29,12 +27,6 @@ filegroup(
   srcs = glob(["**/_*.scss"]),
 )
 
-sass_binary(
-  name = "input_scss",
-  src = "input.scss",
-  deps = ["//src/lib/core:core_scss_lib"],
-)
-
 sass_library(
   name = "theme",
   srcs = glob(["**/*-theme.scss"]),

src/lib/input/BUILD.bazel

@@ -1,9 +1,8 @@
 package(default_visibility = ["//visibility:public"])
 
-load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
 load("@build_bazel_rules_nodejs//:defs.bzl", "npm_package")
 load("//:packages.bzl", "VERSION_PLACEHOLDER_REPLACEMENTS")
-load("//tools:defaults.bzl", "jasmine_node_test")
+load("//tools:defaults.bzl", "jasmine_node_test", "ts_library")
 
 filegroup(
   name = "schematics_assets",
@@ -20,13 +19,13 @@ ts_library(
   ]),
   deps = [
     "//src/cdk/schematics",
-    "@npm//@angular-devkit/schematics",
-    "@npm//@schematics/angular",
+    "@matdeps//@angular-devkit/schematics",
+    "@matdeps//@schematics/angular",
     # TODO(devversion): Only include jasmine for test sources (See: tsconfig types).
-    "@npm//@types/jasmine",
-    "@npm//@types/node",
-    "@npm//tslint",
-    "@npm//typescript",
+    "@matdeps//@types/jasmine",
+    "@matdeps//@types/node",
+    "@matdeps//tslint",
+    "@matdeps//typescript",
   ],
   tsconfig = ":tsconfig.json",
 )
@@ -54,10 +53,10 @@ ts_library(
     ":schematics",
     "//src/cdk/schematics",
     "//src/cdk/schematics/testing",
-    "@npm//@schematics/angular",
-    "@npm//@angular-devkit/schematics",
-    "@npm//@types/jasmine",
-    "@npm//@types/node",
+    "@matdeps//@schematics/angular",
+    "@matdeps//@angular-devkit/schematics",
+    "@matdeps//@types/jasmine",
+    "@matdeps//@types/node",
   ],
   tsconfig = ":tsconfig.json",
   testonly = True,

src/lib/schematics/BUILD.bazel

@@ -10,7 +10,7 @@ ng_module(
   module_name = "@angular/material-moment-adapter",
   deps = [
     "@angular//packages/core",
-    "@npm//moment",
+    "@matdeps//moment",
     "//src/lib/core"
   ],
   # Explicitly specify the tsconfig that is also used by Gulp. We need to explicitly use this

src/material-moment-adapter/BUILD.bazel

@@ -9,7 +9,7 @@ ts_library(
   deps = [
     "@angular//packages/core/testing",
     "@angular//packages/platform-browser-dynamic/testing",
-    "@npm//@types/jasmine",
+    "@matdeps//@types/jasmine",
   ],
   # This file *must* end with "spec" in order for ts_web_test to load it.
   srcs = ["angular-test-init-spec.ts"],

test/BUILD.bazel

@@ -1,14 +1,14 @@
 package(default_visibility=["//visibility:public"])
-load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
+load("//tools:defaults.bzl", "ts_library")
 load("@build_bazel_rules_nodejs//:defs.bzl", "nodejs_binary")
 
 
 ts_library(
   name = "sass_bundle_lib",
   srcs = ["sass_bundle.ts"],
   deps = [
-    "@npm//@types/node",
-    "@npm//scss-bundle",
+    "@matdeps//@types/node",
+    "@matdeps//scss-bundle",
   ],
   tsconfig = "bazel-tools-tsconfig.json",
 )
@@ -17,7 +17,7 @@ ts_library(
 nodejs_binary(
   name = "sass_bundle",
   data = [
-   "@npm//scss-bundle",
+   "@matdeps//scss-bundle",
     ":sass_bundle_lib",
   ],
   entry_point = "angular_material/tools/sass_bundle.js",

tools/BUILD.bazel

@@ -0,0 +1,25 @@
+# Copyright Google LLC All Rights Reserved.
+#
+# 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
+"""Install Angular Material source dependencies"""
+
+load("@build_bazel_rules_nodejs//:defs.bzl", "yarn_install")
+
+def angular_material_setup_workspace():
+  """This repository rule should be called from your WORKSPACE file.
+
+  It creates some additional Bazel external repositories that are used internally
+  to build Angular Material
+  """
+  # Use Bazel managed node modules. See more below: 
+  # https://github.com/bazelbuild/rules_nodejs#bazel-managed-vs-self-managed-dependencies
+  # Note: The repository_rule name is `@matdeps` so it does not conflict with the `@npm` repository
+  # name downstream when building Angular Material from source. In the future when Angular + Bazel
+  # users can build using the @angular/material npm bundles (depends on Ivy) this can be changed
+  # to `@npm`.
+  yarn_install(
+    name = "matdeps",
+    package_json = "@angular_material//:package.json",
+    yarn_lock = "@angular_material//:yarn.lock",
+  )