Part 1: Angular 2 + MVC ASP.NET using Visual Studio Code.

Hate to admit it but “if you can’t beat them, join them”.  Google’s Angular 2 is to sexy for me to ignore, especially now that it is dressed up with Typescript.   So here’s how you add a SPA page using Angular 2 in a full-blown MVC ASP.NET application using Visual Studio Code Part 1.  (This guide was created using a MACOSX, the command might be different, just take note of the version)

  • dnvm: 1.0.0-rc2-15546
  • tsc: 1.7.5
  • yo: 1.6.0
  • npm: 3.6.0

Please see my previous post on how to install an ASP.NET project in Visual Studio Code.

First is to modify the package.json file as shown below:

    "name": "rymage",
    "version": "0.0.0",
    "dependencies": {
        "angular2": "2.0.0-beta.3",
        "systemjs": "0.19.6",
        "es6-promise": "^3.0.2",
        "es6-shim": "^0.33.3",
        "reflect-metadata": "0.1.2",
        "rxjs": "5.0.0-beta.0",
        "zone.js": "0.5.10"
    "devDependencies": {
        "gulp": "^3.9.0",
        "gulp-concat": "2.5.2",
        "gulp-cssmin": "0.1.7",
        "gulp-uglify": "1.2.0",
        "rimraf": "2.2.8"

Just disregard the devDependencies, because we don’t use them, it was provided by default when we created our ASP.NET project via Yoeman scaffolding.  Now download the packages using npm by executing this command.

npm install

The next step is to install Typescript.  Typescript enables you to write C# like code and compiles it to Javascript so that your client browser can execute it. language! don’t you worry, Microsoft and Google are endorsing it simultaneously on both the Visual Studio Code and Angular IO sites respectively.  Learning Typescript will be a good investment in the long run! I hope! 🙂

To install Typescript just type in the following command:

npm install -g typescript

Next is to configure Typescript.  To configure you just need a file called, tsconfig.json.  See below the content:

  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  "exclude": [

Now lets wire our Typescript to Visual Studio Code, so that when be save or ts (Typescript file) Visual Studio Code will compile it to js (Javascript file).  To wire, open your Visual Studio Code and press “Command+Shift+P” or “Ctrl+Shift+P” for windows and type “Configure Task Runner”.  Visual Studio Code will automatically create a tasks.json file and then put in the following content:

    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "showOutput": "silent",
    "args": [],
    "problemMatcher": "$tsc"

Thats it!  now we are ready to write our cool Angular 2 codes using Typescript in Visual Studio Code.  But first let me show you a screenshot of the project!

Screen Shot 2016-02-23 at 6.38.18 PM

Next: Part 2: Angular 2 + MVC ASP.NET using Visual Studio Code

And if you find this blog helpful, you can make the donation by clicking the Paypal button below.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s