build: do not ship load-example code to npm package [patch port]

src/components-examples/BUILD.bazel

@@ -4,7 +4,7 @@ load("//tools:defaults.bzl", "ng_module", "ng_package")
 load("//tools/highlight-files:index.bzl", "highlight_files")
 load("//tools/package-docs-content:index.bzl", "package_docs_content")
 
-EXAMPLE_PACKAGES = [
+ALL_EXAMPLES = [
     # TODO(devversion): try to have for each entry-point a bazel package so that
     # we can automate this using the "package.bzl" variables. Currently generated
     # with "bazel query 'kind("ng_module", //src/components-examples/...:*)' --output="label"
@@ -61,12 +61,12 @@ ng_module(
     name = "components-examples",
     srcs = glob(["*.ts"]) + [":example-module.ts"],
     module_name = "@angular/components-examples",
-    deps = EXAMPLE_PACKAGES,
+    deps = ALL_EXAMPLES,
 )
 
 filegroup(
     name = "example-source-files",
-    srcs = ["%s:source-files" % pkg for pkg in EXAMPLE_PACKAGES],
+    srcs = ["%s:source-files" % pkg for pkg in ALL_EXAMPLES],
 )
 
 highlight_files(
@@ -106,7 +106,7 @@ ng_package(
     data = [":docs-content"],
     entry_point = ":public-api.ts",
     tags = ["docs-package"],
-    deps = [":components-examples"] + EXAMPLE_PACKAGES,
+    deps = [":components-examples"] + ALL_EXAMPLES,
 )
 
 genrule(

src/components-examples/private/BUILD.bazel

@@ -0,0 +1,13 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "private",
+    srcs = glob(["*.ts"]),
+    module_name = "@angular/components-examples/private",
+    deps = [
+        "//src/components-examples",
+        "@npm//@angular/core",
+    ],
+)

src/components-examples/private/index.ts

@@ -0,0 +1 @@
+export * from './load-example';

src/components-examples/load-example.ts → src/components-examples/private/load-example.ts

@@ -1,22 +1,15 @@
-/**
- * @license
- * 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
- */
-
 import {ComponentFactory, Injector, NgModuleFactory, Type} from '@angular/core';
-import {EXAMPLE_COMPONENTS} from './example-module';
+import {EXAMPLE_COMPONENTS} from '../example-module';
 
 /** Asynchronously loads the specified example and returns its component factory. */
 export async function loadExampleFactory(name: string, injector: Injector)
     : Promise<ComponentFactory<any>> {
   const {componentName, module} = EXAMPLE_COMPONENTS[name];
+  const importSpecifier = `@angular/components-examples/${module.importSpecifier}`;
   // TODO(devversion): remove the NgFactory import when the `--config=view-engine` switch is gone.
   const [moduleFactoryExports, moduleExports] = await Promise.all([
-    import(module.importSpecifier + '/index.ngfactory'),
-    import(module.importSpecifier)
+    import(importSpecifier + '/index.ngfactory'),
+    import(importSpecifier)
   ]);
   const moduleFactory: NgModuleFactory<any> = moduleFactoryExports[`${module.name}NgFactory`];
   const componentType: Type<any> = moduleExports[componentName];

src/components-examples/public-api.ts

@@ -1,5 +1,4 @@
 export * from './example-data';
-export * from './load-example';
 
 // The example-module file will be auto-generated. As soon as the
 // examples are being compiled, the module file will be generated.

src/dev-app/example/BUILD.bazel

@@ -8,6 +8,7 @@ ng_module(
     deps = [
         "//src/cdk/coercion",
         "//src/components-examples",
+        "//src/components-examples/private",
         "//src/material/expansion",
         "@npm//@angular/elements",
     ],

src/dev-app/example/example.ts

@@ -7,7 +7,8 @@
  */
 
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
-import {EXAMPLE_COMPONENTS, loadExampleFactory} from '@angular/components-examples';
+import {EXAMPLE_COMPONENTS} from '@angular/components-examples';
+import {loadExampleFactory} from '@angular/components-examples/private';
 import {Component, Injector, Input, OnInit, ViewContainerRef} from '@angular/core';
 
 @Component({

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

@@ -34,6 +34,8 @@ configureEntryPoint('components-examples');
 configureEntryPoint('material');
 configureEntryPoint('material-experimental');
 configureEntryPoint('material-moment-adapter');
+configureEntryPoint('google-maps');
+configureEntryPoint('youtube-player');
 
 // Configure all secondary entry-points.
 CDK_PACKAGES.forEach(function(pkgName) {
@@ -48,8 +50,9 @@ MATERIAL_EXPERIMENTAL_PACKAGES.forEach(function(pkgName) {
 MATERIAL_PACKAGES.forEach(function(pkgName) {
   configureEntryPoint('material', pkgName);
 });
-configureEntryPoint('google-maps');
-configureEntryPoint('youtube-player');
+
+// Private secondary entry-points.
+configureEntryPoint('components-examples', 'private');
 
 /** Configures the specified package, its entry-point and its examples. */
 function configureEntryPoint(pkgName, entryPoint) {

src/e2e-app/BUILD.bazel

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

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

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {loadExampleFactory} from '@angular/components-examples';
+import {loadExampleFactory} from '@angular/components-examples/private';
 import {Component, Injector, Input, OnInit, ViewContainerRef} from '@angular/core';
 
 /** Loads an example component from `@angular/components-examples` */

src/e2e-app/tsconfig.json

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

tools/example-module/example-module.template

@@ -19,7 +19,11 @@ export interface LiveExample {
 export interface NgModuleInfo {
   /** Name of the NgModule. */
   name: string;
-  /** Import specifier that resolves to this NgModule. */
+  /**
+   * Import specifier that resolves to this module. The specifier is not scoped to
+   * `@angular/components-examples` because it's up to the consumer how the module is
+   * imported. For example, in the docs app, modules are lazily imported from `fesm2015/`.
+   */
   importSpecifier: string;
 }
 

tools/example-module/generate-example-module.ts

@@ -44,7 +44,7 @@ function inlineExampleModuleTemplate(parsedData: AnalyzedExamples): string {
       additionalComponents: data.additionalComponents,
       module: {
         name: data.module.name,
-        importSpecifier: `@angular/components-examples/${data.module.packagePath}`,
+        importSpecifier: data.module.packagePath,
       },
     };