When Ivy compiler is enabled in Angular 8 application and if I try to lazy load a module I am getting following error

TypeError: ngModuleFactory.create is not a function

Is there any solution available to solve this issue?

Hi,

My error:

Anyone?
Thank you all

we used your solution to lazy load a module
but your solution is currently not working with angular 8, the NgModuleFactoryLoader expects a string but gets the new Loadchildren object

@devboosts Are you planning to update this repo for the angular 8?

thanks

fromPromise will immediately run the fetch, even if you don't subscribe to the resulting observable which is not how observables work

Hello guys, how is it going?

I'd like to know this: I'm lazy loading a component, but it uses other components, meaning it has other selectors on its .html file. Assuming I have something like this in my MessageComponent:

<h1>Lazy-Loading Components Without Routing</h1>

<p>Check out the "Network" tab in F12 DevTools.</p>

<p>Then, click "Load!".</p>

<h2>Dynamically-loaded content!</h2>

<app-test></app-test>

If I don't declare TestComponent in MessageModule I can't use <app-test> tag. MessageModule:

import { TestComponent } from './../../test/test.component';
import { NgModule } from '@angular/core';

import { DynamicComponentLoaderModule } from '../../dynamic-component-loader/dynamic-component-loader.module';
import { MessageComponent } from './message.component';

@NgModule({
  declarations: [MessageComponent, TestComponent],
  imports: [DynamicComponentLoaderModule.forChild(MessageComponent)]
})
export class MessageModule {}

Is this the way to do it?

Thanks in advance for the support.

When I put a condition in

*<div ngIf="show" #testOutlet>

public show: boolean.
constructor(
private dynamicComponentLoader: DynamicComponentLoader,
private dialog: MatDialog
) {
this.show = true
}

It does not show anything, is like the component is not created.
Even if I put the condition outside the div in a .

The conditional works fine in angular 6. I'm migrating to angular 8 and here is where it stops working.

I want to load the two module. but clicking on nav is appending the module below the previous one. How to destroy or hide one and load another. Also dont want to load same module again and again.

I would expect the dynamic component code to be part of the chunk instead of inside the main.js file - is this intentional? I see you are importing the message component at the top of app.component.ts:

import { MessageComponent } from './dynamic-modules/message/message.component';

Doesn't this cause it to be part of the main.js file? Maybe i'm missing something

Thanks for the article and code.

I've tried using this in my own project but it seems to break the normal router when using preloadingStrategy.

Can you think of any way this could be overcome?

core.js:1440 ERROR Error: Uncaught (in promise): RangeError: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
    at mergeMapOperatorFunction (mergeMap.js:74)
    at ArrayObservable.mergeAll (mergeAll.js:51)
    at RouterPreloader.processRoutes (router.js:6892)
    at RouterPreloader.processRoutes (router.js:6889)
    at RouterPreloader.processRoutes (router.js:6881)
    at RouterPreloader.processRoutes (router.js:6881)
    at RouterPreloader.processRoutes (router.js:6881)
    at RouterPreloader.processRoutes (router.js:6881)
    at RouterPreloader.processRoutes (router.js:6881)
    at RouterPreloader.processRoutes (router.js:6881)
    at mergeMapOperatorFunction (mergeMap.js:74)
    at ArrayObservable.mergeAll (mergeAll.js:51)
    at RouterPreloader.processRoutes (router.js:6892)
    at RouterPreloader.processRoutes (router.js:6889)
    at RouterPreloader.processRoutes (router.js:6881)
    at RouterPreloader.processRoutes (router.js:6881)
    at RouterPreloader.processRoutes (router.js:6881)
    at RouterPreloader.processRoutes (router.js:6881)
    at RouterPreloader.processRoutes (router.js:6881)
    at RouterPreloader.processRoutes (router.js:6881)
    at resolvePromise (zone.js:809)
    at eval (zone.js:861)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4724)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1517)
    at HTMLAnchorElement.globalZoneAwareCallback (zone.js:1543)

when run yarn build , it turn out.

ERROR in src/app/app.component.ts(12,54): error TS2564: Property 'testOutlet' has no initializer and is not definitely assigned in the constructor.

Hi, thank you for the sharing of this feature. It is great!
But one does not simply, I can not open a NgbModal with this approach.
I know that the modal can be opened by TemplateRef or Component, and I know that the component must be in the @NgModule.entryComponents. But even if the component is in the entryComponents I get this error.

I created this issue to verify if someone had the same problem and need to open a modal in this way and managed without errors. Anyone?
Thank you all

I have a case when I want to introduce a convention where all my dynamic modules/components will be in dynamic-modules folder. So instead of

const manifests: DynamicComponentManifest[] = [
  {
    componentId: 'message',
    path: 'dynamic-message', // some globally-unique identifier, used internally by the router
    loadChildren: './dynamic-modules/message/message.module#MessageModule',
  },
  {
    componentId: 'dialog',
    path: 'dialog',
    loadChildren: './dynamic-modules/dialog/dialog.module#DialogModule',
  },
];

... wrote this:

const ids = ['feature1', 'feature2', 'feature3'];
export const manifests: DynamicComponentManifest[] = ids.map(id => {
  const m: DynamicComponentManifest = {
    componentId: id,
    path: id,
    loadChildren: `./dynamic-modules/${id}/${id}.module#${capitalizeFirstLetter(id)}Module`
  };
  return m;
});
// ... later in module imports:
DynamicComponentLoaderModule.forRoot(manifests),

At build time I get an error:

ERROR in Cannot read property 'loadChildren' of undefined

Do you have any idea how to fix that?