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?