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

Hi!

I’m using RC5 and when using lazy load with a bundle I get a Cannot find 'default' in name_of_the_bundle'

This is the routing

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

const routes: Routes = [
  { 
    path: '', 
    redirectTo: 'main', 
    pathMatch: 'full'
  },
  {
    path: 'moduleA',
    loadChildren: 'moduleA.bundle.js'
  }
];
export const routing = RouterModule.forRoot(routes);

and this is the module

import { NgModule } from '@angular/core';
import { routing } from './moduleA.routing';
import { ModuleAComponent } from './';

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

I also tried using default in the export of the module, and with #ModuleAModule in the loadChildren just after the name of the js bundle, but it’s not working. Since it’s js and not ts it seems it can´t find the class name within the bundle.

Not sure if this is a bug as I can not find anything related to bundles in the documentation.

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 80 (38 by maintainers)

Most upvoted comments

I had to give a talk regarding this topic and found a solution for it. You can find the simple examples (SystemJS + lazy loading and custom preloading) here:

ng2-hello-world-routing-lazy - Angular2 Hello World lazy routing application
ng2-hello-world-lazy-routing-preload - Angular2 Hello World lazy routing application with preloading
ng2-hello-world-lazy-routing-custom-preload - Angular2 Hello World lazy routing application with custom preloading

Hope this helps any of you!

SamVerschueren on Dec 2, 2016

@SamVerschueren I tried your solution, the build run through. But when I try to launch the app I get the following error:

screen shot 2017-03-22 at 13 19 07

kevinclerc on Mar 22, 2017

have a look at this branch https://github.com/mgechev/angular-seed/tree/lazy

gomesNazareth on Nov 5, 2016

David review your bundle configuration. If you use SystemJS you have to have something like that in your systejs config file:

System.config({
    bundles: {
      'moduleA': [..., 'app/components/moduleA/moduleA.module', ...]
    }
});

That makes that when you request app/components/moduleA/moduleA.module the loader loads moduleA bundle and extract moduleA.module module with ModuleAModule in the exports, and the router get it correctly.

By the other hand you could run your application with and without bundles, therefore you don’t have to write the path to your bundle, you have to write the path to your module where ModuleAModule is defined. Then I think you have a bundle issue and not the router.

IHMO!

tolemac on Aug 19, 2016