Angular 2 lazy load error when loading class module within a bundle

Question

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?

what are you using for creating your bundles?

Madhu Ranjan
– Madhu Ranjan

2016-08-18 22:50:36 +00:00
Commented Aug 18, 2016 at 22:50 — Madhu Ranjan
– Madhu Ranjan, Commented Aug 18, 2016 at 22:50
systemjs-builder in gulp

David
– David

2016-08-18 22:53:17 +00:00
Commented Aug 18, 2016 at 22:53 — David
– David, Commented Aug 18, 2016 at 22:53

David · Accepted Answer · 2016-08-19 15:57:17Z

1

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!

answered Aug 19, 2016 at 15:57

David

3,61410 gold badges46 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2 lazy load error when loading class module within a bundle

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related