When using Angular with systemjs and typescript, the outFile option still includes all files separately as well

Question

When using Angular with systemjs and typescript, the outFile option still includes all files separately as well

Utilizing the Typescript compiler and the outFile function, I am attempting to merge my sources into a single file and then load it as usual with systemjs.

After running the tsc command, I receive a well-structured bundle.js file containing my main code. However, upon loading it in the browser (either apache or lite server), the bundle.js is loaded first as expected. Then, systemjs takes over and begins loading all the .js files individually -- main.js, app.component.js, etc. Although there are no errors, this process works fine but ideally should not require loading the separate .js files.

I have extensively reviewed a similar post (Load combined modular typescript file with SystemJS) but cannot identify what mistake I might be making.

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 currently utilizing typescript version 1.8.9

angular typescript systemjs

Answer 1

Answer №1

I encountered the same issue and found a solution by packaging my app into a single file with the use of outDir (instead of outFile) in my tsconfig file and utilizing SystemJS-Builder. You can check out the full source code here as well as a 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 collection of tasks that make use of tsc for compilation and systemjs-builder to bundle your application.

// 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'));
});

Answer 2

I encountered the same issue and found a solution by packaging my app into a single file with the use of outDir (instead of outFile) in my tsconfig file and utilizing SystemJS-Builder. You can check out the full source code here as well as a 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 collection of tasks that make use of tsc for compilation and systemjs-builder to bundle your application.

// 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'));
});

Answer 3

Answer №2

In order to resolve the issue at hand, it is imperative that you eliminate this specific block from your SystemJS configuration:

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

Once you indicate an outFile property, the TypeScript compiler will produce a file wherein modules are explicitly registered by name as shown below:

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

This approach differs from using anonymous modules in the past. Consequently, there is no necessity to configure SystemJS to link JS files with module names (which was previously done through the packages section).

To delve deeper into this topic, feel free to refer to the following question:

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

Answer 4

In order to resolve the issue at hand, it is imperative that you eliminate this specific block from your SystemJS configuration:

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

Once you indicate an outFile property, the TypeScript compiler will produce a file wherein modules are explicitly registered by name as shown below:

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

This approach differs from using anonymous modules in the past. Consequently, there is no necessity to configure SystemJS to link JS files with module names (which was previously done through the packages section).

To delve deeper into this topic, feel free to refer to the following question:

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

When using Angular with systemjs and typescript, the outFile option still includes all files separately as well

Answer №1

Answer №2

Similar questions

Having trouble with the SELECT functionality in Angular2/4 and SAFARI?

Using TypeScript syntax to define types; utilizing the export default keyword to incorporate an external JavaScript library within an Angular2

Functions outside of the render method cannot access the props or state using this.props or this.state

When utilizing the catch function callback in Angular 2 with RxJs, the binding to 'this' can trigger the HTTP request to loop repeatedly

Guide on invoking child components' functions from the parent component in Angular 6

Using TypeScript with Watermelondb

Using TypeScript with React may result in an error message stating that a string cannot be assigned to a parameter of type 'keyof T'

Collaborate on a component used in multiple modules

Debugging with Typescript in Visual Studio Code

Guide on uploading images to a NodeJS server from an Angular 2+ application

Problem with Angular 5: Data Binding Issue未知EncodingException

Arranging Alphanumeric Characters in Angular in Ascending Order

Issue with Angular's reactive form: Dynamic validator fails to update control validity

Utilize Typescript for managing sessions in MySQL database

Angular 2 failing to display background images

Utilizing a resolver for managing an entity

Differences between Angular's form builder and form control and form groupIn the

What is the process for setting up a server-side Meteor Collection without the necessity of direct interaction?

Encountering issues with SystemJS loading my module

What could be causing my code to not run after subscribing to the observables?