Exemple for version 2.1.1

[AmaelN]

Trying to use your package and I'm facing some issue to use it.

I've tried multiple ways to make it work without success...

LoadableModule.forFeature({
      moduleConfigs: [{
        name: 'suggested-company-sidebar',
        matcher: () => import("src/app/shared/suggested-company-sidebar.module").then(mod=> mod.SuggestedCompanySidebarModule)
      }]),

matcher is required and on the demo, we should use load while in this newer version it is not present.

Then I tried in the component.ts (without the config above)

this.loadableService.preload('suggested-company-sidebar')
        .then(() => console.log('loaded'))
        .catch((error) => console.error(error));

I get the following error :

loadChildren is not a function at LoadableService.preload (ngx-loadable.js:83)

When I don't set a config in the module or called preload from the component, I'm getting the following error

Cannot read property 'loadingComponent' of null
    at LoadableComponent.loadFn (ngx-loadable.js:266)

the html code look like this

<ngx-loadable #suggestedCompanySidebar
                    [module]="'suggested-company-sidebar'"
                    [show]="suggestedCompanyDisplay"
                    [timeout]="1000">
        <div loading>Loading...</div>
        <div error>Error</div>
        <div timedOut>
          TimedOut!
          <button (click)="suggestedCompanySidebar.reload()">
            Reload
          </button>
        </div>
      </ngx-loadable>

I'm kind of lost with your package.

PS : I'm using ngx-loadable from a lazy module defined with loadChildren in app-routing.module.ts

Also, I will like to know if the content will be displayed at the server level (SSR) as I want to lazy load components of my page to speed up the loading time of the app nevertheless I still need that the full page content to be crawled by Google Bot when it call the server (SSR)

Thanks in advance for your replu

[AmaelN]

I'm using angular 8.1.2

[mohammedzamakhan]

You are using it incorrectly. This is how you should be using it.

import {LoadableModule, matcher} from 'ngx-loadable';

LoadableModule.forFeature({
      moduleConfigs: [{
        name: 'suggested-company-sidebar',
        load: () => import("src/app/shared/suggested-company-sidebar.module").then(mod=> mod.SuggestedCompanySidebarModule)
      }]),
     matcher

[AmaelN]

Finally, I've used the version "ngx-loadable": "3.0.0-next.12"

I've been able to set the config like this

LoadableModule.forFeature({
      moduleConfigs: [{
        name: 'suggested-company',
        load: () => import("src/app/shared/suggested-company-sidebar/suggested-company-sidebar.module")
          .then(mod => mod.SuggestedCompanySidebarModule),

      }]
    }),

I'm getting an error on _renderVCR() this line

else {
            factory = this.cfr.resolveComponentFactory(((/** @type {?} */ (mr))));
        }

Instead of going into

if (mr instanceof NgModuleRef) {
            /** @type {?} */
            const rootComponent = ((/** @type {?} */ (mr)))._bootstrapComponents[0];
            factory = mr.componentFactoryResolver.resolveComponentFactory(rootComponent);
        }

My Module might not be set up correctly. Please let me know if it is correct as it is not recognize at a NgModuleRef instance.

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    TranslateModule,
  ],  
  declarations: [   
    SuggestedCompanySidebarComponent,
  ],
  bootstrap: [SuggestedCompanySidebarComponent],
  providers: [],
})
export class SuggestedCompanySidebarModule { }

Based on your reply, I will create a live sample tomorrow

[AmaelN]

The error is the following : No component factory found for [object Object]. Did you add it to @NgModule.entryComponents?

[mohammedzamakhan]

3.0.0-next.12 is only to be used along with Angular CLI 9.0.0-next version. If you are using Angular CLI 8.x and lesser, please stick with 2.x version of the library.