build: lazily compile examples in dev app (#14522)

Currently we compile all example up-front which adds a bit to the scripting time in the dev app, even if the example page hasn't been visited. These changes switch to only rendering the examples that are active on the current page.

Author: crisbeto

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

@@ -10,10 +10,9 @@ import {LayoutModule} from '@angular/cdk/layout';
 import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';
 import {CommonModule} from '@angular/common';
 import {HttpClientModule} from '@angular/common/http';
-import {Injector, NgModule} from '@angular/core';
-import {createCustomElement} from '@angular/elements';
+import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {EXAMPLE_COMPONENTS, ExampleModule} from '@angular/material-examples';
+import {ExampleModule} from '@angular/material-examples';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {RouterModule} from '@angular/router';
@@ -152,13 +151,4 @@ import {VirtualScrollDemo} from './virtual-scroll/virtual-scroll-demo';
   ],
   bootstrap: [DevAppComponent],
 })
-export class DevAppModule {
-
-  constructor(injector: Injector) {
-    // Register examples as custom elements so that they can be inserted into the DOM dynamically
-    Object.keys(EXAMPLE_COMPONENTS).forEach(key => {
-      const element = createCustomElement(EXAMPLE_COMPONENTS[key].component, {injector});
-      customElements.define(key, element);
-    });
-  }
-}
+export class DevAppModule {}

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

@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Input} from '@angular/core';
+import {Component, Input, SimpleChanges, OnChanges, Injector} from '@angular/core';
 import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {createCustomElement} from '@angular/elements';
 
 /** Displays a set of material examples in a mat-accordion. */
 @Component({
@@ -51,7 +52,10 @@ import {coerceBooleanProperty} from '@angular/cdk/coercion';
     }
   `]
 })
-export class ExampleList {
+export class ExampleList implements OnChanges {
+  /** Keeps track of the example ids that have been compiled already. */
+  private static _compiledComponents = new Set<string>();
+
   /** Type of examples being displayed. */
   @Input() type: string;
 
@@ -64,4 +68,20 @@ export class ExampleList {
   _expandAll: boolean;
 
   exampleComponents = EXAMPLE_COMPONENTS;
+
+  constructor(private _injector: Injector) {}
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.ids) {
+      (changes.ids.currentValue as string[])
+        .filter(id => !ExampleList._compiledComponents.has(id))
+        .forEach(id => {
+          const element = createCustomElement(EXAMPLE_COMPONENTS[id].component, {
+            injector: this._injector
+          });
+          customElements.define(id, element);
+          ExampleList._compiledComponents.add(id);
+        });
+    }
+  }
 }