Angular 2 Starter Setup with JSPM, SystemJS and Typescript in atom (Part 1)28 Jan 2016
This blog post will be about the setup of Angular 2 with jspm and systemjs. In this post we will use the angular2 version 2.0.0-beta.1. This version might not work correctly for the IE. If you want to develop for the internet explorer you may want to use beta.0.
Setting Up Atom
If you haven’t already downloaded atom, please navigate to: atom.io. Next you have to install some packages within your editor. Hit ‘ctrl + ,’ to manover to your settings. Then select install and download: Atom-Typescript. As you can see there are a lot features that comes with the package. My personal favorite is the autocompletion and live error analysis.
Setting up the Project
At first we create a folder called Angular2-JSPM-Setup and navigate our terminal to the folder. Within our terminal we run the follow commands:
The npm install is used to get jspm which will install our frontend package manager. For more information see: JSPM
JSPM init will initialize our project. The -y flag is used to answer all the init questions with yes. If you want you can call jspm init without the -y flag and discover, what jspm lets you configure. After you have executed these commands, create an app folder within you root folder (Angular2-JSPM-Setup). Your project should now look like this:
Now we will change the config.js a little bit to make it compatible with our following typescript files. To do that copy the following code and paste it in the System.config:
Note: The comments in the tsconfig file might give you an error, so you better delete them.
To get all the packages we need for development, we will use jspm install. To find out what packages are currently available with the jspm installer you can use the jspm-registry. So now lets run some more code in our terminal:
The first command will install the typescript plugin which is used for our ts loader, that you can see above.
Normally this is everything you need for your project setup, but there is currently an error with the module resolution. So we need to add the following lines to our package.json file:
Now call npm install within your terminal and all dependencies will be downloaded for your project. Sadly we have duplicated all our angular2 dependencies, but this is necessary since the live error analysis would throw errors as soon as we import a module from the angular2 package.
Note: Our code would also run without the angular2 files from the npm install, BUT the live error analysis will show an error for every angular2 module we want to use. This could be really confusing so I would recommend to install angular2 via npm too. I hope that this bug will be solved in the future because jspm is probably the best frontend package manager. If you are from the java world it mostly feels like maven.
Writing Some Code
Now that we’ve got everything wired up we will write some code. At first we’ll create a index.html file at our root folder with the following code:
Next we will create the bootstrap.ts file in the app directory:
and the corresponding app.component.ts file
Finally our folder structure should look something like this:
Running The Application
To run our Application we execute the following commands:
This will start our application and print hello world on your browser. If you had any issues with this tutorial feel free to contact me.
</br>In the next part of this tutorial we will use SystemJS Hot reloader, so that we don’t have to wait 5 seconds until every change to our app is published. Furthermore we will use the bundling of jspm to generate an independent js file of our application.