Question

自从我升级到Angular2 RC.0以来，所有模块现在都被单独加载（应用程序加载时有600个HTTP请求），这个模块非常长且几乎无法使用。 beta17一次加载所有模块（或每个核心至少有一个文件，http，rxjs ......）。

我已按照官方快速入门指南进行测试和RC。

您能否告诉我如何使用与测试版相同的机制或使用RC.0的聚合模块的新机制？

Answer 1

我有同样的问题，并由'systemjs-builder'解决。但是没有详细测试。为你作为参考。 https://github.com/A-hsien/Angular2-systemjs-builder

来自@Gaurav的评论。

以下代码将'@angular'下的每个文件夹打包为'@angular'。只需将它们保存到whateverthename.js文件中。

if(Build.VERSION.SDK_INT>=23){
    int permissionCheck = ContextCompat.checkSelfPermission(MainActivity.this,
            Manifest.permission.READ_PHONE_STATE);
    if (permissionCheck != PackageManager.PERMISSION_GRANTED) {
        ActivityCompat.requestPermissions(MainActivity.this,
                new String[]{Manifest.permission.READ_PHONE_STATE},
                MY_PERMISSIONS_REQUEST_READ_PHONE_STATE);
    } else {
        // your code
    }
}else{
    // your code
}

@Override
public void onRequestPermissionsResult(int requestCode, String permissions[], int[] grantResults) {
    switch (requestCode) {
        case MY_PERMISSIONS_REQUEST_READ_PHONE_STATE: {
            if (grantResults.length > 0
                    && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                // permission granted -code

            } else {

                // permission not granted - code
            }
        }
    }
}

然后执行命令var Builder = require('systemjs-builder'); var packages = {}; var packageNames = [ '@angular/common', '@angular/compiler', '@angular/core', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router-deprecated', '@angular/upgrade', ]; packageNames.forEach(function(pkgName) { packages[pkgName] = { main: 'index.js' }; }); var builder = new Builder({ baseURL: '/node_modules', defaultJSExtensions: true, packages: packages }); packageNames.forEach(function(pkgName) { builder.bundle(pkgName, 'assets/'+ pkgName+'.js') .then(function() { console.log(pkgName+'Build complete'); }) .catch(function(err) { console.log(pkgName+'Build error'); console.log(err); }); });。 modeues将构建到assets文件夹。

Answer 2

通过使用@ A-Hsiao的答案并添加rxjs依赖项，我已成功将所有js文件合并到一个缩小文件中。必须执行以下节点脚本。

    var Builder = require('systemjs-builder');

var packages = {
    'rxjs': {main: 'Rx.js'}
};
var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router-deprecated',
];

packageNames.forEach(function (pkgName) {
    packages[pkgName] = {main: 'index.js'};
});
packageNames.push('rxjs');
var builder = new Builder({
    baseURL: '/node_modules',
    defaultJSExtensions: true,
    packages: packages
});

packageNames.forEach(function (pkgName) {
    builder.bundle(pkgName, 'build/assets/' + pkgName + '.js')
        .then(function () {
            console.log(pkgName + ' Build complete');
        })
        .catch(function (err) {
            console.log(pkgName + ' Build error');
            console.log(err);
        });
});

可以组合和缩小所有生成的文件。然后必须在捆绑文件之后导入以下systemjs.config.js。

(function (global) {
    var map = {
        'app': 'app'
    };

    var packages = {
        'app': {main: 'main.js'},
        'rxjs': {main: 'Rx.js'}
    };

    var packageNames = [
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        '@angular/http',
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/router-deprecated'
    ];

    packageNames.forEach(function (pkgName) {
        packages[pkgName] = {main: 'index.js'};
    });

    var config = {
        map: map,
        packages: packages,
        defaultJSExtensions: true
    };

    if (global.filterSystemConfig) {
        global.filterSystemConfig(config);
    }

    System.config(config);

})(this);

像以前的beta聚合模块一样打包并运行Angular2 RC.0

2 个答案: