build: do not ship load-example code to npm package (#18547) (#18554)

We don't want to ship the `load-example` code that is internal to our
dev-app and e2e-app to the `@angular/components-examples` package.

The logic for loading examples lazily can never be generic enough to
work in all environments. i.e. in Webpack, such dynamic imports which
are not statically analyzable cannot be resolved. This could result in
errors being thrown by Webpack about critical dependencies.

Author: devversion

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 …ponents-examples/private/load-example.tssrc/components-examples/load-example.ts renamed to src/components-examples/private/load-example.ts src/components-examples/load-example.ts renamed to 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` */