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.  Waa..new 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": [
    "node_modules"
  ]
}

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.


					
Advertisements
About

Software developer living in the Philippines.

Posted in ASP.NET

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

Author

Harold Glenn P. Minerva
Software Developer / Tech Enthusiast
Living in the Philippines

View Harold Glenn Minerva's profile on LinkedIn

Instagram

Software Engineer - Seasonal and Range Trading Software. Magenta Trader is a powerful stock market visualization software that increases your probability of trading success.

Software Architect and Founder - Easyfis.com is a multi-tenant cloud-based Software-as-a-Service (SaaS) business app that caters to micro, small and medium trading businesses.

CTO and Co-Founder - We give your company the leverage by providing innovative software solutions products such as Point-of-Sales (POS), Financial Information System (FMIS), Payroll and DTR (HRIS), and many more.

%d bloggers like this: