Angular · Node · Visual Studio · Visual Studio Code

Angular 2 startup project in Visual Studio Code and Visual Studio

Getting started with Angular 2 can be a bit of a challenge if you are used too Angular 1 running in Visual Studio getting everything set up with Nuget. I will show you how to get started in a super simple way in Visual Studio Code (vscode) and go in depth of the files you need to get started.

If you don’t have vscode, you need to get it here. vscode is a super-fast and great tool to get started with Angular 2 and to understand everything you need for setting up an Angular 2 project.

Coming from an Angular 1 Visual Studio stack where you start your project from a template and get all your dependencies from Nuget you will be surprised how easy setting up a project with only creating a folder and add some small configuration files.

If you don’t have node installed, install it here, you will need that in your development environment.

You can download the project here. (Angular 2.0.0-rc5)

Updated version here. (Angular 2.0.0-rc6)

Steps:

1. Create a new folder in windows. My folder will be C:\_git\Angular2Start
2. Open vscode and go to “File -> Open Folder..” and open your new folder.

vsc1

3. Create a new file by clicking the “new file” icon and repeat this for the 3 configuration files we need.
– package.json
– tsconfig.json
– typings.json

Your folder in vscode should now look like this:

vsc2
Now let’s step through all of three files and see what they do.

tsconfig.json

This is the TypeScript configuration file. It specifies TypeScript compile options. As long as you have this file in the root of your folder, the TypeScript compiler will know.

vsc3
“target”: “es5”, will make the TypeScript compiler transpile our code to es5.
“sourceMap”: true, will make sure TypeScript will generate map files which is handy for debugging.
“emitDecoratorMetadata”: true and “experimentalDecorators”: true, both needs to be set true for our angular application to compile.
“noImplicitAny”: false, will be your best option, but you can set it true if you want all your types to be strongly typed.
“exclude”:[], will make sure the TypeScript compiler will not compile the files or folders listed.

package.json

We use this file so npm can install our angular library and all its dependencies and we use “npm start” to launch the application.

vsc4

The major blocks are, “scripts”, “dependencies” and “devDependencies”.

The dependencies are where you define stuff you earlier got from Nuget, like angular and bootstrap as you can see on the document.

The devDependencies defines the additional dependencies we need for development like TypeScript and so on.

When we open cmd and type “npm install” from the current folder “C:\_git\Angular2Start” it will read this file and gets all the repositories from name and version.
In our “scripts” section we have defined a way to run lite-server specifically created for angular and our TypeScript compiler, so when we open cmd in our folder and type “npm start” it will run our application and also compile our TypeScript files on every change. You will get all your changes in the browser right away as it will refresh automatically, super convenient.

 

4. Bootstrap

Now we are done with the hard part, the only thing left is to bootstrap the application.
We need to add a couple of files:
– index.html
– systemjs.config.js
– app/main.ts

Index.html

vsc5

We need an index.html file to bootstrap our angular 2 applications and to set up some javascript to configure our application and map all stuff.

Systemjs.config.js

vsc6

Tells where our application and dependencies lives.

app/main.ts

By conventions Angular 2 expects a main.ts as a starting point for our application. In Angular 1 we usually had a ng-app=”app” on our top level html. In Angular 2 we never bootstrap in html, but from code in app/main.ts.

vsc7

Don’t worry about the error messages here, they will be gone as soon as we install our dependencies. In my starter project I will also add a component since bootstrap is expecting one. The file looks like this:

vsc8

And you will have to add this in your index.html
<body>
<my-firstcomponent></my-firstcomponent>
</body>

 

Get the show on the road.

now you have to do 2 things.
Open cmd in your folder and type “npm install”
vsc9

Wait for a bit so npm can finalize the installation of the packages you defined in package.json.

When this is done you will see that your project will update in vscode and you will have 2 new folders on your project root. “node_modules” and “typings”.
Now you can open this in Visual Studio with “open website” and you can use either vscode, Visual Studio or some other tool you prefer to start digging into angular2.

Thanks for reading.

3 thoughts on “Angular 2 startup project in Visual Studio Code and Visual Studio

Comments are closed.