如何将Angular 2应用程序与systemjs和systemjs-builder捆绑在一起?

时间:2017-03-14 16:52:45

标签: angular typescript gulp systemjs systemjs-builder

我正在开发一个应用程序,我需要增加加载所有脚本的角度2性能。问题是这个错误:

enter image description here

我正在使用gulp + systemjs + systemjs-builder。这是我的文件:

[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
    };

正如您所看到的, defaultJSExtensions:true 会将 .js 添加到transpiler中。我需要做一些与众不同的事吗? (我真的需要这个属性等于true,因为我有很多路径没有 .js )。

提前致谢=)

1 个答案:

答案 0 :(得分:0)

我通过添加

解决了这个问题
var map = {'typescript': 'node_modules/typescript/lib', ...}

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

在systemjs文件中配置:

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

这样systemjs-builder找到转换器路径没有问题。 关注马丁网址(Build Angular2 HTML and TypeScript to a single file)并搜索主题3后,我发现了这个问题https://github.com/systemjs/systemjs/blob/master/docs/production-workflows.md 帮助捆绑加载。 =)