Angular 2 lazy loading compiling error

Question

I am trying to implement lazy loading. I am pretty sure that I put right path to VideoModule, but I still get an error on compiling.

Here is my AppModule where I define my routes and module I want to load lazily.

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {HttpModule} from '@angular/http';

import {AppComponent} from './app.component';
import {MenuComponent} from './menu/menu.component';
import {RouterModule} from '@angular/router';
import {HomeComponent} from './home/home.component';
import {VideoModule} from './video/video.module';

@NgModule({
    declarations: [
        AppComponent,
        MenuComponent,
        HomeComponent,
    ],
    imports: [
        BrowserModule,
        HttpModule,
        VideoModule,
        RouterModule.forRoot([
            {path: '', component: HomeComponent},
            {path: 'video', loadChildren: 'app/video/video.module#VideoModule'}
        ])
    ],
    providers: [
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

and VideoModule

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {VideosComponent} from './videos/videos.component';
import {VideoPlayComponent} from './video-play/video-play.component';
import {NamePipe} from './name.pipe';
import {VideoFilterPipe} from './video-filter.pipe';
import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {VideoPlayGuard} from './video-play.guard';
import {VideoService} from './video.service';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        RouterModule.forChild([
            {path: 'videos', component: VideosComponent}
        ])
    ],
    declarations: [
        VideosComponent,
        VideoPlayComponent,
        NamePipe,
        VideoFilterPipe
    ],
    providers: [
        VideoPlayGuard,
        VideoService
    ],
    exports: [
    ]
})
export class VideoModule {
}

Errors I get:

40% building modules 1/2 modules 1 active ...Dev\pfilter-web\src\app\app.module.tsError: No module factory available for dependency type: ContextElementDependency
    at Compilation.addModuleDependencies (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:206:21)
    at Compilation.processModuleDependencies (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:195:8)
    at _this.buildModule.err (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:335:13)
    at building.forEach.cb (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:140:27)
    at Array.forEach (native)
    at callback (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:140:13)
    at module.build (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:167:11)
    at ContextModule.<anonymous> (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\ContextModule.js:118:3)
    at ContextModule.result.resolveDependencies (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@ngtools\webpack\src\plugin.js:229:25)
    at ContextModule.build (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\ContextModule.js:99:7)
    at Compilation.buildModule (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:142:10)
    at factoryCallback (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:324:11)
    at C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\ContextModuleFactory.js:96:12
    at C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\tapable\lib\Tapable.js:204:11
    at done.then (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@ngtools\webpack\src\plugin.js:231:28)
    at process._tickCallback (internal/process/next_tick.js:109:7)
 70% building modules 2/2 modules 0 active(node:9200) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: callback(): The callback was already called.
webpack: wait until bundle finished: /
webpack: wait until bundle finished: /

try ` {path: 'video', loadChildren: './app/video/video.module#VideoModule'}` — Murhaf Sousli
– Murhaf Sousli, Commented May 9, 2017 at 0:42
ERROR in Could not resolve "./app/video/video.module" from "C:/Users/Stefan Antic/Dev/pfilter-web/src/app/app.module.ts". @MurhafSousli I tried a lot combinations of paths, it still does not work — Antic97
– Antic97, Commented May 9, 2017 at 0:44
I can't tell how your folder structure looks like, try {path: 'video', loadChildren: './video/video.module#VideoModule'} — Murhaf Sousli
– Murhaf Sousli, Commented May 9, 2017 at 0:44
@MurhafSousli Also tried ./video/video.module#VideoModule. Still does not work — Antic97
– Antic97, Commented May 9, 2017 at 0:47
Remove "webpack": "^2.2.0" from devDependencies then remove node_modules, run npm i and finally try it npm start — yurzui
– yurzui, Commented May 9, 2017 at 15:24

DeborahK · Accepted Answer · 2017-05-09 14:45:22Z

1

If the VideoModule is lazy loaded, it should not be imported in AppModule:

imports: [
    BrowserModule,
    HttpModule,
    **VideoModule**,
    RouterModule.forRoot([
        {path: '', component: HomeComponent},
        {path: 'video', loadChildren: 'app/video/video.module#VideoModule'}
    ])
],

Remove it from the above.

It also should not be imported. Remove this line:

import {VideoModule} from './video/video.module';

Also remove the empty providers array:

providers: [
],

I also found this issue reported and several ways to resolve it here: https://github.com/angular/angular-cli/issues/4246

edited May 9, 2017 at 14:45

answered May 9, 2017 at 0:46

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Murhaf Sousli Over a year ago

Ops, I didn't notice that +1

Antic97 Over a year ago

It still does not work. I get the same error massage.

DeborahK Over a year ago

I just edited my message with a link to an Angular-cli issue where this problem is discussed.

Antic97 Over a year ago

Thanks for your effort but it still does not work. I tried all what they mention there (reinstall node_modules, update webpack, install webpack2.2.0), without success.

Antic97 Over a year ago

@DeborahK Hello, Can you, please, take a look on my project on GitHub, I will be grateful so much if you can help me. I were trying all night to resolve problem without success Link of my github: link

|

Collectives™ on Stack Overflow

Angular 2 lazy loading compiling error

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related