systemjs-builder with angular2. Module not found?

Question

I have created my application using systemjs...everything works fine. Now i would like to create a bundle file, but for some reason my application is requesting my module as a separate http request? I thought it should all be included in my bundle.js file? Not sure if i have set something up incorrectly?

My application is stored in the wwwroot/app folder of my application root (asp.net 5 project).

I use gulp to convert my .ts file in .js and put them into wwwroot/dist/app. I then gulp to convert all these .js files into my bundle.js which is then stored in wwwroot/dist/bundle.js

Now when i execute the page, my bundle.js file is loaded, the .html files are requested (as expected), but a request is made for public.module? I have a feeling it is something to do with this line in the app.routing.ts file loadChildren: 'app/public.module' where the module is loaded dynamically..

I have checked my bundle.js file and no reference of PublicModule is included? Why?

systemjs.config.js

(function(global) {

    // map tells the System loader where to look for things
    var map = {
        'app':                          'app', // 'dist',
        '@angular':                     'node_modules/@angular',
        'rxjs':                         'node_modules/rxjs',
        'angular2-tree-component':      'node_modules/angular2-tree-component',
        'lodash':                       'node_modules/lodash',
        'ng2-bootstrap':                'node_modules/ng2-bootstrap',
        'ng2-ckeditor':                 'node_modules/ng2-ckeditor',
        'ng2-file-upload':              'node_modules/ng2-file-upload',
        'ng2-dnd':                      'node_modules/ng2-dnd'
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app':                      { main: 'main.js',  defaultExtension: 'js' },
        'rxjs':                     { defaultExtension: 'js' },
        'angular2-tree-component' : { main: 'dist/angular2-tree-component.js', defaultExtension: 'js' },
        'lodash' :                  { main: 'lodash.js', defaultExtension: 'js' },
        'ng2-bootstrap' :           { defaultExtension: 'js' },
        'ng2-ckeditor' :            { main: 'lib/CKEditor.js', defaultExtension: 'js' },
        'ng2-file-upload' :         { main: 'ng2-file-upload.js', defaultExtension: 'js' },
        'ng2-dnd':                  { main: 'index.js', defaultExtension: 'js'}
    };

    var ngPackageNames = [
        'common',
        'compiler',
        'core',
        'forms',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'upgrade'
    ];

    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }

    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }

    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);

    System.config({
        defaultJSExtensions: true,
        map: map,
        packages: packages
    });
})(this);

gulpfile.js

var gulp = require('gulp'),
    path = require('path'),
    Builder = require('systemjs-builder'),
    ts = require('gulp-typescript'),
    sourcemaps  = require('gulp-sourcemaps'),
    sass = require('gulp-sass'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    cleanCSS = require('gulp-clean-css');

var tsProject = ts.createProject('tsconfig.json');

// copy library files
gulp.task('copy:libs', function() {
    gulp.src([
        'node_modules/core-js/client/shim.min.js',
        'node_modules/zone.js/dist/zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/systemjs/dist/system.src.js',
        'node_modules/ckeditor/ckeditor.js'
    ]).pipe(gulp.dest('wwwroot/dist/lib'));

    return gulp.src('node_modules/font-awesome/**/*', { base: 'node_modules' })
        .pipe(gulp.dest('wwwroot/dist/lib'));
});

/** first transpile your ts files */
gulp.task('ts', function() {
    return gulp.src('wwwroot/app/**/*.ts')
        .pipe(sourcemaps.init({
            loadMaps: true
        }))
        .pipe(ts(tsProject))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('wwwroot/dist/app'));
});

/** then bundle */
gulp.task('bundle', ['ts'], function() {
    // optional constructor options
    // sets the baseURL and loads the configuration file
    var builder = new Builder('', 'systemjs.config.js');

    /*
     the parameters of the below buildStatic() method are:
     - your transcompiled application boot file (the one wich would contain the bootstrap(MyApp, [PROVIDERS]) function - in my case 'dist/app/boot.js'
     - the output (file into which it would output the bundled code)
     - options {}
     */
    return builder.buildStatic('wwwroot/dist/app/*.js', 'wwwroot/dist/bundle.js', { minify: false, sourceMaps: true})
        .then(function() {
            console.log('Build complete');
        })
        .catch(function(err) {
            console.log('Build error');
            console.log(err);
        });
});

// create css file
gulp.task('css', function () {
    return gulp.src('wwwroot/sass/app.scss')
        .pipe(sass())
        .pipe(concat('app.css'))
        .pipe(gulp.dest('wwwroot/dist/css'))
        .pipe(cleanCSS())
        .pipe(rename('app.min.css'))
        .pipe(gulp.dest('wwwroot/dist/css'));
});

/** this runs the above in order. uses gulp4 */
gulp.task('build', ['ts', 'bundle', 'copy:libs']);

index.html

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="shortcut icon" type="image/x-icon" href="@Html.Raw(ViewBag.BaseUrl)favicon.ico" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet" type="text/css" />
    <link href="~/dist/css/app.min.css" rel="stylesheet" type="text/css" />
    <link href="~/dist/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- 1. Load libraries -->
    <script src="~/dist/lib/ckeditor.js"></script>
    <!-- Polyfill(s) for older browsers -->
    <script src="~/dist/lib/shim.min.js"></script>
    <script src="~/dist/lib/zone.js"></script>
    <script src="~/dist/lib/reflect.js"></script>
    <script src="~/dist/lib/system.src.js"></script>
</head>
<!-- 3. Display the application -->
<body>
    <my-app>Loading...</my-app>

    <script src="~/dist/bundle.js"></script>
</body>
</html>

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule } from '@angular/http';
import { CollapseModule } from 'ng2-bootstrap/components/collapse';

import { routing } from './app.routing';
import { AppComponent }  from './app.component';
import { PublicComponent } from './public.component';
import { ProtectedComponent } from './protected.component';

@NgModule({
    imports:        [ BrowserModule, FormsModule, HttpModule, routing, CollapseModule ],
    declarations:   [ AppComponent, PublicComponent, ProtectedComponent ],
    bootstrap:      [ AppComponent ]
})

export class AppModule { }

app.routing.ts

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

// public
import { PublicComponent } from './public.component';
import { ProtectedComponent } from './protected.component';

const appRoutes: Routes = [
    {
        path: '',
        component: PublicComponent,
        loadChildren: 'app/public.module'
    },
    {
        path: 'admin',
        component: ProtectedComponent,
        loadChildren: 'app/protected.module'
    }
];

export const routing = RouterModule.forRoot(appRoutes);

Answer 1

This looks clearly a bug in systemjs-builder. https://github.com/systemjs/builder/issues/728

The workaround is adding '.js' in all import statement. eg import { AppModule } from './app.module'; needs to be import { AppModule } from './app.module.js';

It worked for me with this solution.