Add example for pre ivy

[siddharthpal]

Hi @mohammedzamakhan

Thanks for such a cool library. angular/core used in the demo app is for the Ivy engine. Can we add an example for pre-Ivy compiler which would work with Angular 7? If there isn't any repo I can create it and try ngx-loadable with Angular 7.

Please let me know if there is any change in using ngx-loadble for view engine?

[mohammedzamakhan]

Hey @siddharthpal,

You can use this library with Angular 7. Use the schamatics to generate the modules. Check the home page for the schematics

import { LoadableModule, matcher } from 'ngx-loadable';
...
LoadableModule.forFeature({
      moduleConfigs: [{
        name: 'lazy',
        loadChildren: () => import("./lazy/lazy.module").then(mod=> mod.LazyModule),
        matcher
      }]),

so if dynamic import doesn't work in your application, you can use magic string instead

import { LoadableModule, matcher } from 'ngx-loadable';
...
LoadableModule.forFeature({
      moduleConfigs: [{
        name: 'lazy',
        loadChildren: './lazy/lazy.module#LazyModule',
        matcher
      }]),

[mohammedzamakhan]

Please feel free to add this information in the FAQ section

[siddharthpal]

Thanks, @mohammedzamakhan will try with magic strings and let you know.

[siddharthpal]

Hi @mohammedzamakhan I tried the way you have mentioned above. I am facing one issue:
Whenever I am serving the application I see the application is not working with the below console error.

And I see many warnings whenever I serve the app

Sample application for repro.

Brief about the app

I am here using a Nrwl repo. I am lazily loading a module by setting the path in angular.json. When I build the app with aot I see a lazy load chunk is created.

In app.module I have added ngx-loadable and using it as below

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { ElementsProxyModule } from './elements-proxy/elements-proxy.module';
import { LoadableModule, matcher } from 'ngx-loadable';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ElementsProxyModule, LoadableModule.forRoot({
			moduleConfigs: [{
        name: 'elements-proxy',
        loadChildren: './elements-proxy/elements-proxy.module#ElementsProxyModule',
        matcher
      }]
		})],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Is there anything I am doing wrong or misconfiguring?

Thanks!