angular-cli: Angular 2 lazy loading compiling error

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’} ]) ] 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 ] }) export class VideoModule { }`

Errors I get: 13% building modules 27/38 modules 11 active ...v\pfilter-web\node_modules\url\url.jsError: 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) 14% building modules 38/42 modules 4 active ...angular\common\@angular\common.es5.jsC:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:264 if(_this.profile) { ^ TypeError: Cannot read property 'profile' of null at factoryCallback (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\Compilation.js:264:13) at C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\NormalModuleFactory.js:242:4 at C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\NormalModuleFactory.js:93:13 at C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\tapable\lib\Tapable.js:204:11 at NormalModuleFactory.params.normalModuleFactory.plugin (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\CompatibilityPlugin.js:52:5) at NormalModuleFactory.applyPluginsAsyncWaterfall (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\tapable\lib\Tapable.js:208:13) at onDoneResolving (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\NormalModuleFactory.js:68:11) at onDoneResolving (C:\Users\Stefan Antic\Dev\pfilter-web\node_modules\@angular\cli\node_modules\webpack\lib\NormalModuleFactory.js:189:6) at _combinedTickCallback (internal/process/next_tick.js:73:7) at process._tickCallback (internal/process/next_tick.js:104:9)

Here is my repo: https://github.com/stefanantic7/pfilter Sorry for a lot of code, but I tried a lot of solution but it still does not work. I really do not know what else to do.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 22 (1 by maintainers)

Most upvoted comments

Heya all, this seemed to have been a problem with dependencies. I’d also like to mention that in the CLI the paths to lazy routes should be relative from the file you’re in:

// wrong
loadChildren: 'app/video/video.module#VideoModule'
// right
loadChildren: './video/video.module#VideoModule'

+14

filipesilva on May 10, 2017

check my solution here.
https://stackoverflow.com/a/46939503/7045826

Hope it works for u

phacic on Oct 25, 2017

@filipesilva Hi, I am experiencing a similar issue. The path is inside app.routes.ts and I have a structure like below:

- app
  - app
    - app.routes.ts
    - app.module.ts
    - views
      - not-found.module.ts

However, I have to use ./app/views/not-found/not-found.module#NotFoundModule to avoid error o module factory available for dependency type: ContextElementDependency.

But using this would result in:

ERROR in Could not resolve "./app/views/not-found/not-found.module" from "C:/Projects/makeflow-web/src/app/app/app.module.ts".
webpack: Failed to compile.

vilicvane on May 15, 2017

Deleting webpack devDependencies from package,json solved this issue. Tnx alot stefanantic7!!! But, i want to use different webpack config for production… So i should i use it???!!!

Max-Lev on Jun 4, 2017

@a616101 i removed that library - it is not usable at all for normal project, where are correct usages of Inputs. so

import {BusyModule}… and imports: [BusyModule] was just forgotten code.

If you wanna use that library, use ultimate/aot-loader 0.1.16 aot+lazy load npm package

montella1507 on May 24, 2017

Same error for me. I’m still trying to fix this. I’ve deleted the node_modules and did npm install and it didn’t work. I’ve reinstall globally angular/cli, it still didn’t work… I’ve past the whole day on this and I still have the same bug 😦. Keep me in touch if you find a solution, I’ll do the same.

mist3r3 on May 10, 2017