Creating First Application using Angular2

Below you will find how to configure the solution architecture for Angular2 using Visual Studio Code editor and system.config.js to load modules using TypeScript compiler.

Below are the prerequisites to create Angular2 Application:

• Install Node.js using https://nodejs.org/en/ link. You can find the installed version of Node.js using NPM -V command.
• Install Visual Studio Code using https://code.visualstudio.com/download

Use below instructions/steps to start creating your first Angular2 application:

• Create new folder in your drive where you want to keep the code base
• Launch Visual Studio Code editor and select the created folder using File -> Open -> Select Folder
• Create new file and name it as package.json under the project folder and paste below code. This file contains all the dependencies of the project.

{
  "name": "angular2-demo-visual-studio",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "docker-build": "docker build -t ng2-quickstart .",
    "docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
    "pree2e": "npm run webdriver:update",
    "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",
    "postinstall": "typings install",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "test-once": "tsc && karma start karma.conf.js --single-run",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "webdriver:update": "webdriver-manager update"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "~2.0.1",
    "@angular/compiler": "~2.0.1",
    "@angular/core": "~2.0.1",
    "@angular/forms": "~2.0.1",
    "@angular/http": "~2.0.1",
    "@angular/platform-browser": "~2.0.1",
    "@angular/platform-browser-dynamic": "~2.0.1",
    "@angular/router": "~3.0.1",
    "@angular/upgrade": "~2.0.1",
    "angular-in-memory-web-api": "~0.1.1",
    "bootstrap": "^3.3.7",
    "systemjs": "0.19.39",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3",
    "typings": "^1.4.0",
    "canonical-path": "0.0.2",
    "http-server": "^0.9.0",
    "tslint": "^3.15.1",
    "lodash": "^4.16.2",
    "jasmine-core": "~2.5.2",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-htmlfile-reporter": "^0.3.4",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^3.3.0",
    "rimraf": "^2.5.4"
  },
  "repository": {}
}

• Create another file and name it as tsconfig.json and paste below code. This file is used to compile TypeScript code.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
    "node_modules/@types"
    ]
  },
  "compileOnSave": true
}

• Create another file and name it as typings.json and paste below code. This file contains all TypeScript compiler libraries.

{
  "globalDependencies": {
    "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
    "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+20160831021119",
    "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
  }
}

• Launch Integrated Command Terminal using View tab to install dependencies. Use npm install command to start installing the dependencies.
• Create new folder and name it as app which contains all application related folders and files in it.
• Create another new file and name it as systemjs.config.js to load modules and paste below code in it:

/**
* 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 tells the System loader where to look for things
map: {
// 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',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);


• Now, start creating the required files under app folder. Click on app folder and create new file called app.component.ts and paste below code in it.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
     templateUrl:'app/views/app.component.html'
})

export class AppComponent {
     appTitle: string = 'Welcome';
}

• Create another new file called app.module.ts and paste below code:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';

@NgModule({
     imports: [BrowserModule, HttpModule],
      declarations: [AppComponent],
      bootstrap: [AppComponent]
})

export class AppModule { }

• Now, create new file called main.ts and paste below code. This file is used to register all your modules.

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

• Now, last but not least, create new html file called Index.html under main folder of the application and paste below code

<html>
   <head>
      <title>My First Angular 2 Practice using Visual Studio 2015</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!--<link rel="stylesheet" href="styles.css">-->

      <!-- 1. Load libraries -->
      <!-- 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="node_modules/systemjs/dist/system.src.js"></script>

      <!-- 2. Configure SystemJS -->
      <script src="systemjs.config.js"></script>
      <script>
         System.import('app').catch(function(err){ console.error(err); });
      </script>
   </head>

   <!-- 3. Display the application -->
   <body>
      <my-app></my-app>
   </body>
</html>

You are good to run your first Anguar2 application. Using Integrated Command Terminal run npm start command to launch and run the above created application, which looks as below in browser:

Happy Programming !!!