How to set up an Angular 2 project with Typescript in < 10 minutes.
Angular 2 is greatly designed to co-operate with typescript and nativescript. I won’t focus on nativescript, but briefly it has great support if you want to develop for mobile using Angular 2.
Typescript is being used to write Javascript (after processing) but it has got support for types, classes and more.
Back to our Angular 2 set up:
First you’ll need Node.js installed - depending on what system you’re using (Windows, Linux or Mac) there are different steps - please follow nodejs.
After you’ve got that set up open your Terminal or Command Line and run:
npm install -g typescript Angular provides a command line utility tool called Angular CLI - it’s great, it lets you add components and all their dependencies (to ng-module for example) automatically. To install it just type:
npm install -g angular-cli@1.0.0-beta.18After a long install, if using Linux or Mac, you might get an error regarding watchman - it is used to observe changes in your files and restarting the server running your app - something like nodeman for node.js apps. To install it just run:
brew install watchmanAs you can see this time we’re using brew for installation (previously npm). If you haven’t got homebrew installed run:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" And finally everything is ready!
We’ve got:
- Node.js
- npm (part of node)
- typescript
- watchman
- homebrew
Now we can finally build our first Angular 2 project using Angular CLI.
Enter your project or documents directory and run:
ng new hello-world-angular2This will get your project build and configured, next enter the hello-world-angular2 directory.
cd hello-world-angular2You can review your app directory using:
- tree -F comnmand - it’ll show you what’s been created
And finally we’re ready to run our app! Run the following in the app directory:
ng serveTa da! In the browser open http://localhost:4200
Your’re app is up and running!