build: add a generated helper function to load examples (#26968)

* build: add a generated helper function to load examples

This new helper removes the examples' reliance on internal APF structure and naming.
Currently the examples hard code the ECMAScript version into the application
which can and will change over time. The helper function also removes the
need to use Webpack-specific magic comments in the documentation website to
prevent unwanted files from being loaded.
The recent updates to the APF for v16 required several manual changes to both the
examples and the documentation site which will no longer be needed in the future.
This change retains the existing functionality to allow for the documentation site
to be updated with the new functionality. Once updated, additional cleanup is possible
to remove the then unused loading functionality.

* fixup! build: add a generated helper function to load examples

Author: clydin

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

@@ -60,9 +60,23 @@ function inlineExampleModuleTemplate(parsedData: AnalyzedExamples): string {
     return result;
   }, {} as any);
 
-  return fs
-    .readFileSync(require.resolve('./example-module.template'), 'utf8')
-    .replace(/\${exampleComponents}/g, JSON.stringify(exampleComponents, null, 2));
+  const loadText = [
+    `export async function loadExample(id: string): Promise<any> {`,
+    `  switch (id) {`,
+    ...exampleMetadata.map(
+      data =>
+        `  case '${data.id}':\nreturn import('@angular/components-examples/${data.module.packagePath}');`,
+    ),
+    `    default:\nreturn undefined;`,
+    `  }`,
+    '}',
+  ].join('\n');
+
+  return (
+    fs
+      .readFileSync(require.resolve('./example-module.template'), 'utf8')
+      .replace(/\${exampleComponents}/g, JSON.stringify(exampleComponents, null, 2)) + loadText
+  );
 }
 
 /** Converts a given camel-cased string to a dash-cased string. */