What part of the NgModule fulfills the path param of NgModuleFactoryLoader.load(???)

Question

I'm reading https://blog.nrwl.io/essential-angular-ngmodules-16474ea99713 By Victor Savkin and I'm a bit lost on Lazyloading NgModuleFactoryLoader.

Lazy Loading As I mentioned above NgModules are not just the units of compilation, they are also the units of distribution. That is why we bootstrap an NgModule, and not a component — we don’t distribute components, we distribute modules. And that’s why we lazy load NgModules as well.

When using NgModuleFactoryLoader what part of the NgModule does the param path inside .load() point to?

import {NgModuleFactoryLoader, Injector} from '@angular/core';

class MyService {
  constructor(loader: NgModuleFactoryLoader, injector: Injector) {
    loader.load("mymodule").then((f: NgModuleFactory) => {
      const moduleRef = f.create(injector);
      moduleRef.injector; // module injector
      moduleRef.componentFactoryResolver; // all the components factories of the lazy-loaded module
    });
  }
}

Question:

How can I reference ExampleModule inside of NgModuleFactoryLoader.load(???)

@NgModule({
  imports: [ModuleA, ModuleB]
})
class ExampleModule {
  constructor() {
  }
}

@estus I haven't. Could you plz provide an example... I'm not too sure on how to use that either. Is it NgModuleRef.injector.get(???) — Armeen Moon, Aug 22 '17 at 22:34
What are you trying to accomplish exactly? If you are just trying to implement lazy loading, you don't need all of this. — DeborahK, Aug 22 '17 at 22:47
@DeborahK Trying to just understand the article to the fullest. I have no intentions otherwise. — Armeen Moon, Aug 22 '17 at 22:51
This might be interesting for you https://stackoverflow.com/questions/40293240/how-to-manually-lazy-load-a-module — yurzui, Aug 23 '17 at 04:03

score 2 · Accepted Answer · answered Aug 23 '17 at 05:33

what part of the NgModule does the param path inside .load() point to?

It doesn't point to NgModule, it points to the URL which will be used to fetch the JS module/file.

How can I reference ExampleModule inside of NgModuleFactoryLoader.load(???)

You need to use # separator:

 loader.load("path/to/module#ExportedModuleName")

This can be seen in the sources:

const _SEPARATOR = '#';

export class SystemJsNgModuleLoader implements NgModuleFactoryLoader {
  private _config: SystemJsNgModuleLoaderConfig;

  constructor(private _compiler: Compiler, @Optional() config?: SystemJsNgModuleLoaderConfig) {
  ...
  private loadAndCompile(path: string): Promise<NgModuleFactory<any>> {
    let [module, exportName] = path.split(_SEPARATOR); <-----
    if (exportName === undefined) {
      exportName = 'default';
    }

Hey Max! Do you happen to know if SystemJsNgModuleLoader can be used to load lazy modules built in another project, not the one that consumes them? I am looking for a way to consume AOT compiled library projects, to use their components as plugins in a main application. I have managed to get it done using JIT Compiler and SystemJs loader but as the application will become very large, i need to find a way for AOT as well. — IvanSt, Aug 26 '18 at 11:15
@IvanSt, I can't think of anythings that will prevent it. See this talk https://www.youtube.com/watch?v=BkiX_R1BusE&index=15&list=PLXXtnnES3sjrp0E6SWVIZQcApcENStltt — Max Koretskyi, Aug 29 '18 at 09:28

What part of the NgModule fulfills the path param of NgModuleFactoryLoader.load(???)

Question:

1 Answers1