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 -g n n stable |
Either download the zip file from below git repository or execute the following command to clone the project.
https://github.com/adeveloperdiary/angular2_setup
1 |
git clone https://github.com/adeveloperdiary/angular2_setup.git |
You will find following files have been created.
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 -g webpack 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.
John G says
Very clean and helpful!
Please show how to change the Dev environment into a Production environment.
A Developer Diary says
Hi John,
Thanks for your feedback.
The production env setup would depend on your software delivery automation tools stack, e.g – Maven, Ant, Gradle. I will have another post on how to setup Angular 2 in prod env.
kirti says
very heplful
Stas says
I recommend Codelobster IDE – http://www.codelobster.com/angular.html