angulartypescriptgulpsystemjssystemjs-builder

How to bundle Angular 2 app with systemjs and systemjs-builder?


I'm developing an app and I need to increase the angular 2 performance loading all the scripts. The problem is this error:

enter image description here

I'm using gulp + systemjs + systemjs-builder. Here is my files:

[gulpfile]

gulp.task('bundle', function () {
    var builder = new SystemBuilder('./', './wwwroot/lib/js/systemjs.config.js');
    return builder.buildStatic('wwwroot/lib/spa/main.js', 'wwwroot/lib/js/bundle.min.js', {
        minify: true,
        mangle: true,
        rollup: true,
        runtime: false
    });
});

[systemjs.config]

var config = {
        //use typescript for compilation
        transpiler: 'typescript',
        transpilerRuntime: false,
        //typescript compiler options
        typescriptOptions: {
            emitDecoratorMetadata: true
        },
        map: map,
        packages: packages,
        defaultJSExtensions: true
    };

As you can see it is added .js to transpiler as result of defaultJSExtensions: true. Do I need to do something different? (I really need this property equals to true, because I have a lot of paths without .js).

Thanks in advance =)


Solution

  • I solve the problem by adding

    var map = {'typescript': 'node_modules/typescript/lib', ...}
    

    and

    var packages = {'typescript': { main: "typescript.js", ... }}
    

    to config in systemjs file:

    var config = {
            //use typescript for compilation
            transpiler: 'typescript',
            //typescript compiler options
            typescriptOptions: {
                emitDecoratorMetadata: true
            },
            map: map,
            packages: packages,
            defaultJSExtensions: true
        };
    System.config(config);
    

    This way systemjs-builder has no problem to find the transpiler path. Following the martin url (Build Angular2 HTML and TypeScript to a single file) and searching about topic 3 I found this thing https://github.com/systemjs/systemjs/blob/master/docs/production-workflows.md to help on bundle loading. =)