Using the Angular 2 Release Seedling on github

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.

 

nodejs
You should be able to type the following commands after install in a command prompt and see similar version numbers.
c:\projects>node -v
v6.6.0

c:\projects>npm -v
3.10.3

c:\projects>git --version
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.

seedlingpage

Now in the command window get in your favorite project directory and enter

c:\projects>git --version
git version 2.5.1.windows.1

c:\projects>git clone https://github.com/swaggerloaf/angular2-seedling.git

You should now have a new directory angular2-seedling like this.

 

clonecontents

 

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.

packages

 

 

Now open Visual Studio Code and open our new directory with it. You should see something like this.

vscode

 

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.

 

liteserverrunning

 

apprunning

 

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.

 

@swaggerloaf