Angular 2 Starter Setup with JSPM, SystemJS and Typescript in atom (Part 2)

In this part we will talk more about the SystemJS-Hot-Reloader and how you can implement this awesome plugin. Whenever you have problems with this tutorial, you can look up the code at Github or contact me :).

Implementing SystemJS-Hot-Reloader

You may ask yourself what SystemJS actually is. Well you’ve already used it in your index.html file together with the config.js:

[index.html]
...
<script>
  System.import('app').then(null, console.error.bind(console));
</script>
...
[config.js]
...
  "app": { // all files within the app folder
  "main": "bootstrap", // main file of the package (will be important later)
  "format": "system", // module format
...

This nifty tool allows us to load any module format. Currently we are using ES6 module format as you can see in the line “format”: “system”.

Now lets extend our package.json with the following lines:

"devDependencies": {
    "chokidar-socket-emitter": "^0.4.2", // event source for systemjs-hot-reloader
    "http-server": "^0.8.5",             // basic http-server
    "open": "0.0.5"                      // will automaticly open our page on the given port
},

And run

npm install --dev

After you have executed these commands run the following line

jspm install systemjs-hot-reloader

This is the one magic package that makes developing of Angular 2 applications such a breeze. It only reloads the components that got changed instead of the entire app. For more information see SystemJS-Hot-Reloader.

Now lets create a server.js file within our root folder that will combine our http-server with the chokidar-socket-emitter:

'use strict'
const httpServer = require('http-server')
const open = require('open')

let cache = 3600
if (process.env.NODE_ENV === 'production') {
  console.log('running in production mode(with caching)-make sure you have "Disable cache (while DevTools is open)" checked in the browser to see the changes while developing')
} else {
  cache = -1
}
const server = httpServer.createServer({
  root: '.',
  cache: cache,
  robots: true,
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Credentials': 'true'
  }
})

require('chokidar-socket-emitter')({app: server.server})

server.listen(9089)
open('http://localhost:9089')

To actually use the server.js file we’ll implement the following lines in our package.json:

"scripts": {
    "start": "node server"
  },

Last but not least we will update our index.html:

<!doctype html>
<html>
<head>
  <title>My First Angular2 App</title>
  <script src="node_modules/angular2/bundles/angular2-polyfills.min.js"></script>
  <script src="jspm_packages/system.js"></script>
  <script src="config.js"></script>
</head>
<body>
  <app></app>
  <script>
    var readyForMainLoad
    if (location.origin.match(/localhost/)) {
      System.trace = true
      readyForMainLoad = System.import('systemjs-hot-reloader').then(function(HotReloader){
        hr = new HotReloader.default('http://localhost:9089');
      });
    }
    Promise.resolve(readyForMainLoad).then(function() {
      System.import("app").then(function(){ console.log("running") });
    });
  </script>
</body>
</html>

As soon as you run your app on localhost, the SystemJS-Hot-Reloader will be used. If you are running the app in production the reloader won’t be used.

Running The Application

Finally we will run our app with

npm start

And if everything went right, you should be able to hot reload your application. hot-reloading example Note that you might have cached the old version of the site. You may want to disable your cache and hit f5 to see the results.

Bundling Our Application

This was always the most annoying part for me. Bundling with gulp/webpack/… feels tiresome. Lets see how much scripts we have to write to bundle with jspm.

jspm bundle-sfx app build/app.js

… that’s it. Seriously you only have to run this command and you’ll get a script file which is completely independent of jspm/systemjs. To test this we will change or index.html to:

<!doctype html>
<html>
<head>
  <title>My First Angular2 App</title>
  <script src="node_modules/angular2/bundles/angular2-polyfills.min.js"></script>
  <script src="jspm_packages/system.js"></script>
  <script src="config.js"></script>
</head>
<body>
  <app></app>
  <script src="build/app.js"></script>
</body>
</html>

And you are good to go. If you want to now more about bundling, check out the production workflow repo of jspm.

To get more information’s about the package that we used, please go to: Jspm, SystemJS or SystemJS-Hot-Reloader.


Copyright © 2016 - Mario Brendel Blog content licensed under the Creative Commons CC BY 2.5 | Unless otherwise stated or granted, code samples licensed under the MIT license. | Site design based on the hyde theme under the MIT license