如何构建用于生产的angular2应用程序

问题描述

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

I've complete the angular2 tour of heroes. And I wonder what if I'd like to build this project for production. I want to add only 2 files to index.html: appScripts.js and vendorScripts.js.I've compiled my ts files with option outFile so I have my appScripts.js but it doesn't work. Here is some code in my 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'));
});

我认为这是因为我们加载了一些角度模型，比如 @ angular /核心在项目 ts 文件，因为一些systemjs的东西..

I think it's because, we have loaded some angular models like @angular/core in project ts files, and because of some systemjs stuff..

是有没有解决方案？

推荐答案

我找到了解决方案。您应该将 ts 文件编译为 js 文件，然后通过 systemjs-builder 。
这是我的大吞吐任务：

I've found out the solution. You should compile your ts files to js files and then bundle them via systemjs-builder.Here's my gulp task:

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文件您的应用程序。

buildStatic method creates the final javascript file for your application.

这篇关于如何构建用于生产的angular2应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！