Angular 2 + System Js bundle not working for lazy modules

[jackesdavid]

Hi friend thanks in advance for the help.

i spent days trying to solve this issue. i'm completly lost.

Please someone help-me !

• i have a very simple angular application with system js and typescript.
• i trying to bundle with systemjs-builder using arithmetic to separate the main, vendor and the a lazy module.

so, with the current config, i can see the lazy module bundled has been called in network when i navegate to the lazy route but the lazy module never show in root router-outlet.

i can see the template url been downloaded in the the network too.

if a put several console logs , the root component is loaded but not instantiated ( constructed) .

tsconfig :

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false,
    "moduleResolution": "node",
    "watch": true,
    "outDir": "dist",
    "rootDir": "src",
    "noEmit": false,    
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "core-js",
      "signalr",
      "jquery",
      "electron",
      "d3",
      "jasmine"
    ]
  },
  "exclude": [
    "node_modules","dist","test-especs"
  ]
}

gulp.js

var builder = new Builder('src', 'src/system.config.js');
function bundleVendor(cb) {
    builder.bundle('vendor.js', 'src/vendor.bundle.js')
        .then(function () { console.log('\t # Vendor bundle complete!'); cb(); })
};

function bundleMain(cb) {
    builder.bundle('main.js - vendor.bundle.js', 'src/main.bundle.js')
        .then(function () { console.log('\t\t # Main bundle complete!'); cb(); });
};

function bundlePolyfill(cb) {
    builder.buildStatic('polyfill.js', 'src/polyfill.bundle.js')
        .then(function () { console.log('\t\t #polyfill bundle complete!'); cb(); });
};

function bundleModule(cb) {   

    builder.bundle('app/lazy_sobre/sobre.module.js - main.bundle.js - vendor.bundle.js', 'src/lazy_sobre.module.bundle.js')
        .then(function () { console.log('\t\t\t -> lazy module bundle complete!'); cb(); });
}

system.config.js

(function (global) {
    System.defaultJSExtensions='js';
    System.config({
        transpiler: false,
        paths: {
            // paths serve as alias
            'npm:': './node_modules/'          

        },
        // map tells the System loader where to look for things
        map: {
             'app': 'app',
            //angular bundles
            //Dynamic loaded
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
            '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',

            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',

            'zone':'npm:zone.js/dist/zone.js',
            'core-js':'npm:core-js/client/shim.min.js',

            // app
            "jquery": "npm:jquery/dist/jquery.min.js",
            "signalr": "npm:signalr/jquery.signalR.min.js",
            "d3": "npm:d3/build/d3.js",

        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            '*': {format: 'register',   defaultExtension: 'js'  },
            'app': { defaultExtension: 'js' },
            rxjs: { defaultExtension: 'js'            },
            'angular-in-memory-web-api': { main: './index.js',defaultExtension: 'js'
            },
            'core-framework': { defaultExtension: 'js' },
            //Modules paths

        },

        meta: {
            "jquery": { export: "$", format: "amd" },
            "signalr": { deps: "jquery", exports: "$" },
            'typescript': { "exports": "ts" }
        },
        bundles:
        {
            'main.bundle.js': ['main.js'],
            'lazy_sobre.module.bundle.js': ['app/lazy_sobre/*'],
            'vendor.bundle.js': ['@angular/*']
        }
    });
})(this);

[jackesdavid]

the bundle have been downloaded and the templateUrl too, but does not show in router-outlet

[jackesdavid]

this is my lazy router, its blank and the router outlet its blank too

[jackesdavid]

has my fault sorry , but maybe this can help someone

before export const routes = [ { path: 'sobre', component: SobreRootComponent, children: [{ path: '', component: SobreComponent }] }];

@NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] })

after (path has a 'sobre' so the route to this was sobre/sobre, this is why was never created) export const routes = [ { path: '', component: SobreRootComponent, children: [{ path: '', component: SobreComponent }] }];

@NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] })

[smac89]

This is not really lazy loaded, just normal routes stuff. To make it really lazily loaded, you have to have a loadChildren attribute in the route object.

See this https://angular.io/guide/router#lazy-loading-route-configuration

In this case, I am also at loss as to how to fix this for systemjs

[karthikprince2k1]

Were you able to resolve the issue?