build: use genrule to generate example module

Since we no longer use NGC for generating the package output
of the examples, we can start using the genrule for the `ExampleModule` again.

This means that we can fully remove the example module tasks from gulp. Additionally
renames the `material-examples` package to `examples` and removes the `module.ts`
workaround for the examples since we do not need a flat module index file with ngtsc.

Author: devversion

.circleci/config.yml

@@ -356,7 +356,7 @@ jobs:
 
       # TODO(devversion): Ideally the "build_release_packages" job should build all packages with
       # Bazel, but for now we mix up the Gulp and bazel setup, so we need to build the package here.
-      - run: bazel build src/material-examples:npm_package --config=release
+      - run: bazel build src/examples:npm_package --config=release
 
       - run: ./scripts/circleci/publish-snapshots.sh
 

.github/CODEOWNERS

@@ -121,7 +121,7 @@
 
 # Docs examples & guides
 /guides/**                                         @jelbourn
-/src/material-examples/**                          @jelbourn
+/src/examples/**                                   @jelbourn
 
 # Accessibility demos
 /src/a11y-demo/**/*                                @jelbourn

.gitignore

@@ -6,10 +6,6 @@
 /deploy
 /bazel-out
 
-# Example module file will be auto-generated.
-# TODO(devversion): re-add the example-module once angular#30259 is fixed.
-# /src/material-examples/example-module.ts
-
 # dependencies
 node_modules
 /bower_components

rollup-globals.bzl

@@ -105,13 +105,13 @@ create_globals(
 # 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.
-create_globals("material-examples/cdk", CDK_ENTRYPOINTS)
-create_globals("material-examples/cdk-experimental", CDK_EXPERIMENTAL_ENTRYPOINTS)
+create_globals("examples/cdk", CDK_ENTRYPOINTS)
+create_globals("examples/cdk-experimental", CDK_EXPERIMENTAL_ENTRYPOINTS)
 create_globals(
-    "material-examples/material",
+    "examples/material",
     MATERIAL_ENTRYPOINTS + MATERIAL_TESTING_ENTRYPOINTS,
 )
 create_globals(
-    "material-examples/material-experimental",
+    "examples/material-experimental",
     MATERIAL_EXPERIMENTAL_ENTRYPOINTS + MATERIAL_EXPERIMENTAL_TESTING_ENTRYPOINTS,
 )

scripts/deploy/publish-docs-content.sh

@@ -23,8 +23,8 @@ docsDistPath="${projectPath}/dist/docs"
 # Path to the cloned docs-content repository.
 docsContentPath="${projectPath}/tmp/material2-docs-content"
 
-# Path to the release output of the Bazel "@angular/material-examples" NPM package.
-examplesPackagePath="$(bazel info bazel-bin)/src/material-examples/npm_package"
+# Path to the release output of the Bazel "@angular/examples" NPM package.
+examplesPackagePath="$(bazel info bazel-bin)/src/examples/npm_package"
 
 # Git clone URL for the material2-docs-content repository.
 docsContentRepoUrl="https://github.com/angular/material2-docs-content"

src/dev-app/example/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
     srcs = glob(["**/*.ts"]),
     deps = [
         "//src/cdk/coercion",
-        "//src/material-examples:examples",
+        "//src/examples",
         "//src/material/expansion",
         "@npm//@angular/elements",
     ],

src/dev-app/example/example-list.ts

@@ -7,7 +7,7 @@
  */
 
 import {Component, Input} from '@angular/core';
-import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
+import {EXAMPLE_COMPONENTS} from '@angular/examples';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 
 /** Displays a set of material examples in a mat-accordion. */

src/dev-app/example/example-module.ts

@@ -9,14 +9,14 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatExpansionModule} from '@angular/material/expansion';
-import {ExampleModule as ExampleDataModule} from '@angular/material-examples';
+import {ExampleModule as DocsExampleModule} from '@angular/examples';
 import {Example} from './example';
 
 
 import {ExampleList} from './example-list';
 
 @NgModule({
-  imports: [CommonModule, ExampleDataModule, MatExpansionModule],
+  imports: [CommonModule, MatExpansionModule, DocsExampleModule],
   declarations: [Example, ExampleList],
   exports: [Example, ExampleList]
 })

src/dev-app/example/example.ts

@@ -8,7 +8,7 @@
 
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {Component, ElementRef, Injector, Input, OnInit} from '@angular/core';
-import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
+import {EXAMPLE_COMPONENTS} from '@angular/examples';
 import {createCustomElement} from '@angular/elements';
 
 @Component({

src/dev-app/examples-page/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
     srcs = glob(["**/*.ts"]),
     deps = [
         "//src/dev-app/example",
-        "//src/material-examples:examples",
+        "//src/examples",
         "@npm//@angular/router",
     ],
 )

src/dev-app/examples-page/examples-page.ts

@@ -7,7 +7,7 @@
  */
 
 import {Component} from '@angular/core';
-import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
+import {EXAMPLE_COMPONENTS} from '@angular/examples';
 
 /** Renders all material examples listed in the generated EXAMPLE_COMPONENTS. */
 @Component({

src/dev-app/popover-edit/BUILD.bazel

@@ -7,8 +7,8 @@ ng_module(
     srcs = glob(["**/*.ts"]),
     deps = [
         "//src/dev-app/example",
-        "//src/material-examples/cdk-experimental/popover-edit",
-        "//src/material-examples/material-experimental/popover-edit",
+        "//src/examples/cdk-experimental/popover-edit",
+        "//src/examples/material-experimental/popover-edit",
         "@npm//@angular/forms",
         "@npm//@angular/router",
     ],

src/dev-app/popover-edit/popover-edit-demo-module.ts

@@ -7,13 +7,9 @@
  */
 
 import {NgModule} from '@angular/core';
+import {CdkPopoverEditExamplesModule} from '@angular/examples/cdk-experimental/popover-edit';
+import {PopoverEditExamplesModule} from '@angular/examples/material-experimental/popover-edit';
 import {FormsModule} from '@angular/forms';
-import {
-  CdkPopoverEditExamplesModule
-} from '@angular/material-examples/cdk-experimental/popover-edit/module';
-import {
-  PopoverEditExamplesModule
-} from '@angular/material-examples/material-experimental/popover-edit/module';
 import {RouterModule} from '@angular/router';
 import {PopoverEditDemo} from './popover-edit-demo';
 

src/dev-app/ripple/BUILD.bazel

@@ -11,7 +11,7 @@ ng_module(
     ],
     deps = [
         "//src/dev-app/example",
-        "//src/material-examples/material/core",
+        "//src/examples/material/core",
         "//src/material/button",
         "//src/material/checkbox",
         "//src/material/icon",

src/dev-app/ripple/ripple-demo-module.ts

@@ -7,8 +7,8 @@
  */
 
 import {NgModule} from '@angular/core';
+import {CoreExamplesModule} from '@angular/examples/material/core';
 import {FormsModule} from '@angular/forms';
-import {CoreExamplesModule} from '@angular/material-examples/material/core/module';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatIconModule} from '@angular/material/icon';

src/dev-app/system-config-tmpl.js

@@ -32,9 +32,9 @@ var packagesConfig = {};
 // Configure all primary entry-points.
 configureEntryPoint('cdk');
 configureEntryPoint('cdk-experimental');
+configureEntryPoint('examples');
 configureEntryPoint('material');
 configureEntryPoint('material-experimental');
-configureEntryPoint('material-examples');
 configureEntryPoint('material-moment-adapter');
 
 // Configure all secondary entry-points.
@@ -56,7 +56,7 @@ configureEntryPoint('youtube-player');
 /** Configures the specified package, its entry-point and its examples. */
 function configureEntryPoint(pkgName, entryPoint) {
   var name = entryPoint ? pkgName + '/' + entryPoint : pkgName;
-  var examplesName = 'material-examples/' + name;
+  var examplesName = 'examples/' + name;
 
   pathMapping['@angular/' + name] = srcRunfilePath + '/' + name;
   pathMapping['@angular/' + examplesName] = srcRunfilePath + '/' + examplesName;

src/dev-app/table/BUILD.bazel

@@ -8,8 +8,8 @@ ng_module(
     assets = ["table-demo.html"],
     deps = [
         "//src/dev-app/example",
-        "//src/material-examples/cdk/table",
-        "//src/material-examples/material/table",
+        "//src/examples/cdk/table",
+        "//src/examples/material/table",
         "@npm//@angular/router",
     ],
 )

src/dev-app/table/table-demo-module.ts

@@ -7,9 +7,9 @@
  */
 
 import {NgModule} from '@angular/core';
+import {CdkTableExamplesModule} from '@angular/examples/cdk/table';
+import {TableExamplesModule} from '@angular/examples/material/table';
 import {RouterModule} from '@angular/router';
-import {CdkTableExamplesModule} from '@angular/material-examples/cdk/table/module';
-import {TableExamplesModule} from '@angular/material-examples/material/table/module';
 import {TableDemo} from './table-demo';
 
 @NgModule({

src/dev-app/tabs/BUILD.bazel

@@ -8,7 +8,7 @@ ng_module(
     assets = ["tabs-demo.html"],
     deps = [
         "//src/dev-app/example",
-        "//src/material-examples/material/tabs",
+        "//src/examples/material/tabs",
         "//src/material/tabs",
         "@npm//@angular/router",
     ],

src/dev-app/tabs/tabs-demo-module.ts

@@ -7,9 +7,9 @@
  */
 
 import {NgModule} from '@angular/core';
+import {TabGroupExamplesModule} from '@angular/examples/material/tabs';
 import {MatTabsModule} from '@angular/material/tabs';
 import {RouterModule} from '@angular/router';
-import {TabGroupExamplesModule} from '@angular/material-examples/material/tabs/module';
 import {TabsDemo} from './tabs-demo';
 
 @NgModule({

src/dev-app/tooltip/BUILD.bazel

@@ -8,7 +8,7 @@ ng_module(
     assets = ["tooltip-demo.html"],
     deps = [
         "//src/dev-app/example",
-        "//src/material-examples/material/tooltip",
+        "//src/examples/material/tooltip",
         "@npm//@angular/router",
     ],
 )

src/dev-app/tooltip/tooltip-demo-module.ts

@@ -7,8 +7,8 @@
  */
 
 import {NgModule} from '@angular/core';
+import {TooltipExamplesModule} from '@angular/examples/material/tooltip';
 import {RouterModule} from '@angular/router';
-import {TooltipExamplesModule} from '@angular/material-examples/material/tooltip/module';
 import {TooltipDemo} from './tooltip-demo';
 
 @NgModule({

src/dev-app/tree/BUILD.bazel

@@ -16,8 +16,8 @@ ng_module(
     ],
     deps = [
         "//src/cdk/tree",
-        "//src/material-examples/cdk/tree",
-        "//src/material-examples/material/tree",
+        "//src/examples/cdk/tree",
+        "//src/examples/material/tree",
         "//src/material/button",
         "//src/material/checkbox",
         "//src/material/expansion",

src/dev-app/tree/tree-demo-module.ts

@@ -8,6 +8,8 @@
 import {CdkTreeModule} from '@angular/cdk/tree';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
+import {CdkTreeExamplesModule} from '@angular/examples/cdk/tree';
+import {TreeExamplesModule} from '@angular/examples/material/tree';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCheckboxModule} from '@angular/material/checkbox';
@@ -18,8 +20,6 @@ import {MatInputModule} from '@angular/material/input';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatTreeModule} from '@angular/material/tree';
 import {RouterModule} from '@angular/router';
-import {CdkTreeExamplesModule} from '@angular/material-examples/cdk/tree/module';
-import {TreeExamplesModule} from '@angular/material-examples/material/tree/module';
 
 import {ChecklistNestedTreeDemo} from './checklist-tree-demo/checklist-nested-tree-demo';
 import {ChecklistTreeDemo} from './checklist-tree-demo/checklist-tree-demo';

src/dev-app/tsconfig.json

@@ -15,8 +15,8 @@
       "@angular/cdk-experimental": ["../cdk-experimental"],
       "@angular/material-moment-adapter": ["../material-moment-adapter/public-api.ts"],
       "@angular/google-maps": ["../google-maps"],
-      "@angular/material-examples": ["../material-examples"],
-      "@angular/material-examples/*": ["../material-examples/*"]
+      "@angular/examples": ["../examples"],
+      "@angular/examples/*": ["../examples/*"]
     }
   },
   "include": ["./**/*.ts"]

src/e2e-app/BUILD.bazel

@@ -31,7 +31,7 @@ ng_module(
         "//src/cdk/overlay",
         "//src/cdk/scrolling",
         "//src/cdk/testing/tests:test_components",
-        "//src/material-examples:examples",
+        "//src/examples",
         "//src/material-experimental/mdc-button",
         "//src/material-experimental/mdc-card",
         "//src/material-experimental/mdc-checkbox",

src/e2e-app/example-viewer/example-list-viewer.component.ts

@@ -8,7 +8,7 @@
 
 import {Component, Input} from '@angular/core';
 
-/** Loads an example component from `@angular/material-examples`. */
+/** Loads an example component from `@angular/examples`. */
 @Component({
   selector: 'example-list-viewer',
   template: `

src/e2e-app/example-viewer/example-viewer-module.ts

@@ -8,7 +8,7 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {ExampleModule as ExampleDataModule} from '@angular/material-examples';
+import {ExampleModule as ExampleDataModule} from '@angular/examples';
 import {ExampleListViewer} from './example-list-viewer.component';
 import {ExampleViewer} from './example-viewer';
 

src/e2e-app/example-viewer/example-viewer.ts

@@ -8,9 +8,9 @@
 
 import {Component, ElementRef, Injector, Input, OnInit} from '@angular/core';
 import {createCustomElement} from '@angular/elements';
-import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
+import {EXAMPLE_COMPONENTS} from '@angular/examples';
 
-/** Loads an example component from `@angular/material-examples` */
+/** Loads an example component from `@angular/examples` */
 @Component({
   selector: 'example-viewer',
   template: `

src/e2e-app/tsconfig.json

@@ -12,7 +12,7 @@
       "@angular/cdk-experimental/*": ["../cdk-experimental/*"],
       "@angular/cdk-experimental": ["../cdk-experimental/"],
       "@angular/material-moment-adapter": ["../material-moment-adapter/"],
-      "@angular/material-examples": ["../material-examples/"]
+      "@angular/examples": ["../examples/"]
     }
   },
   "include": ["./**/*.ts"]