Angular 2 Starter Setup with JSPM, SystemJS and Typescript in atom (Part 2)29 Jan 2016
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 :).
You may ask yourself what SystemJS actually is. Well you’ve already used it in your index.html file together with the config.js:
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:
After you have executed these commands run the following line
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:
To actually use the server.js file we’ll implement the following lines in our package.json:
Last but not least we will update our index.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
And if everything went right, you should be able to hot reload your application. 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.
… 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:
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.