Use a service from a manual loaded module using Angular 8

🐞 bug report

Load programmatically module and use its service whithout using SystemJsNgModuleLoader.

Description

Using Angular 7 I can load programmatically a module (defined in angular.json “lazyModules” section) and use its service. How I can achieve the same functionality without using deprecated SystemJsNgModuleLoader?

LoaderComponent

@Component({
  ....
  providers: [SystemJsNgModuleLoader]
})
export class LoaderComponent {
  constructor(loader: SystemJsNgModuleLoader, injector: Injector) {}

load() {
this.loader.load('src/app/evaluate-process/evaluate-process.module#EvaluateProcessModule')
      .then((factory: NgModuleFactory<any>) => {
          const moduleRef = factory.create(this.injector);
        const eps: any = moduleRef.injector.get((<any>factory.moduleType).eps);

        eps.startMyFunction();
      });
}

EvaluateProcessModule

@NgModule({
 providers: [EvaluationProcessService]
})
export class EvaluateProcessModule {
  static eps = EvaluationProcessService;
}

🌍 Your Environment

Angular Version: 8.1.3

[mikezks]

The following aspects need to be respected so that NGC can find your dynamic import request correctly:

• You need to use the loadChildren syntax: { loadChildren: () => import('../my-demo/my-demo.module').then(m => m.MyDemoModule) }
• Using dynamic parts inside a literal for the path or module does not work
• Using this statement inline does not work for me, but you can use a reference to this definition
• Using it as class property does not work
• Using an exported const works for me
• It is possible to nest this syntax as shown above, so that you can use several definitions which are accessible by property name
• This way you can use a string value to dynamically load a certain module: lazyModules['myDemo'].loadChildren()

[mikezks]

@mlc-mlapis , i found the a working solution now:

export const lazyModules = {
    myDemo: {
        loadChildren: () => import('../my-demo/my-demo.module').then(m => m.MyDemoModule)
    }
};

class Loader {
    load() {
        return lazyModules['myDemo'].loadChildren()
            .then(moduleOrFactory => {
                if (moduleOrFactory instanceof NgModuleFactory) {
                    return moduleOrFactory;
                } else {
                    return this.compiler.compileModuleAsync(moduleOrFactory);
                }
            })
            .then(factory => {
                this.moduleRef = factory.create(this.injector).instance as unknown as NgModuleRef<any>;
            });
    }
}

more on this later.