title: SystemJS bundling app dependencies for angular 5
body: <p>I have Angular 5 app. And I want to minify and bundle my app as much as possible.</p>
  
  <p>This is configuration for SystemJS:</p>
  
  <pre><code>(function (global) {
      System.config({
          paths: {
              'npm:': "node_modules/"
          },
          map: {
              app: "dist",
              '@angular/animations': "npm:@angular/animations/bundles/animations.umd.min.js",
              '@angular/animations/browser': "npm:@angular/animations/bundles/animations-browser.umd.min.js",
              '@angular/common': "npm:@angular/common/bundles/common.umd.min.js",
              '@angular/common/http': "npm:@angular/common/bundles/common-http.umd.min.js",
              '@angular/compiler': "npm:@angular/compiler/bundles/compiler.umd.min.js",
              '@angular/core': "npm:@angular/core/bundles/core.umd.min.js",
              '@angular/forms': "npm:@angular/forms/bundles/forms.umd.min.js",
              '@angular/http': "npm:@angular/http/bundles/http.umd.min.js",
              '@angular/platform-browser': "npm:@angular/platform-browser/bundles/platform-browser.umd.min.js",
              '@angular/platform-browser/animations': "npm:@angular/platform-browser/bundles/platform-browser-animations.umd.min.js",
              '@angular/platform-browser-dynamic': "npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js",
              '@angular/platform-server': "npm:@angular/platform-server/bundles/platform-server.umd.min.js",
              '@angular/router': "npm:@angular/router/bundles/router.umd.min.js",
              // other libraries
              'angular-froala-wysiwyg': "npm:angular-froala-wysiwyg/bundles/angular-froala-wysiwyg.umd.min.js",
              'ngx-bootstrap': "npm:ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js",
              'ngx-infinite-scroll': "npm:ngx-infinite-scroll/bundles/ngx-infinite-scroll.umd.min.js",
              'ngx-moment': "npm:ngx-moment/bundles/ngx-moment.umd.min.js",
              'moment': "npm:moment/min/moment.min.js",
              'rxjs': "npm:rxjs",
              'tslib': "npm:tslib/tslib.js",
              'jszip': "npm:jszip",
              'pako': "npm:pako",
              '@progress': "npm:@progress",
              '@telerik': "npm:@telerik"
          },
          packages: {
              app: {
                  main: "./main.js",
                  defaultExtension: "js"
              },
              rxjs: {
                  defaultExtension: "js",
              },
              jszip: {
                  defaultExtension: 'js',
                  main: './dist/jszip.js'
              },
              pako: {
                  defaultExtension: 'js',
                  main: './index.js'
              },
              'npm:@progress/kendo-angular-buttons': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-angular-charts': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-angular-dateinputs': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-angular-dropdowns': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-angular-dialog': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-angular-grid': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-angular-pdf-export': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-angular-inputs': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-angular-intl': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-angular-l10n': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-angular-excel-export': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-angular-layout': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-angular-scrollview': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-angular-sortable': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-angular-popup': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-angular-resize-sensor': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-angular-upload': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-charts': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-data-query': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-date-math': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-drawing': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-file-saver': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-intl': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-ooxml': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@progress/kendo-popup-common': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@telerik/kendo-draggable': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@telerik/kendo-dropdowns-common': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@telerik/kendo-intl': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              },
              'npm:@telerik/kendo-inputs-common': {
                  main: './dist/npm/main.js',
                  defaultExtension: 'js'
              }
          }
      });
  })(this);
  </code></pre>
  
  <p>gulpfile.js:</p>
  
  <pre><code>var gulp = require('gulp');
  var tsc = require('gulp-typescript');
  var systemjsBuilder = require('systemjs-builder');
  var angularEmbed = require('gulp-angular-embed');
  var del = require('del');
  
  var tsProject = tsc.createProject('tsconfig.json');
  var builder = new systemjsBuilder('', 'systemjs.config.js');
  
  gulp.task('bundle-config', function () {
      return gulp.src('systemjs.config.js')
          .pipe(gulp.dest('dist/configs'));
  });
  
  gulp.task('embed-template', ['bundle-config'], function () {
      return gulp.src('app/**/*.ts')
          .pipe(angularEmbed())
          .pipe(gulp.dest('dist2'));
  });
  
  gulp.task('tsc', ['embed-template'], function () {
      return gulp.src('dist2/app/**/*.ts')
          .pipe(tsProject())
          .js.pipe(gulp.dest('dist'));
  });
  
  gulp.task('clean', ['tsc'], function () {
      return del(['dist2/**']);
  });
  
  gulp.task('bundle-app', ['clean'], function () {
      return builder
          .bundle('[dist/**/*]', 'production/app.bundle.min.js', {
                  minify: true,
                  mangle: true
              })
          .then(function () {
              console.log('Build complete');
          })
          .catch(function (err) {
              console.log('Build error');
              console.log(err);
          });
  });
  
  gulp.task('bundle-dependencies', ['clean'], function () {
      return builder
          .bundle('dist/**/* - [dist/**/*.js]', 'production/dependencies.bundle.min.js', {
                  minify: true,
                  mangle: true
              })
          .then(function () {
              console.log('Build complete');
          })
          .catch(function (err) {
              console.log('Build error');
              console.log(err);
          });
  });
  
  gulp.task('production', ['bundle-app', 'bundle-dependencies'], function () { });
  </code></pre>
  
  <p>and index.html contains the following:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;...&lt;/head&gt;
  &lt;body&gt;
    &lt;my-app&gt;&lt;/my-app&gt;
  
    &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/zone.js/dist/zone.min.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/systemjs/dist/system.js"&gt;&lt;/script&gt;
  
    &lt;script src="production/dependencies.bundle.min.js"&gt;&lt;/script&gt;
    &lt;script src="production/app.bundle.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        System.import('dist/configs/systemjs.config.js').then(function() {
            System.import('app').catch(function(err){ console.error(err); });
        });
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In result I have compiled app in "dist" folder (js files that contains html inside). And also I have "production" folder with "<code>app.bundle.min.js</code>" where all my app files and "<code>dependencies.bundle.min.js</code>" where all my dependencies like angular, kendo, rxjs frameworks.
  When I launch my app it loads these 2 minified files and all dependencies separately, for example: </p>
  
  <pre><code>/node_modules/rxjs/add/operator/mergeMap.js
  /node_modules/@progress/kendo-angular-grid/dist/npm/data/data.iterators.js
  /node_modules/@angular/animations/bundles/animations.umd.min.js
  </code></pre>
  
  <p>But they are all in "<code>dependencies.bundle.min.js</code>".</p>
  
  <p>How can I resolve it?</p>