Join the Stack Overflow Community
Stack Overflow is a community of 6.3 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

I've been struggling with lazy load and modules in the last RC5.

I'm using a bundle for every module in my app. So I have main.bundle.js and moduleA.bundle.js

Then when I load my application I'm only loading main.bundle.js, being the routing for my app like this:

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { 
    path: '', 
    redirectTo: 'main', 
    pathMatch: 'full'
  },
  {
    path: 'moduleA',
    loadChildren: 'moduleA.bundle.js#ModuleAModule'
  }
];

export const routing = RouterModule.forRoot(routes);

and this is my moduleA.module.ts

import { NgModule } from '@angular/core';

import { routing } from './moduleA.routing';
import { ModuleAComponent } from './';

@NgModule({
  imports: [ 
    routing 
  ],
  declarations: [
    ModuleAComponent
  ]
})
export default class ModuleAModule { }

My application loads fine, but when I navigate to moduleA, it loads the bundle but it fails to find the class.

Error: Uncaught (in promise): Error: Cannot find 'ModuleAModule' in 'moduleA.bundle.js'

In the documentation and other examples this is working because they don´t use a bundle, but the path to the ts file, but in my case this is a javascript file and it seems the class can´t be found.

I tried different combinations, with and without the default in the export of the module class, and with and without the #ModuleAModule in the loadChildren, but no luck. Either it doesn´t find the 'default' class inside the module or it can´t find the ModuleAModule inside the bundle.

I don´t know if this is an angular2 routing issue, a typescript issue,... Any idea on how to overcome this?

share|improve this question
    
what are you using for creating your bundles? – Madhu Ranjan Aug 18 at 22:50
    
systemjs-builder in gulp – david Aug 18 at 22:53

Ok, I finally got a working configuration for what I was trying to do.

So moduleA.module.ts stays as it is. For the app.routing.ts I'm changing to this

{
    path: 'medals',
    loadChildren: 'app/components/medals/moduleA.module#ModuleAModule'
}

so I tell angular to load the routing for medals from ModuleAModule, which is inside the moduleA.module, so nothing about bundles or js files here.

And now is what I was missing, I need to tell Systemjs to load the bundle when the application asks for moduleA.module, and that is done in systemjs.config

var config = {
    bundles: {
      'moduleA.bundle.js': ['app/components/moduleA/moduleA.module.js']
    },
...
};

This way, I can remove moduleA.bundle.js from the index.html and systemjs will be the one to ask for it when necessary. Hope it helps!

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.