dynamically render a component in lazy loaded module with AOT throws cant find component factory

It must be pretty simple. Just create the SharedModule and put all reusable dynamic component in it, export those components from SharedModule and import this Module in all required. Lazy loaded Modules.

Since it is imported direct to the Module, it must be available while creating the Dynamic Component.

Have you tried updating angular to latest 6.1.10? With version 5 I had issues with lazy loaded modules.

I had a similar task, and it worked fine under 6.1.4.

I've created a working example for you under 7.0.1

I've created both cases

1. Dynamic component is declared in the module which will create the dynamic component
2. Dynamic component is declared in a shared module and imported in the lazy-loaded module which will create dynamic components. You can create a shared module for every dynamic component, so you import only one component in a lazy loaded module

I don't feel as though there is enough information in your question to give you the exact answer to the problem you are facing.

I was able to create a solution with, what I feel is a similar setup to yours that you could use to solve your problem or to ask a more pointed question.

TLDR: Full GitHub repo here

I created an app structure as follows:

app/ app.module app.component /dynamic-provider --contains component that is dynamically loading other components --module is lazy loaded by dynamic-one module dynamic-loader.module slot.component /dynamic-one --contains lazy loaded module --module is lazy loaded by app module dynamic-one.module /dynamic-loader --contains a component to be dynamically loaded dynamic-provider.module one.component provider.service

app.module looks as follows

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: 'dynamic-loader', loadChildren: './dynamic-one/dynamic-one.module#DynamicOneModule' },
      { path: '', component: AppComponent }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

dynamic-one.module looks as follows

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    RouterModule.forChild([
      { path: '', loadChildren: '../dynamic-loader/dynamic-loader.module#DynamicLoaderModule' }
    ])
  ]
})
export class DynamicOneModule {
  constructor() {
    console.log('one');
  }
}

dynamic-loader.module looks as follows

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { DynamicProviderModule } from '../dynamic-provider/dynamic-provider.module';

import { SlotComponent } from './slot.component';

@NgModule({
  declarations: [ SlotComponent ],
  imports: [
    DynamicProviderModule,
    RouterModule.forChild([
      { path: '', component: SlotComponent }
    ])
  ]
})
export class DynamicLoaderModule { }

dynamic-provider.module looks as follows

import { NgModule } from '@angular/core';

import { OneComponent } from './one.component';
import { ProviderService } from './provider.service';

@NgModule({
  declarations: [ OneComponent ],
  entryComponents: [ OneComponent ],
  exports: [ OneComponent ],
  providers: [ ProviderService ]
})
export class DynamicProviderModule { }

As you state, your dynamic creation of components is working when the module isn't loaded, so I haven't included that code here(though it is in the repo for completeness). As can be seen here though, the app module lazy loads the dynamic-one module which in turn lazy loads the dynamic-loader module. The dynamic-loader module dynamically creates components from the dynamic-provider module.

How this differs from your implementation is very hard to tell as you have provided only a small amount of information. I hope this helps you find the missing piece you are looking for though!

Creating shared modules allows you to organize and streamline your code. You can put commonly used directives, pipes, and components into one module and then import just that module wherever you need it in other parts of your app.

By re-exporting CommonModule and FormsModule, any other module that imports this SharedModule, gets access to directives like NgIf and NgFor from CommonModule and can bind to component properties with [(ngModel)], a directive in the FormsModule.

EX:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { SharedModule } from '../../shared/shared.module';
import { EntryModalComponent  } from './entry-modal.component';

@NgModule({
 imports: [
   CommonModule,
   SharedModule,
   ReactiveFormsModule
 ],
declarations: [ EntryModalComponent ],
entryComponents: [ EntryModalComponent ],
exports: [ EntryModalComponent ]
})
export class EntryModalModule { }

Now you can use this EntryModalComponent for dynamic loading in some other component after importing the module where it's defined.

In the latest versions Angular has updated a lot of staff about lazy loaded modules. And with high probability this trouble is fixed now.