build: examples not working in dev app (#17166)

Fixes a couple of issues related to examples in the dev app:
1. The path mappings for all the new example entry points (e.g. `@angular/material-examples/material/button`) weren't being configured in the System config which meant that any page that consumes any of the examples would break. These changes make it so that whenever we configure a new entry point we automatically configure its examples.
2. The `popover-edit` examples were placed under the stable `cdk` and `material` example packages which is incorrect, because `popover-edit` itself is still experimental. These changes add new `cdk-experimental` and `material-experimental` packages under `material-examples` for consistency with the rest of the repo and so that we don't end up accidentally publishing these examples.

Author: crisbeto

packages.bzl

@@ -207,11 +207,19 @@ ROLLUP_GLOBALS.update({
 # 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
+    for p in CDK_PACKAGES
+})
+ROLLUP_GLOBALS.update({
+    "@angular/material-examples/cdk-experimental/%s" % p: "ng.materialExamples.cdkExperimental.%s" % p
+    for p in 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
+    for p in MATERIAL_PACKAGES
+})
+ROLLUP_GLOBALS.update({
+    "@angular/material-examples/material-experimental/%s" % p: "ng.materialExamples.materialExperimental.%s" % p
+    for p in MATERIAL_EXPERIMENTAL_PACKAGES
 })
 
 # UMD bundles for Angular packages and subpackages we depend on for development and testing.

src/dev-app/system-config.js

@@ -102,16 +102,15 @@ MATERIAL_PACKAGES.forEach(function(pkgName) {
 configureEntryPoint('google-maps');
 configureEntryPoint('youtube-player');
 
-/** Configures the specified package and its entry-point. */
+/** Configures the specified package, its entry-point and its examples. */
 function configureEntryPoint(pkgName, entryPoint) {
-  if (entryPoint === undefined) {
-    pathMapping['@angular/' + pkgName] = srcRunfilePath + '/' + pkgName;
-    packagesConfig[srcRunfilePath + '/' + pkgName] = {main: 'index.js'};
-  } else {
-    pathMapping['@angular/' + pkgName + '/' + entryPoint] =
-        srcRunfilePath + '/' + pkgName + '/' + entryPoint;
-    packagesConfig[srcRunfilePath + '/' + pkgName + '/' + entryPoint] = {main: 'index.js'};
-  }
+  var name = entryPoint ? pkgName + '/' + entryPoint : pkgName;
+  var examplesName = 'material-examples/' + name;
+
+  pathMapping['@angular/' + name] = srcRunfilePath + '/' + name;
+  pathMapping['@angular/' + examplesName] = srcRunfilePath + '/' + examplesName;
+  packagesConfig[srcRunfilePath + '/' + name] =
+      packagesConfig[srcRunfilePath + '/' + examplesName] = {main: 'index.js'};
 }
 
 var map = Object.assign({

src/material-examples/BUILD.bazel

@@ -11,7 +11,7 @@ EXAMPLE_PACKAGES = [
     "//src/material-examples/cdk/a11y",
     "//src/material-examples/cdk/drag-drop",
     "//src/material-examples/cdk/platform",
-    "//src/material-examples/cdk/popover-edit",
+    "//src/material-examples/cdk-experimental/popover-edit",
     "//src/material-examples/cdk/portal",
     "//src/material-examples/cdk/scrolling",
     "//src/material-examples/cdk/stepper",
@@ -38,7 +38,7 @@ EXAMPLE_PACKAGES = [
     "//src/material-examples/material/list",
     "//src/material-examples/material/menu",
     "//src/material-examples/material/paginator",
-    "//src/material-examples/material/popover-edit",
+    "//src/material-examples/material-experimental/popover-edit",
     "//src/material-examples/material/progress-bar",
     "//src/material-examples/material/progress-spinner",
     "//src/material-examples/material/radio",

src/material-examples/cdk/popover-edit/BUILD.bazel renamed to src/material-examples/cdk-experimental/popover-edit/BUILD.bazel

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

src/material-examples/cdk/popover-edit/cdk-popover-edit-cdk-table-flex/cdk-popover-edit-cdk-table-flex-example.css renamed to src/material-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table-flex/cdk-popover-edit-cdk-table-flex-example.css

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