Q:

SystemJSNgModule.load works and fails

I'm trying to dynamically load a module using SystemJsNgModuleLoader.load() and everything works fine using 
stackblitz
The code is very simple. I have a module called lazy, and to dynamically load the module the code in app.component.ts is as follow:
constructor(private loader: SystemJsNgModuleLoader) {}

async ngOnInit() {
    try {
       const module = await this.loader.load('src/app/lazy/lazy.module#LazyModule');
      console.log(module)
    } catch(err) {
        console.log(err)
    }
  }

At this point everything is ok, BUT when I do the same in my computer, 
using the same packages dependencies, it doesn't work.
Could be a trouble with typescript config files or something like that ? 
I got this error. Error: Cannot find module 'src/app/lazy/lazy.module'

I downloaded the project from stackblitz, install package dependencies but when I run the app I still face the same error. 
I'm using node: v8.11.1ts
typescript: 2.4.2
npm: 5.8

Any tips? 
Thanks in advance!!

A:

This article describes dynamic component loading in Angular and the problems associated to using SystemJsNgModuleLoader. Specifically the absence of the compiler on production builds of the app.
A simpler approach to solve your problem is to separate js loading and angular compilation phases. The following code is an example:
declare var SystemJS;

import {
  Compiler,
  ComponentFactory,
  Injectable,
  ModuleWithComponentFactories
} from '@angular/core';

/** Load Component factories dynamically using Systemjs
 */
@Injectable()
export class ComponentLoaderService {

  /** Cache of javascript modules indexed by its address */
  private readonly jsModules: {[module: string]: any};

  /** Cache of angular modules indexed by its address */
  private readonly ngModules: {[module: string]: ModuleWithComponentFactories<any>};

  constructor(private compiler: Compiler) {
    this.jsModules = {};
    this.ngModules = {};
  }

  public async factoryFor<T>(ngModule: string, selector: ComponentSelector): Promise<ComponentFactory<T>> {
    // compile angular module if not on the cache already
    if (!this.ngModules[ngModule]) {
      // split module address into jsModule and ngModule parts
      const [jsRef, ngRef] = ngModule.split('#');

      // load javascript module if not on the cache already
      if (!this.jsModules[jsRef]) {
        this.jsModules[jsRef] = await SystemJS.load(jsRef);
      }

      const jsModule = this.jsModules[jsRef];

      // check js module was loaded successfully
      if (!jsModule) {
        throw new Error('ComponentLoaderService: Javascript module without content');
      }

      // check Angular module was loaded successfully
      if (!jsModule[ngRef]) {
        throw new Error('ComponentLoaderService: Angular module not found');
      }

      this.ngModules[ngModule] =
        await this.compiler.compileModuleAndAllComponentsAsync(
          jsModule[ngRef]
        );
    }

    const ngModuleImpl = this.ngModules[ngModule];

    const componentFactory = ngModuleImpl.componentFactories
      .find(factory => factory.selector === selector);

    // check if component factory is defined
    if (!componentFactory) {
      throw new Error('ComponentLoaderService: Component factory not found');
    }

    return componentFactory;
  }
}

Don't forget to include "node_modules/systemjs/dist/system.src.js" into your scripts section of your project inside angular.json file

