private async _loadExampleComponent()

in src/app/shared/example-viewer/example-viewer.ts [183:209]


  private async _loadExampleComponent() {
    if (this._example != null) {
      const {componentName, module} = EXAMPLE_COMPONENTS[this._example];
      // Lazily loads the example package that contains the requested example. Webpack needs to be
      // able to statically determine possible imports for proper chunk generation. Explicitly
      // specifying the path to the `fesm2015` folder as first segment instructs Webpack to generate
      // chunks for each example flat esm2015 bundle. To avoid generating unnecessary chunks for
      // source maps (which would never be loaded), we instruct Webpack to exclude source map
      // files. More details: https://webpack.js.org/api/module-methods/#magic-comments.
      const moduleExports: any = await import(
        /* webpackExclude: /\.map$/ */
      '@angular/components-examples/fesm2020/' + module.importSpecifier);
      this._exampleComponentType = moduleExports[componentName];
      // The components examples package is built with Ivy. This means that no factory files are
      // generated. To retrieve the factory of the AOT compiled module, we simply pass the module
      // class symbol to Ivy's module factory constructor. There is no equivalent for View Engine,
      // where factories are stored in separate files. Hence the API is currently Ivy-only.
      this._exampleModuleFactory = new ɵNgModuleFactory(moduleExports[module.name]);

      // Since the data is loaded asynchronously, we can't count on the native behavior
      // that scrolls the element into view automatically. We do it ourselves while giving
      // the page some time to render.
      if (typeof location !== 'undefined' && location.hash.slice(1) === this._example) {
        setTimeout(() => this.elementRef.nativeElement.scrollIntoView(), 300);
      }
    }
  }