How to setup Angular 2 with TypeScript Development Workspace

Angular 2 has many welcoming new features and dependency on TypeScript. You can surely code using ES5 or ES6 however using TypeScript is most beneficial and the industry is heading towards that. However as we are adapting this new framework, developers often face issues while setting up a workspace. Today we will learn How to setup Angular 2 with TypeScript Development Workspace to make the learning path little easier.

We will use WebPack to build and start a server. However you could use WebPack just to build and deploy the files in your preferred server.

Objective :

Setting up a workspace should be simple and shouldn’t have any tool dependency. You should be able to setup Angular 2 with TypeScript in less than 5 mins. We also want to have Bootstrap and JQuery included so that it would be easy to get started with.

Note: There are several ways you can setup Angular 2 with TypeScript, this is just one of the several options.

Prerequisites :

You need to have node (nodejs.org) installed in your local. You don’t really need git to work on Angular 2, however I have a small configuration in github to get you started. If you have git command line installed you can download it from there or you can also download the GitHub project as a zip file and get started with that.

Steps to setup Angular 2 with TypeScript in 5 mins

Make sure you have the latest version of the npm installed. You can update with the following command.

1

2

3

npm cache clean-f

npm install-gn

nstable

Either download the zip file from below git repository or execute the following command to clone the project.

Now, from Terminal/Command Prompt go into the angular2_setup folder and execute the following. It might take a while to install everything.

1

npm install-gwebpack webpack-dev-server typings typescript

Once done, then run npm install

1

npm install

Then start the server using npm start.

1

npm start

The server should start now after a build.

Open browser and navigate to http://localhost:8000/. You can change WebPack’s configuration to use a different port.

You should be able to see the app working.

Now open another terminal and run the following. This will look for any change in the workspace file. This is needed when you are not running the server and need to compile the files. If you are not using WebPack server then also this command will help you build your files once saved.

1

npm run build----watch

Use your favorite editor and open the app.ts file. I am using Atom here. Add warp and TypeScript using h2 element after the h3 element.

Automatic build will happen which will publish the changes and refresh the browser automatically.

Here is the output.

Conclusion :

Hope this How to setup Angular 2 with TypeScript Development Workspace would help you to start your development work. Once I find more efficient ways of setting up Angular 2 with TypeScript I will update you. I am using a superset of angular seed project, added Bootstrap and JQuery.