Angular Dynamically loaded Feature Modules and Routing

37 views
Skip to first unread message

Drunkard

unread,
Jan 13, 2020, 6:46:08 AM1/13/20
to Angular and AngularJS discussion

I’m working on an Angular plugin solution where the plugin is loaded and the component is rendered in a router-outlet. Specifically, the plugin uses SystemJs to dynamically load from the Eggshell as follows:

loadPlugin(pluginName: string) {
    this.pluginLoader.load(pluginName).then(moduleFactory => {
      const moduleRef = moduleFactory.create(this.injector);
      const entryComponent = (moduleFactory.moduleType as any).entry;
      const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(
        entryComponent
      );
      this.vcRef.createComponent(compFactory);

      // Debugging of router
      const rootRoutes = this.injector.get(ROUTES);
      const featureRoutes = moduleRef.injector.get(ROUTES);

    });
  }
}

The “Root" router is used to invoke the loadPlugin function, thus placing the ConfigComponent within the Eggshells <router-outlet></router-outlet>. This all works as expected.

The plugin consists of ConfigModule, which contains a feature route as follows:

const routes: Routes = [
  { path: 'widget', component: WidgetComponent }
];

@NgModule({
  declarations: [
    ConfigComponent,
    WidgetComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    RouterModule.forChild(routes),
  ],
  entryComponents: [
    ConfigComponent,
    WidgetComponent
  ],
  exports: [
    WidgetComponent,
    RouterModule
  ]
})
export class ConfigModule {
  static entry = ConfigComponent;
}

Where the config template contains the following: <router-outlet></router-outlet>

The issue is that the widget route cannot be found, when a routerLink is invoked within the ConfigComponent.

So, I added the feature route to this.router.config (which is the Eggshell), but that gives me the following error:

Uncaught (in promise): Error: No component factory found for n. Did you add it to @NgModule.entryComponents? 

Obviously, the WidgetComponent is an entryComponent and is declared, so not sure, how to register the WidgetComponent since the Eggshell really knows nothing about the Widget.  Any Ideas? are welcomed.

Devendar Banna

unread,
Jan 14, 2020, 12:05:08 AM1/14/20
to ang...@googlegroups.com

.

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/efb53ea1-f1ce-47e6-a13e-4a1ddc8ae437%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages