Error with lazy loading modules routing : Error: Uncaught (in promise): ReferenceError: System is not defined(…)

[chosroes]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   Ubuntu 16.04
2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:
   angular-cli: 1.0.0-beta.11-webpack.8 (From 2015/09/09 9ddba69 master branch)
   node: 6.5.0
   os: linux x64
3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.

const routes: Routes = [
  {
    path: '',
    loadChildren: './+dashboard/dashboard.module#DashBoardModule'
  },
  {
];

ng serve

1. The log given by the failure. Normally this include a stack trace and some
   more information.
   zone.js:484Unhandled Promise rejection: System is not defined ; Zone: angular ; Task: Promise.then ; Value: ReferenceError: System is not defined(…) ReferenceError: System is not defined at SystemJsNgModuleLoader._system (http://test.local:4200/main.bundle.js:9972:49) at SystemJsNgModuleLoader.loadAndCompile (http://angular-back.lbo.local:4200/main.bundle.js:9984:25) at SystemJsNgModuleLoader.load (http://test.local:4200/main.bundle.js:9977:64) at RouterConfigLoader.loadModuleFactory (http://test.local:4200/main.bundle.js:32809:76) at RouterConfigLoader.load (http://test.local:4200/main.bundle.js:32801:52) at MergeMapSubscriber.project (http://test.local:4200/main.bundle.js:33422:82) at MergeMapSubscriber._tryNext (http://test.local:4200/main.bundle.js:38755:27) at MergeMapSubscriber._next (http://test.local:4200/main.bundle.js:38745:18) at MergeMapSubscriber.Subscriber.next (http://test.lbo.local:4200/main.bundle.js:15144:18) at ScalarObservable._subscribe (http://test.local:4200/main.bundle.js:38340:24)
2. Mention any other details that might be useful.
   Why is there a mention to SystemJs whereas i'm using angular-cli@webpack ?

[slubowsky]

Known issue in older versions even mentioned in lazy loading docs. "Angular provides a built-in module loader that supports SystemJS to load modules asynchronously. If we were using another bundling tool, such as Webpack, we would use the Webpack mechanism for asynchronously loading modules."

Things are supposed to improve though. There are lots of related issues in both repos and looks like it's close to working if not already working in the latest unreleased bits. Looks like angular/angular#11387 might have fixed the last missing piece but I havent tried the latest recently.

Meanwhile you can see https://github.com/brandonroberts/router-cli-aot for a working example.

[chosroes]

Thank you @slubowsky . Now there is no error anymore, but the content of my lazy loaded modules doesn't show...
The constructor of the component is not called.

[chosroes]

Updated to RC7.
If I use loadChildren: './+dashboard/dashboard.module#DashboardModule':
New error : error_handler.js:45EXCEPTION: Uncaught (in promise): Error: Cannot find module './+dashboard/dashboard.module'.

If I use loadChildren: () => require('es6-promise!./+dashboard/dashboard.module')('DashboardModule'):
No error, but no content is display

It seems it doesn't like barrels...

[alexciesielski]

+1

ng -v: angular-cli: 1.0.0-beta.11-webpack.9-4

and Angular 2 RC7

Also getting Error: Cannot find module 'dashboard/dashboard.module' when lazy-loading DashboardModule, with

{
        path: 'panel',
        loadChildren: 'dashboard/dashboard.module#DashboardModule'
    }

[gnujeremie]

The problem seems to be still present for me, even in rc7.

[slubowsky]

@ciesielskico On webpack.9-4 it's now working for me. Initially got same error but then later on it started working. Try killing and re running ng serve after modifying your loadChildren code. Looks like perhaps webpack not repackaging everything it needs to on the initial code change.

[alexciesielski]

After changing the Route to this config:

{
        path: 'panel',
        loadChildren: 'app/dashboard/dashboard.module#DashboardModule'
}

killing ng serve and restarting it works 🎉

[chosroes]

Yeah, it's working.

[calvinKG]

Hi,

Am getting the same error with Angular 2.0 with SystemJs

[finalxcode]

Am getting the same error with Angular 2.3.0 with SystemJs ?

[zeves095]

Yes - problem still exist...

[CoderPoet]

Am getting the same error with Angular 2.4.9
EXCEPTION: Uncaught (in promise): Error: Cannot find module './pages/pages.module'.

[o-tkach]

ok, I guess, I found a solution
I use different loaders on client and server

webpack.server.js
{test: /.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader', 'angular2-router-loader']}

webpack.client.ts
{test: /.ts$/, loaders: ['ngtools/webpack']}

lazy loading + aot work well