0

We have a Angular CLI project and we wan't to dynamically load a module (or component for that matter). Our versions:

@angular/cli: 1.0.0-rc.1
node: 6.9.4
os: win32 x64 (though target OS is Linux)
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/cli: 1.0.0-rc.1
@angular/compiler-cli: 2.4.10

We have a root AppModule, which is loading a component DocuRootComponent:

@NgModule({
  declarations: [
    AppComponent,
     DocuRootComponent],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [SystemJsNgModuleLoader],
  bootstrap: [AppComponent, DocuRootComponent]
})
export class AppModule {

  constructor() {}

}

Inside the DocuRootComponent we try to dynamically load the actual Module DocuModule we need:

@Component({
  selector: 'app-docu-root',
  templateUrl: './docu-root.component.html',
  styleUrls: ['./docu-root.component.css']
  // entryComponents: [DocuWrapperComponent]
})
export class DocuRootComponent implements OnInit {

  constructor(private loader: SystemJsNgModuleLoader, private compFactoryResolver: ComponentFactoryResolver) {
    console.log('DocuRootComponent.constructor')
  }

  ngOnInit() {

    this.loader.load('../docu/docu.module#DocuModule').then((factory: NgModuleFactory<any>) => {
      console.log(factory);
    });

  }

}

The thing is, it won't load, regardless of what we try. As you can see in the commented code above, we also tried with entryComponents. But in the Code as is now, we get the error "Uncaught (in promise): Error: Cannot find module '../docu/docu.module'. Error: Cannot find module '../docu/docu.module'." We have also tried with different paths. Now it's relativ to the location of the file of DocuRootComponent, we also tried beginning with "src/app..." or "app/...", but nothing seems to work.

When I uncomment the entryComponents-line I get the error "Unhandled Promise rejection: Component DocuWrapperComponent is not part of any NgModule or the module has not been imported into your module."

DocuModule looks like this:

@NgModule({
  imports: [
    CommonModule
  ],
  entryComponents: [DocuWrapperComponent],
  declarations: [DocuWrapperComponent]
})
export class DocuModule { }

We've search the net all around, but everyone seems to use "SystemJsNgModuleLoader.load()" (even the Router, I think), but for us it seems not to work and we don't know why.

Jan Pralle
  • 35
  • 8
  • `SystemJsNgModuleLoader` in angular-cli will work if you provide route configuration. Angular cli uses webpack `ContextModuleFactory` internally. So you can do it working by creating fake routes – yurzui May 04 '17 at 13:42
  • See example for angular-cli from this answer http://stackoverflow.com/questions/40293240/how-to-manually-lazy-load-a-module/40293482#40293482 – yurzui May 04 '17 at 14:31
  • Thanks @yurzui, for the CLI example in the other post. Unfortunatelly I cannot comment there, so I#ll do it here. We tried the example code, but found "entryComponent" to be undefined. The console logs this error: "EXCEPTION: Uncaught (in promise): Error: No component factory found for undefined. Did you add it to @NgModule.entryComponents? Error: No component factory found for undefined. Did you add it to @NgModule.entryComponents?" If I should update that above post it in any other way, please let me know. I'm not sure what Stack Overflow rules say on such a matter. – Jan Pralle May 05 '17 at 13:38
  • In my github repo i use `componentFactoryResolver` from lazy loaded module where i have `entryComponents` https://github.com/alexzuza/angular-cli-lazy/blob/master/src/app/app.component.ts#L22-L26 – yurzui May 05 '17 at 13:43
  • Seems like it works now. We still need to test some things, but thanks a lot for now! :) – Jan Pralle May 08 '17 at 07:09

0 Answers0