相关疑难解决方法(0)

我想在这个帖子中跟踪和更新最新的(并且希望是最简单的)方法来捆绑Angular(版本2,4,...)以便在实时Web服务器上进行生产.

请在答案中包含Angular版本,以便我们可以更好地跟踪它何时转移到更高版本.

我正在使用一个网站Angular2,我有我认为是一个问题.在我的角度页面的第一次加载时,SystemJS正在发出超过500个请求来检索目录中的每个Angular2文件angular2/src.总的来说,第一个负载下载超过4MB,启动时间超过14秒.

我index.html的以下脚本包括:

<script src="libs/angular2/bundles/angular2-polyfills.js"></script>
<script src="libs/systemjs/dist/system.src.js"></script>
<script src="libs/rxjs/bundles/Rx.js"></script>
<script src="libs/angular2/bundles/angular2.min.js"></script>
<script src="libs/angular2/bundles/http.dev.js"></script>
<script src="libs/jquery/jquery.js"></script>
<script src="libs/lodash/lodash.js"></script>
<script src="libs/bootstrap/js/bootstrap.js"></script>

我的systemJs初始化代码如下所示:

    <script>
      System.config({
        defaultJSExtensions: true,
        paths: {
          '*': 'libs/*',
          'app/*': 'app/*'
        },
        packageConfigPaths: ['libs/*/package.json'],
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));

    </script>

我的公用文件夹具有以下结构:

.
??? img
??? styles
??? app
??? libs
|   ??? angular2
|   ??? systemjs
|   ??? rxjs
|   ??? jquery
| …

我在Angular2项目中使用SystemJS.我为TypeScript使用tsconfig文件.我想使用gulp来连接和缩小我的生产版代码.我在解决代码方面遇到了问题:每次尝试连接文件时都会得到"angular"未定义或"system"未定义.我试图修改我尝试从节点模块加载文件的顺序,但是我没有成功.

我想知道你们是否有这个问题,并找到答案吗？

这是我的gulp文件:

var gulp = require('gulp'),
            .....


var paths = {
    dist: 'dist',
    vendor: {
        js: [
            'node_modules/systemjs/dist/system.src.js',
            'node_modules/angular2/bundles/angular2.dev.js',
            'node_modules/angular2/bundles/angular2-polyfills.js',
            'node_modules/angular2/bundles/router.dev.js'
             ...
        ],
        css: []
},
    app: {
        templates: [
            'app/**/*.html',
            '!node_modules/*.html'
        ],
        scripts: [
            'app/**/*.ts',
            'app/config.ts',
            'app/app.ts'
        ]
    }
};

var tsProject = ts.createProject('tsconfig.json', {
    out: 'Whatever.js'
});

gulp.task('dev:build:templates', function () {
    return gulp.src(paths.app.templates)
        .pipe(ngHtml2Js({
            moduleName: 'Whatever',
            declareModule: false
        }))
        .pipe(concat("Whatever.tpls.min.js"))
        .pipe(gulp.dest(paths.dist));
});
gulp.task('prod:build:templates', function () {
    return gulp.src(paths.app.templates)
        .pipe(minifyHtml({
            empty: true,
            spare: true,
            quotes: true
        }))
        .pipe(ngHtml2Js({ …