lazy load Angular 2 modules with the router problem

[Temkit]

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
here is my code :
app.module
import { MediatorService } from './home/mediator.service'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import appRoutes from "./app.routes"; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule, appRoutes ], providers: [MediatorService], bootstrap: [AppComponent] }) export class AppModule { }

app.routes

import { RouterModule } from '@angular/router'; const routes = [ {path : '', loadChildren: './home/home.module#HomeModule'}, {path: 'devis', loadChildren: './forms/forms.module#FormsModule'}]; export default RouterModule.forRoot(routes);

home.module

import {NgModule} from "@angular/core"; import {CommonModule} from "@angular/common"; import homeRoutes from "./home.routes"; @NgModule({ imports:[CommonModule, homeRoutes], declarations: [HomeComponent] }) export default class HomeModule{}

home.routes

import {RouterModule} from "@angular/router"; import {HomeComponent} from "./home.component"; const routes = [ {path: '', component: HomeComponent} ]; export default RouterModule.forChild(routes);

Package.json

{ "name": "insurance", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "ng": "ng", "start": "ng serve", "lint": "tslint \"src/**/*.ts\"", "test": "ng test", "pree2e": "webdriver-manager update --standalone false --gecko false", "e2e": "protractor" }, "private": true, "dependencies": { "@angular/common": "2.4.1", "@angular/compiler": "2.4.1", "@angular/compiler-cli": "2.4.1", "@angular/core": "2.4.1", "@angular/forms": "2.4.1", "@angular/http": "2.4.1", "@angular/material": "2.0.0-beta.0", "@angular/platform-browser": "2.4.1", "@angular/platform-browser-dynamic": "2.4.1", "@angular/router": "3.4.1", "@angular/upgrade": "2.4.1", "@types/jquery": "^2.0.37", "bootstrap": "^4.0.0-alpha.5", "concurrently": "^3.1.0", "core-js": "^2.4.1", "font-awesome": "^4.7.0", "hammerjs": "^2.0.8", "reflect-metadata": "^0.1.9", "rxjs": "^5.0.2", "systemjs": "^0.19.41", "zone.js": "^0.7.4" }, "devDependencies": { "@types/chai": "^3.4.34", "@types/hammerjs": "^2.0.33", "@types/jasmine": "^2.5.38", "@types/selenium-webdriver": "2.53.38", "angular-cli": "1.0.0-beta.24", "codelyzer": "~2.0.0-beta.4", "jasmine-core": "2.5.2", "jasmine-spec-reporter": "2.7.0", "karma": "1.3.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.1.0", "karma-remap-istanbul": "^0.4.0", "protractor": "4.0.14", "ts-node": "1.7.2", "tslint": "4.2.0", "typescript": "2.0.10" } }

Expected behavior
lazy load module on route call

Minimal reproduction of the problem with instructions
when i run ng serve : i got this error on the cli :

ERROR in Cannot use 'in' operator to search for 'providers' in null

And this one on the console of the browser :

EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/home/home.module'. Error: Cannot find module 'app/home/home.module'. at webpackEmptyContext (http://localhost:4200/main.bundle.js:40:8) [angular] at SystemJsNgModuleLoader.loadAndCompile (http://localhost:4200/vendor.bundle.js:80287:40) [angular] at SystemJsNgModuleLoader.load (http://localhost:4200/vendor.bundle.js:80275:60) [angular] at RouterConfigLoader.loadModuleFactory (http://localhost:4200/vendor.bundle.js:24856:128) [angular] at RouterConfigLoader.load (http://localhost:4200/vendor.bundle.js:24843:81) [angular] at MergeMapSubscriber.project (http://localhost:4200/vendor.bundle.js:84696:111) [angular] at MergeMapSubscriber._tryNext (http://localhost:4200/vendor.bundle.js:25059:27) [angular] at MergeMapSubscriber._next (http://localhost:4200/vendor.bundle.js:25049:18) [angular] at MergeMapSubscriber.Subscriber.next (http://localhost:4200/vendor.bundle.js:6891:18) [angular] at ScalarObservable._subscribe (http://localhost:4200/vendor.bundle.js:67582:24) [angular] at ScalarObservable.Observable.subscribe (http://localhost:4200/vendor.bundle.js:4860:27) [angular] at MergeMapOperator.call (http://localhost:4200/vendor.bundle.js:25024:23) [angular] at Observable.subscribe (http://localhost:4200/vendor.bundle.js:4857:22) [angular] at MergeMapOperator.call (http://localhost:4200/vendor.bundle.js:25024:23) [angular]

What is the motivation / use case for changing the behavior?
none

Please tell us about your environment:
MacoS Sierra 10.12.2 (16C67)

• Angular version: 2.0.X
  Angular 2.4.1 (see the package.json)

• Browser: [all]

• Language: [TypeScript 2.0] (see package.json)

• Node (for AoT issues): node --version =

[DzmitryShylovich]

Pls add a small repro in plunkr

[Temkit]

in plunkr the most updated angular is 2.0.0-beta.17 !!! is it alright ?!

[DzmitryShylovich]

https://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=catalogue 2.4.1

[Temkit]

in plnkr it's working !!!!!!!
https://plnkr.co/edit/uLxmxDIeCdDzxbFjYQS7?p=preview

[DzmitryShylovich]

so it's not an angular issue...

[Temkit]

ok you can't help me !!!

[DzmitryShylovich]

This is an issue tracker, not a support channel. If u need help https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

[pkozlowski-opensource]

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

[Temkit]

i managed to make it work, with some weird solution !
Here is what i done :

1 - make the routing code in the module ( not a file )
2 - make the module file in the parent directory of the component
3 - delete the 'default' in the export like this

export DEFAULT class HomeModule { }

became

export class HomeModule { }

for some reason when the module file is not in the same folder that the component it works,
this is why it worked on plunkr and not on my environment,
i know it sounds weird but i tested it, here is the example that opened my eyes :
https://github.com/mauricedb/lazy-routes

i don't know what is happening, it must be a bug !!

[tieppt]

i face same problem as @Knewtone and after move routing code from separate files to NgModule file, it's working now.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}