build: fix docs-content release output (#17125)

* build: add workaround for invalid imports generation in bazel

Applies a workaround for the invalid imports generation issue
in the Bazel `ng_module` rule. Read more about this here:

https://hackmd.io/@devversion/ryCOwIKIS.

* build: fix missing metadata for example modules

Fixes the missing metadata for example modules. This happens because
we built the individual example modules without a flat module bundle. Not
building with a flat module bundle means that metadata will not be generated
in the `ng_module` bazel rule.

* build: workaround for creating ng_package on windows

Workaround for angular/angular#32603

* build: fix invalid rollup globals for material experimental package

* build: do not generate flat module bundles for testonly targets

This is necessary as `ng_module` rules with a `module_name` either
need a `public-api.ts` or `module.ts` file.

* build: fix npm package for google-maps

Apparently the `google-maps` package has the same problem
as the `material-examples` package where the metadata for
the Bazel sub-packages is not incldued in the entry-point of
the `@angular/google-maps` entry-point. There are two solutions
to make it work with Angular package format:

* Making the packages generate flat module bundles and including
them as secondary entry-points
* Only having one Bazel package so that metadata will be included
in the flat module bundle.

I chose the latter as the `google-maps` package is still very small
and doesn't have a lot of dependencies, so in terms of speed it is
even faster to have on package. Also it seems like there were never
plans to have secondary entry-points for that package.

*Note*: we need this commit as part of the docs-content fix because
the google-maps package runs on CI and will fail as it misses various
`public-api.ts` files for the flat module bundles.

* chore: fix various examples missing button module

Looks like a few examples were missing the `MatButtonModule` after
the restructuring of the examples. I've noticed these while manually
testing the Bazel release output in the docs app.

* build: do not build examples package through gulp

We no longer can build the examples package through gulp. This is
because we did not add individual `tsconfig-build.json` files to
the nested entry-points when we did the restructuring of the examples.

This now breaks as the primary entry-point uses module name
imports as of the docs-content metadata fix. It's okay to not build the
examples package through gulp in the `8.2.x` branch as we don't
need it in the gulp setup anyway.

Author: devversion

WORKSPACE

@@ -42,7 +42,9 @@ yarn_install(
     # are executed in the Bazel sandbox.
     data = [
         "//:angular-tsconfig.json",
+        "//:tools/bazel/flat_module_factory_resolution.patch",
         "//:tools/bazel/postinstall-patches.js",
+        "//:tools/bazel/rollup_windows_arguments.patch",
         "//:tools/npm/check-npm.js",
     ],
     package_json = "//:package.json",

packages.bzl

@@ -145,13 +145,26 @@ ROLLUP_GLOBALS.update({
     for p in MATERIAL_PACKAGES
 })
 
-# Rollup globals for material experiemental subpackages, e.g., {"@angular/material-experimental/list": "ng.materialExperimental.list"}
+# Rollup globals for material experimental subpackages, e.g.,
+# {"@angular/material-experimental/list": "ng.materialExperimental.list"}
 ROLLUP_GLOBALS.update({
-    "@angular/material-experiemntal/%s" % p: "ng.materialExperimental.%s" % p
+    "@angular/material-experimental/%s" % p: "ng.materialExperimental.%s" % p
     for p in MATERIAL_EXPERIMENTAL_PACKAGES
 })
 
-# UMD bundles for Angular packages and subpackges we depend on for development and testing.
+# Rollup globals the examples package. Since individual examples are
+# grouped by package and component, the primary entry-point imports
+# from entry-points which should be treated as external imports.
+ROLLUP_GLOBALS.update({
+    "@angular/material-examples/cdk/%s" % p: "ng.materialExamples.cdk.%s" % p
+    for p in CDK_PACKAGES + CDK_EXPERIMENTAL_PACKAGES
+})
+ROLLUP_GLOBALS.update({
+    "@angular/material-examples/material/%s" % p: "ng.materialExamples.material.%s" % p
+    for p in MATERIAL_PACKAGES + MATERIAL_EXPERIMENTAL_PACKAGES
+})
+
+# UMD bundles for Angular packages and subpackages we depend on for development and testing.
 ANGULAR_LIBRARY_UMDS = [
     "@npm//:node_modules/@angular/animations/bundles/animations-browser.umd.js",
     "@npm//:node_modules/@angular/animations/bundles/animations.umd.js",

src/cdk-experimental/testing/tests/BUILD.bazel

@@ -4,6 +4,7 @@ load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_module", "ng_test_librar
 
 ng_module(
     name = "test_components",
+    testonly = True,
     srcs = glob(
         ["**/*.ts"],
         exclude = [
@@ -12,7 +13,6 @@ ng_module(
         ],
     ),
     assets = glob(["**/*.html"]),
-    module_name = "@angular/cdk-experimental/testing/tests",
     deps = [
         "//src/cdk/keycodes",
         "@npm//@angular/forms",

src/e2e-app/BUILD.bazel

@@ -13,6 +13,7 @@ exports_files([
 
 ng_module(
     name = "e2e-app",
+    testonly = True,
     srcs = glob(
         ["**/*.ts"],
         exclude = ["test-util/**"],
@@ -87,6 +88,7 @@ sass_binary(
 
 ts_devserver(
     name = "devserver",
+    testonly = True,
     # Root paths can be used simplify the loading of files from external Bazel repositories
     # (such as the Bazel managed deps repository called "npm")
     additional_root_paths = [

src/e2e-app/component-harness/component-harness-e2e-module.ts

@@ -5,7 +5,7 @@
  * 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 {TestComponentsModule} from '@angular/cdk-experimental/testing/tests';
+import {TestComponentsModule} from '../../cdk-experimental/testing/tests';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';

src/google-maps/BUILD.bazel

@@ -1,18 +1,16 @@
 package(default_visibility = ["//visibility:public"])
 
 load("//:packages.bzl", "ROLLUP_GLOBALS")
-load("//tools:defaults.bzl", "ng_module", "ng_package")
+load("//tools:defaults.bzl", "ng_module", "ng_package", "ng_test_library", "ng_web_test_suite")
 
 ng_module(
     name = "google-maps",
     srcs = glob(
-        ["*.ts"],
+        ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
     module_name = "@angular/google-maps",
     deps = [
-        "//src/google-maps/google-map",
-        "//src/google-maps/map-marker",
         "@npm//@angular/core",
         "@npm//@types/googlemaps",
     ],
@@ -32,3 +30,21 @@ filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
 )
+
+ng_test_library(
+    name = "unit_test_sources",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["**/*.e2e.spec.ts"],
+    ),
+    deps = [
+        ":google-maps",
+        "//src/google-maps/testing",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_test_sources"],
+)

src/google-maps/google-map/BUILD.bazel

@@ -7,7 +7,7 @@ ts_library(
     testonly = 1,
     srcs = glob(["**/*.ts"]),
     deps = [
-        "//src/google-maps/google-map",
+        "//src/google-maps",
         "@npm//@types/googlemaps",
         "@npm//@types/jasmine",
     ],

src/google-maps/map-marker/BUILD.bazel

@@ -107,7 +107,7 @@ ng_package(
     entry_point = ":public-api.ts",
     globals = ROLLUP_GLOBALS,
     tags = ["docs-package"],
-    deps = [":examples"],
+    deps = [":examples"] + EXAMPLE_PACKAGES,
 )
 
 genrule(

src/google-maps/testing/BUILD.bazel

@@ -9,6 +9,7 @@ ng_module(
         "**/*.html",
         "**/*.css",
     ]),
+    module_name = "@angular/material-examples/cdk/a11y",
     deps = [
         "//src/cdk/a11y",
         "//src/material/select",

src/material-examples/BUILD.bazel

@@ -9,6 +9,8 @@ import {
 } from './focus-monitor-focus-via/focus-monitor-focus-via-example';
 import {FocusMonitorOverviewExample} from './focus-monitor-overview/focus-monitor-overview-example';
 
+export {FocusMonitorDirectivesExample, FocusMonitorFocusViaExample, FocusMonitorOverviewExample};
+
 const EXAMPLES = [
   FocusMonitorDirectivesExample,
   FocusMonitorFocusViaExample,
@@ -25,3 +27,4 @@ const EXAMPLES = [
 })
 export class CdkA11yExamplesModule {
 }
+

src/material-examples/cdk/a11y/BUILD.bazel

@@ -9,6 +9,7 @@ ng_module(
         "**/*.html",
         "**/*.css",
     ]),
+    module_name = "@angular/material-examples/cdk/drag-drop",
     deps = [
         "//src/cdk/drag-drop",
         "//src/cdk/overlay",

src/material-examples/cdk/a11y/module.ts

@@ -39,6 +39,25 @@ import {
 } from './cdk-drag-drop-root-element/cdk-drag-drop-root-element-example';
 import {CdkDragDropSortingExample} from './cdk-drag-drop-sorting/cdk-drag-drop-sorting-example';
 
+export {
+  CdkDragDropAxisLockExample,
+  CdkDragDropBoundaryExample,
+  CdkDragDropConnectedSortingExample,
+  CdkDragDropConnectedSortingGroupExample,
+  CdkDragDropCustomPlaceholderExample,
+  CdkDragDropCustomPreviewExample,
+  CdkDragDropDelayExample,
+  CdkDragDropDisabledExample,
+  CdkDragDropDisabledSortingExample,
+  CdkDragDropEnterPredicateExample,
+  CdkDragDropFreeDragPositionExample,
+  CdkDragDropHandleExample,
+  CdkDragDropHorizontalSortingExample,
+  CdkDragDropOverviewExample,
+  CdkDragDropRootElementExample,
+  CdkDragDropSortingExample,
+};
+
 const EXAMPLES = [
   CdkDragDropAxisLockExample,
   CdkDragDropBoundaryExample,

src/material-examples/cdk/drag-drop/BUILD.bazel

@@ -9,6 +9,7 @@ ng_module(
         "**/*.html",
         "**/*.css",
     ]),
+    module_name = "@angular/material-examples/cdk/platform",
     deps = [
         "//src/cdk/platform",
     ],

src/material-examples/cdk/drag-drop/module.ts

@@ -2,6 +2,8 @@ import {PlatformModule} from '@angular/cdk/platform';
 import {NgModule} from '@angular/core';
 import {CdkPlatformOverviewExample} from './cdk-platform-overview/cdk-platform-overview-example';
 
+export {CdkPlatformOverviewExample};
+
 const EXAMPLES = [CdkPlatformOverviewExample];
 
 @NgModule({

src/material-examples/cdk/platform/BUILD.bazel

@@ -9,6 +9,7 @@ ng_module(
         "**/*.html",
         "**/*.css",
     ]),
+    module_name = "@angular/material-examples/cdk/popover-edit",
     deps = [
         "//src/cdk-experimental/popover-edit",
         "//src/cdk/collections",

src/material-examples/cdk/platform/module.ts

@@ -3,22 +3,19 @@ import {CdkTableModule} from '@angular/cdk/table';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {
-  CdkPopoverEditCdkTableFlexExample
-} from './cdk-popover-edit-cdk-table-flex/cdk-popover-edit-cdk-table-flex-example';
-import {
-  CdkPopoverEditCdkTableExample
-} from './cdk-popover-edit-cdk-table/cdk-popover-edit-cdk-table-example';
-import {
-  CdkPopoverEditCellSpanVanillaTableExample
-} from
-    './cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example';
-import {
-  CdkPopoverEditTabOutVanillaTableExample
-} from './cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example';
-import {
+import {CdkPopoverEditCdkTableFlexExample} from './cdk-popover-edit-cdk-table-flex/cdk-popover-edit-cdk-table-flex-example';
+import {CdkPopoverEditCdkTableExample} from './cdk-popover-edit-cdk-table/cdk-popover-edit-cdk-table-example';
+import {CdkPopoverEditCellSpanVanillaTableExample} from './cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example';
+import {CdkPopoverEditTabOutVanillaTableExample} from './cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example';
+import {CdkPopoverEditVanillaTableExample} from './cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example';
+
+export {
+  CdkPopoverEditCdkTableFlexExample,
+  CdkPopoverEditCdkTableExample,
+  CdkPopoverEditCellSpanVanillaTableExample,
+  CdkPopoverEditTabOutVanillaTableExample,
   CdkPopoverEditVanillaTableExample
-} from './cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example';
+};
 
 const EXAMPLES = [
   CdkPopoverEditCdkTableExample,

src/material-examples/cdk/popover-edit/BUILD.bazel

@@ -9,6 +9,7 @@ ng_module(
         "**/*.html",
         "**/*.css",
     ]),
+    module_name = "@angular/material-examples/cdk/portal",
     deps = [
         "//src/cdk/portal",
     ],

src/material-examples/cdk/popover-edit/module.ts

@@ -5,6 +5,8 @@ import {
   ComponentPortalExample
 } from './cdk-portal-overview/cdk-portal-overview-example';
 
+export {CdkPortalOverviewExample, ComponentPortalExample};
+
 const EXAMPLES = [
   CdkPortalOverviewExample,
   ComponentPortalExample,

src/material-examples/cdk/portal/BUILD.bazel

@@ -9,6 +9,7 @@ ng_module(
         "**/*.html",
         "**/*.css",
     ]),
+    module_name = "@angular/material-examples/cdk/scrolling",
     deps = [
         "//src/cdk/scrolling",
     ],

src/material-examples/cdk/portal/module.ts

@@ -23,6 +23,17 @@ import {
   CdkVirtualScrollTemplateCacheExample
 } from './cdk-virtual-scroll-template-cache/cdk-virtual-scroll-template-cache-example';
 
+export {
+  CdkVirtualScrollContextExample,
+  CdkVirtualScrollCustomStrategyExample,
+  CdkVirtualScrollDataSourceExample,
+  CdkVirtualScrollDlExample,
+  CdkVirtualScrollFixedBufferExample,
+  CdkVirtualScrollHorizontalExample,
+  CdkVirtualScrollOverviewExample,
+  CdkVirtualScrollTemplateCacheExample,
+};
+
 const EXAMPLES = [
   CdkVirtualScrollContextExample,
   CdkVirtualScrollCustomStrategyExample,