如何为生产构建angular2应用程序

How to build angular2 app for production

本文关键字：构建 angular2 应用程序      更新时间：2023-09-26

我已经完成了angular2 tour of heroes。我想知道，如果我想建立这个项目生产。我只想向index.html添加两个文件：appScripts.js和vendorScripts.js。我已经用选项outFile编译了我的ts文件，所以我有了appScripts.js，但它不起作用。以下是我的gulpfile中的一些代码：

gulp.task('compile', ['clean'], function() {
    var tsProject = typescript.createProject('tsconfig.json', {
        outFile: 'app.js'
    });
    var tsResult = gulp.src(['app/**/*.ts'])
        .pipe(typescript(tsProject));
    return tsResult.js
        .pipe(gulp.dest('./dist'));
});

我认为这是因为，我们在项目ts文件中加载了一些角度模型，如@angular/core，以及一些systemjs的东西。。

有什么解决方案吗？

我已经找到了解决方案。您应该将ts文件编译为js文件，然后通过systemjs-builder对其进行绑定。这是我的任务：

var Builder  = require("systemjs-builder");
gulp.task("builder", function() {
        var builder = new Builder(); 
        builder.loadConfig('./systemjs.config.js')
            .then(function() {
                builder.buildStatic('dist/main.js', 'public/appScript.js')
                    .then(function () {
                        console.log('Build complete');
                    })
                    .catch(error);
            });
});

buildStatic方法为您的应用程序创建最终的javascript文件。

相关文章：