title: How to add dynamic component to Angular Router
body: <p>I'm creating pluggable angular app.</p>
  
  <p>I've found the following article:</p>
  
  <p><a href="https://blog.angularindepth.com/building-extensible-dynamic-pluggable-enterprise-application-with-angular-aed8979faba5" rel="nofollow noreferrer">Building an extensible Dynamic Pluggable Enterprise Application with Angular</a></p>
  
  <p>Generally, everything works fine, but when I've tried to add angular router then I met some problems.</p>
  
  <p>Currently, I'm not able to add the dynamically loaded component to the router.</p>
  
  <p>I've tried something like this:</p>
  
  <pre><code>this.pluginLoader.load(pluginName).then(moduleFactory =&gt; {
                const moduleRef = moduleFactory.create(this.injector);
                const entryComponent = (moduleFactory.moduleType as any).entry;
                const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(
                  entryComponent
                );
  
                this.router.config.push({
                  path: `${pluginName}`,
                  component: entryComponent
                });
  
                this.router.resetConfig(this.router.config);
                this.router.navigate([`/${pluginName}`]);
              });
  </code></pre>
  
  <p>But this code cause following error:</p>
  
  <blockquote>
    <p>core.js:15723 ERROR Error: Uncaught (in promise): Error: No component factory found for function(){this.x=!1}. Did you add it to @NgModule.entryComponents</p>
  </blockquote>
  
  <p>I've tried also use loadChildren property instead of the component property but I don't know what path should I use.</p>
  
  <p>How can I add the component to the component factory, or how can I find a proper path for such components?</p>