CODEWITHSUNDEEP
angularsystemjstsc
would_like_to_be_anon
would_like_to_be_anon

Reputation: 1727

SystemJS: loading build file

My SystemJS file looks like this:

(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'angular2-boot':              'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
//    'app':                        { main: 'js/main.js',  defaultExtension: 'js' },
    'app':                        { main: 'dist/build.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' }
  };
  var ngPackageNames = [
    ...
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

In this I transpiled my typescript into a different directory with outDir option in tsconfig.js and referred that in packages using main: 'js/main.js' which works fine.

However, when I tried to transpile into single file using outFile option and referred to that file using main: 'dist/build.js'. It doesn't render the page and I don't see any errors in the console.

My index.html looks like this:

<html>
<head>
    <title>Angular 2 QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="app/css/styles.css">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('angular2-boot').catch(function(err){ console.error(err); });
    </script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>

My tsconfig.js file looks like this:

{
  "compilerOptions": {
    "target": "es5",
    "module": "amd",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "app/js",
    "outFile": "app/dist/build.js"
  }
}

It says Loading... when I load the page. What do I need to do further to load the single output transpiled file using SystemJS?

Upvotes: 0

Views: 894

Answers (1)

artem
artem

Reputation: 51769

When you transpile to a single file, it produces a file in a special format called 'bundle'. When you import it, all the modules in it are loaded and registered in SystemJS, but nothing is executed. So, after the bundle is loaded, you need to add a second import in index.html that will actually start your application, like this:

    System.import('app/dist/build.js').then(function() {
        System.import('main');
    })
    .catch(function(err){ console.error(err); });

This code uses explicit path to load a bundle: app/dist/build.js, and then loads a module named main because that name must match exactly the module name as it is given in define call in the bundle. So, nothing in this code refers to the angular-boot or app package as it's defined in systemjs.config.js, so nothing needs to be changed in that file.

It's also possible to load a bundle with ordinary <script> tag, then you will need only single System.import('main') after that.

Upvotes: 2

Related Questions