Last update : 10/4/2016
Angular 2 has been released and lets get it running. I’m on Windows 7 and using Visual Studio Code as my editor.
First off, make sure you have nodejs installed. We need a version greater than 4 so the latest on node.js home page (currently 6.6.0) is fine.
git version 2.10.0.windows.1
Yep, that’s right, install git as well on your machine.
Go to the github site for swaggerloaf and click on Clone or download, then click the copy to clipboard icon for Clone with HTTPS url for the angular2-seedling repository.
Now in the command window get in your favorite project directory and enter
git version 2.5.1.windows.1
git clone https://github.com/swaggerloaf/angular2-seedling.git
You should now have a new directory angular2-seedling like this.
Get into the new directory and type
npm install. You should see the packages that are listed in package.json installed by the node package manager.
Now open Visual Studio Code and open our new directory with it. You should see something like this.
I really like how Visual Studio Code knows that this is a git directory. We’ll see more about that in a moment.
In the command window type
npm run start. This will compile our typescript files and start lite-server to serve up our web app.
Let’s make a change to the app.component.ts file under the app/root directory. Every Angular app has at least one component and this file defines our root component. Change the title to read “Angular 2 seedling, the one to grow with!!” then save the file.
Note the git icon on left side of VS Code adds a “1” indicating there is a change to commit. Hit Ctrl-Shift-G to bring up the GIT pane or just click on the icon.
Enter a message and then commit the change locally. Pretty awesome.
You should also see the app now display the new title because of browser-sync and webpack working behind the scenes for us when we started the app.
You have now worked on an Angular 2 release application. I think it’s time we asked for a raise.
So, we have a lot to talk about. We will take this most basic application and turn it into a useful desktop application in future posts.
Note: after trying some things you can always rename the angular2-seedling directory to save that and then do a fresh clone to start from scratch. You could also just delete the directory are re-clone.
Talk to you soon.