Lazy loading with systemjs builder bundled projects - Angular 2 RC6

Question

I am bundling my lazy loaded modules in angular 2 rc6 with systemjs builder, when I run my app I see all non lazy loaded modules being downloaded (using fiddler) and that is because I import them in app.module.ts, but none of my lazy loading modules with "loadChildren" property in app.routing work, I see a white screen with "loading..." hanging there forever and the module is not being downloaded. this is my app.routing:

    export const routes: Routes = [
      { path: '', redirectTo: '/strategies', pathMatch: 'full' },
**// NONE OF THE BUNDLES FOR FOLLOWING MODULES ARE BEING DOWNLOADED BY SYSTEM** JS
      { path: 'strategies', loadChildren: 'app/strategy/strategy.module' },
      { path: 'login', loadChildren: 'app/login/login.module' },
      { path: 'crises', loadChildren: 'app/crisis/crisis.module' },
      { path: 'heroes', loadChildren: 'app/hero/hero.module' },
    ];
    export const routing = RouterModule.forRoot(routes);

this is my app.module:

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        routing,
        CoreModule, ==> **THIS IS BUNDLED TOO AND SYSTEMJS DOWNLOADS IT UP FRONT**
        HttpModule,
    ],
    bootstrap: [AppComponent],
    providers: [
        { provide: LocationStrategy, useClass: HashLocationStrategy },
    ],
})
export class AppModule { }

this is my bundles config in systemjs.config file:

bundles: {
    'dist/index.js': ['app/*'],
    'dist/shared/index.js': ['app/shared/*'],
    'dist/core/index.js': ['app/core/*'],
    'dist/crisis/index.js': ['app/crisis/*'],
    'dist/hero/index.js': ['app/hero/*'],
    'dist/strategy/index.js': ['app/strategy/*'],
    'dist/login/index.js': ['app/login/*'],

    'dist/dependencies.js' : [
        '@angular/core/bundles/core.umd.js',
        '@angular/common/bundles/common.umd.js',
        '@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http/bundles/http.umd.js',
        '@angular/router/bundles/router.umd.js',
        '@angular/forms/bundles/forms.umd.js',
        'angular2-in-memory-web-api/index.js',
        'rxjs/*','rxjs/scheduler/*','rxjs/add/*','rxjs/add/operator/*','rxjs/observale/*','rxjs/add/observable/*',
        ]
}

Any hint would be appreciated.

score 2 · Accepted Answer · answered Sep 15 '16 at 03:19

just in case if this helps anyone, I was able to solve my problem. the configuration was wrong. I updated my systemjs config file to have two different configs one for development and one for systemjs builder bundles. the production/bundles version is as follow:

config.transpiler = 'typescript',
    config.map = {
      'app': 'app', // this is where your transpiled files live
      '@angular': 'node_modules/@angular',
      'rxjs': 'node_modules/rxjs',
      'typescript': 'node_modules/typescript/lib/typescript.js'
    };
    config.packages = {
      'app': { main: 'main.js', format: 'cjs', defaultExtension: 'js' },

      '@angular/core': { main: 'index.js' },
      '@angular/common': { main: 'index.js' },
      '@angular/compiler': { main: 'index.js' },
      '@angular/forms': { main: 'index.js' },
      '@angular/http': { main: 'index.js' },
      '@angular/platform-browser': { main: 'index.js' },
      '@angular/platform-browser-dynamic': { main: 'index.js' },
      '@angular/router': { main: 'index.js' },
      'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
      'rxjs': { defaultExtension: 'js' },
    };
    config.bundles = {
      'dist/index.js': ['app/*'],

      'dist/dependencies.js': [
        '@angular/core/index.js',
        '@angular/common/index.js',
        '@angular/compiler/index.js',
        '@angular/platform-browser/index.js',
        '@angular/platform-browser-dynamic/index.js',
        '@angular/http/index.js',
        '@angular/router/index.js',
        '@angular/forms/index.js',
        'angular2-in-memory-web-api/index.js',
        'rxjs/*', 'rxjs/scheduler/*', 'rxjs/add/*', 'rxjs/add/operator/*', 'rxjs/observale/*', 'rxjs/add/observable/*',
      ]
    }

and the development config stays the same. more info: rc6 config

Can you help me at this? http://stackoverflow.com/questions/40422760/angular2-lazy-loading-modules-how-to-create-a-build-package-with-systemjs-build — smartmouse, Nov 07 '16 at 12:55

Lazy loading with systemjs builder bundled projects - Angular 2 RC6

1 Answers1