Angular with systemjs and typescript outFile still includes all files separetely too

Question

I'm trying to use the Typescript compiler and the outFile function to bundle my sources into a single file and load that as normal with systemjs.

When I run the tsc command I get a nice bundle.js, which includes my main code. When I load it in the browser (either apache or lite server) the bundle.js gets loaded first as intended and then systemjs kicks in and starts loading all the .js files separately -- main.js, app.component.js, etc etc. There's no errors -- it simply works, but it shouldn't need to load all the seperate .js files..

I've looked hard at a related post (Load combined modular typescript file with SystemJS) but can't seem to find what I'm doing wrong..

index.html

<!doctype html>
<html lang="en">
<head>
  <base href="/">
  <meta charset="UTF-8">
  <title>Solid Timesheet: Time-tracking made easy!</title>

  <link rel="stylesheet" href="css/main.css">

  <script type="text/javascript">
    // temporary hack for enable bootstrap 4
    window.__theme = 'bs4';
  </script>
  <script>

    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
              (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    var localhost = document.location.href.match(/^http:\/\/localhost/);
    ga('create', 'UA-18982324-19', localhost ? 'none' : 'auto');
  </script>

  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
  <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

  <script src="node_modules/angular2/bundles/angular2-polyfills.min.js"></script>
  <script src="node_modules/systemjs/dist/system.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.min.js"></script>

  <script src="node_modules/angular2/bundles/router.min.js"></script>
  <script src="node_modules/angular2/bundles/http.min.js"></script>
  <script src="node_modules/angular2/bundles/angular2.min.js"></script>

  <script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
  <script src="bundle.js"></script>

  <script>
    System.config({
      packages: {
        app: {
          format: 'register',
          defaultExtension: 'js'
        },
        "ng2-bootstrap": {
          "defaultExtension": "js"
        },
      },
      map: {
        'ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/',
        moment: 'node_modules/moment/moment.js',
      }
    });
    System.import('app/main')
            .then(null, console.error.bind(console));
  </script>
</head>

<!-- 3. Display the application -->
<body>
<div class="container">
  <my-app>Loading...</my-app>
</div>
</body>

</html>

tsconfig.json

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "module": "system",
    "removeComments": true,
    "sourceMap": false,
    "noImplicitAny": false,
    "outFile": "bundle.js"
  },
  "exclude": [
    "node_modules",
    "typings"
  ]
}

I'm using typescript 1.8.9

score 1 · Answer 1 · edited Jun 22 '16 at 06:51

I ran into that problem as well. I was able to bundle my app into one file (e.g. one network request) using outDir (instead of outFile) in my tsconfig and SystemJS-Builder (see full source and live example).

system.config.js

var map = {
  'app':                                'dist/js',
  'rxjs':                               'lib/js/rxjs',
  'angular2-in-memory-web-api':         'lib/js/angular2-in-memory-web-api',
  '@angular':                           'lib/js/@angular'
};

var packages = {
  'app':                                { main: 'main', defaultExtension: 'js' },
  'rxjs':                               { defaultExtension: 'js' },
  'angular2-in-memory-web-api':         { defaultExtension: 'js' }
};

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

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

System.config({
  map: map,
  packages: packages
});

tsconfig.json

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "system",
    "moduleResolution": "node",
    "outDir": "public/dist/js",
    "sourceMap": true,
    "target": "ES5"
  },
  "exclude": [
    "node_modules"
  ],
  "filesGlob": [
    "src/**/*.ts",
    "typings/*.d.ts"
  ]
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <title>Hello World</title>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="dist/css/styles.min.css"> <!--compiled global scss styles-->

    <script src="lib/js/vendors.min.js"></script> <!--bundled dependencies-->
    <script src="dist/js/app.min.js"></script> <!--bundled source-->
</head>
<body class="container">
    <my-app>Loading...</my-app>
</body>
</html>

gulpfile.js

A set of tasks which uses tsc to compile, and systemjs-builder to bundle your app.

// Compile TypeScript to JS
gulp.task('compile:ts', function () {
  return gulp
    .src(tscConfig.filesGlob)
    .pipe(sourcemaps.init())
    .pipe(tsc(tscConfig.compilerOptions))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('public/dist'));
});

// Generate systemjs-based builds
gulp.task('bundle:js', function() {
  var builder = new sysBuilder('public', './system.config.js');
  return builder.buildStatic('app', 'public/dist/js/app.min.js');
});

// Minify JS bundle
gulp.task('minify:js', function() {
  return gulp
    .src('public/dist/js/app.min.js')
    .pipe(uglify())
    .pipe(gulp.dest('public/dist/js'));
});

score 0 · Answer 2 · edited May 23 '17 at 12:18

0

It's because you need to remove this block from your SystemJS configuration:

System.config({
  packages: {
    app: { // <-----------
      format: 'register',
      defaultExtension: 'js'
    },
    (...)
  }
});

When specifying a outFile property, the TypeScript compiler generates a file that explicitly registers modules by name like this:

System.register('app.component', [ ...

They aren't anonymous modules as before. This way you don't need to configure SystemJS to associate JS files with module names (what you do with the packages block).

See this question for more details:

How do I actually deploy an Angular 2 + Typescript + systemjs app?

edited May 23 '17 at 12:18

Community

1
1

answered Apr 19 '16 at 09:10

Thierry Templier

198,364
44
396
360

Thanks for taking the time to answer. Unfortunately I already tried removing both the app block and the whole System.config block and both give the same result: the page is stuck at "Loading...". the angular2-polyfills.min.js throws angular2-polyfills.min.js:1 Error: SyntaxError: Unexpected token <(…) Which seems to be because app/main is loaded but not found and therefore returns the index.html source. – Rein Baarsma Apr 19 '16 at 09:29
I had this problem. Perhaps you could move the `System.import` at the end of the `body` block of your page... – Thierry Templier Apr 19 '16 at 09:30

Angular with systemjs and typescript outFile still includes all files separetely too

2 Answers2