Getting Started With Angular 2.0 Using Microsoft TypeScript 2.0 Over .NET Framework

Introduction

In this article, I will demonstrate how to start with Angular 2.0, using Microsoft TypeScript 2.0 over .NET Framework with Visual Studio 2015.

Background

Node.js is an open-source, cross-platform JavaScript runtime environment for developing a diverse variety of tools and applications. Visual Studio is an IDE for developing a variety of applications developed and supported by Microsoft. In this article, I will show you how to work with Node.js, using the IDE Visual Studio 2015.

Prerequisite

Before we start, you need to make sure  your system meets the following requirements.

• NodeJS 
  It is nothing but the Server side JavaScript. You can download NodeJs setup for your machine.
  
  
• NPM
  NPM is kind of resource manager for multiple piece of scripts that may like to work together for a single project; it provides them the environment.
  
  
• TypeScript ^2.0 
  TypeScript is a programming language and is used by Angular 2.0 developer teams as a core language required to work with Angular 2.0.
  
  
• Visual Studio 2015 with Update 3 is said to be the minimum requirement to work with Node.js Application configurations and settings.

Using the code

Now, let's get started with building a simple application and launch your first application. In this application, we will go through 11 simple steps to launch the application. I have tried to simplify the steps by writing possible details about it. In general, it may require specific debugging on your system and you may post your comment below.

1. File -> New -> Project -> [Create an Empty Web project from templete] -> [Click OK and launch Project]
   
   
2. Copy the project path and open it in command prompt to do this right click on Solution Explorer and [Open folder in File Explorer]
   
   e.g
   
   cd C:\Users\b\Documents\visual studio 2017\Projects\StatWorkks\WebApplication1 Or
   cd {Your Path}
   
   
3. Check for this to ensure the things are correct by running the commands given below.
   
   node -v It should be > v6.x.x
   npm -v It should be > v4.x.x
   tsc -v It should be > v2.x.x
   
   Get an update, if you find any older version of any of these. If tsc gives an older version then it means you probably have installed any version of TypeScript earlier and may require to update the system variable. To do this, go to Computer -> Properties(right click) -> Advance system settings -> Environment variable -> System variable -> path (click edit) then find the TypeScript path and update it to the latest one.
   
   Warning
   Change carefully in system variable, if you are not sure, then know it before any change.
   
   
4. Now, go to command prompt and run the command npm init. Give it a name 'angular2', when asked and accept all the defaults by hitting enter. Eventually, it will add a package.json file in your project. Include this file in your project, just right click. Change the code to the following (remember we could have done this directly by GUI but I proceeded this way to let you explore the way npm usually works). Now, copy and paste this code in your just included package.json file. 
   

   {
       "name": "angular2",
       "version": "1.0.0",
       "description": "This is demo app",
       "main": "index.ts",
       "dependencies": {
           "@angular/common": "~2.4.0",
           "@angular/compiler": "~2.4.0",
           "@angular/core": "~2.4.0",
           "@angular/forms": "~2.4.0",
           "@angular/http": "~2.4.0",
           "@angular/platform-browser": "~2.4.0",
           "@angular/platform-browser-dynamic": "~2.4.0",
           "@angular/router": "~3.4.0",
           "angular-in-memory-web-api": "~0.2.2",
           "systemjs": "0.19.40",
           "core-js": "^2.4.1",
           "reflect-metadata": "^0.1.8",
           "rxjs": "5.0.1",
           "zone.js": "^0.7.4"
       },
       "devDependencies": {
           "@types/core-js": "^0.9.35",
           "@types/jasmine": "^2.5.36",
           "@types/node": "^6.0.46",
           "canonical-path": "0.0.2",
           "concurrently": "^3.1.0",
           "http-server": "^0.9.0",
           "jasmine-core": "~2.4.1",
           "karma": "^1.3.0",
           "karma-chrome-launcher": "^2.0.0",
           "karma-cli": "^1.0.1",
           "karma-jasmine": "^1.0.2",
           "karma-jasmine-html-reporter": "^0.2.2",
           "lite-server": "^2.2.2",
           "lodash": "^4.16.4",
           "protractor": "~4.0.14",
           "rimraf": "^2.5.4",
           "tslint": "^3.15.1",
           "typescript": "~2.0.10"
       },
       "scripts": {
           "test": "echo \"Error: no test specified\" && exit 1"
       },
       "author": "ahmad anas",
       "license": "MIT"
   }

5. At root directory, add typings.json and the code given below in it ( you can also try this with command prompt; in the same directory execute the command npm i -g typings)
   

   {
       "globalDependencies": {
           "core-js": "registry:dt/core-js#0.0.0+20160725163759",
           "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
           "node": "registry:dt/node#6.0.0+20160909174046"
       },
       "name": "angular2"
   }

6. At root directory, add tsconfig.json with the code given below (You can configure this also by installing npm tsconfig)
   

   {
       "compilerOptions": {
           "experimentalDecorators": true,
           "moduleResolution": "node"
       }
   }

7. Add index.html and paste the code given below.
   

   <!DOCTYPE html>
   <html>
   
   <head>
       <meta charset="utf-8" />
       <title></title>
       <!-- Polyfill(s) for older browsers -->
       <script src="node_modules/core-js/client/shim.min.js"></script>
       <script src="node_modules/zone.js/dist/zone.js"></script>
       <script src="systemjs.config.js"></script>
       <scrript src="node_modules/reflect-metadata/Reflect.js">
           </script>
           <script src="node_modules/systemjs/dist/system.src.js"></script>
           <scipt> System.import('app').catch(function(err){ console.error(err); }); </script>
   </head>
   
   <body>
       <my-app> Loading AppComponent content here ... </my-app>
   </body>
   
   </html>

8. Now, add an app folder in the root directory and add three files in this app.component.ts, app.module.ts and index.ts.
   
   Note
   
   Click no, if any configuration pops up
   
   
9. Add the code given below in all three relevant files. 
    
   app.component.ts
   

   import {
       Component
   } from "@angular/core"
   @Component({
       selector: 'my-app',
       template: `<h1>Welcome to Angular 2.0 Application<h1><div>{{ msg }}</div>`
   })
   export class AppComponent {
       msg: string = "Demo. Thanks You..!!"
   }

   app.module.ts
   

   import {
       NgModule
   } from '@angular/core';
   import {
       BrowserModule
   } from '@angular/platform-browser';
   import {
       AppComponent
   } from "./app.component";
   @NgModule({
       imports: [BrowserModule],
       declarations: [AppComponent],
       bootstrap: [AppComponent]
   })
   export class AppModule {}

   index.ts
   

   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   import { AppModule } from './app.module';
   platformBrowserDynamic().bootstrapModule(AppModule);

10. Add systemjs.config.js at the root folder with the codes given below.
    

    /**
     * System configuration for Angular samples
     * Adjust as necessary for your application needs.
     */
    (function(global) {
        System.config({
            paths: { // paths serve as alias
                'npm:': 'node_modules/'
            },
            map: { // map tells the System loader where to look for things
                // our app is within the app folder
                app: 'app',
                // angular bundles
                '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
                '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
                '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
                '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
                '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
                '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
                '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
                '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
                // other libraries
                'rxjs': 'npm:rxjs',
                'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
            },
            // packages tells the System loader how to load when no filename and/or no extension
            packages: {
                app: {
                    main: './index.js',
                    defaultExtension: 'js'
                },
                rxjs: {
                    defaultExtension: 'js'
                }
            }
        });
    })(this);

11. On the command prompt in same directory, execute the command by installing npm.
    
    Note
    
    Additional setting may bother you to set it. Go to Tool -> Option -> Project and Solution. Click on External Web Tools and place $(PATH) before $(DevEnvDir)\{Anything}..

Conclusion

At the end of this application, you must be able to launch the first AngularJS 2.0 application with Visual Studio 2015. Happy learning and happy coding.