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 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` */

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,
       },
     };