No module factory available for dependency type: ContextElementDependency

[raronen]

Yes, this issue seems to be covered here and here but those answered doesn't resolve this case. This case is different.

For one, I only have one version of webpack: $ npm ls webpack analytics@1.0.0 C:\LA\src\LogAnalyticsPortalWebRole -- @angular-devkit/build-angular@0.801.0 -- webpack@4.35.2

Here is my code: editor.module.ts (the lazy loaded module):

'use strict';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EditorComponent } from "./editor.component";

@NgModule({
    declarations: [
        EditorComponent
    ],
    imports: [
        CommonModule,
    ],
    providers: [
    ],
    exports: [
        EditorComponent
    ]
})
export class EditorModule { }

lazy.module.ts (the module the contains the lazy load component):

'use strict';

import { NgModule } from '@angular/core';
import { ReactiveComponentLoaderModule } from '@wishtack/reactive-component-loader';
import { lazyLoadComponents } from'./lazyLoadComponents';

@NgModule({
    declarations: [
        ...lazyLoadComponents
    ],
    imports: [
        ReactiveComponentLoaderModule.withModule({
            moduleId: 'editor',
            loadChildren: '../editor/editor.module#EditorModule'
        }),
    ],
    providers: [
    ],
    exports: [
        ...lazyLoadComponents
    ]
})
export class LazyModule { }

app.module

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        ...
        ReactiveComponentLoaderModule.forRoot()
        ...
    ],
    providers: [
    ],
    entryComponents: [
        ...lazyLoadComponents
    ]
})
export class AppModule { ... }

editor-initiator.component.ts (the lazy load component):

`import { Component } from '@angular/core';
import { downgradeComponent } from '@angular/upgrade/static';

@Component({
    selector: 'la-editor-initiator',
    template: `
    <h1>editor-initiator works!</h1>

    <wt-lazy
    [location]="editorComponentLocation" >
    </wt-lazy>`,
})
export class EditorInitiatorComponent {
    editorComponentLocation = {
        moduleId: 'editor',
        selector: 'wt-editor'
    };
}

angular.module('kibana').directive('laEditorInitiator', downgradeComponent({ component: EditorInitiatorComponent }) as angular.IDirectiveFactory);`

I debugged the webpack code and I noticed that in Compilation.js:696

the this.dependencyFactories has the ContextElementDependency module in its map but for some reason the this.dependencyFactories.get(dep.constructor) returns undefined.

I hope this can help.

[yjaaidi]

Hi @raronen, Can you try moving this import:

ReactiveComponentLoaderModule.withModule({
  moduleId: 'editor',
  loadChildren: '../editor/editor.module#EditorModule'
}),

...to your AppModule? That's probably where the issues comes from.

Let me know how it works for you.

[raronen]

I ommitted the .withModule from LazyModule and put it in AppModule. I actually tried that before, sadly, it didn't work.

Same error: No module factory available for dependency type: ContextElementDependency

[TravBradfield]

@raronen Have you had any success with this problem? Please let us know.