Angular 2

Setting angular2 project development environment with asp .net and visual studio 2015.

Prerequisites(Required for setting) :

node.js---Node Js Installed(https://nodejs.org/en/download/)

Visual Studio Code--- Visual Studio 2015 installed

Browser --- Any browser installed.

Step 1: Installing typescript for VS2015

Then open the visual studio,click the tools and go to the Extensions and Updates.

Then open the below window go to the online and enter on search 'typescript'.

Then open the different versions of the typescript,select the latest one and download.

Open the link on browser then start the downloading after completed the download open and install the file.

Then install the type script successfully.

Step 2:  Adding config & package files

Following files are required to configure.

package.json 

systemjs.config.js 

tsconfig.json

typings.json

Create the new project .

Then start the 2 step configuration all files.

Directly add the package.json file in your project right click-->Add->New Item-->select json file.

package.json

{

"name": "angular2-quickstart",

"version": "1.0.0",

"description": "QuickStart package.json from the documentation, supplemented with testing support",

"scripts": {

"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",

"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.0-rc.5",

"@angular/compiler": "2.0.0-rc.5",

"@angular/core": "2.0.0-rc.5",

"@angular/forms": "0.3.0",

"@angular/http": "2.0.0-rc.5",

"@angular/platform-browser": "2.0.0-rc.5",

"@angular/platform-browser-dynamic": "2.0.0-rc.5",

"@angular/router": "3.0.0-rc.1",

"@angular/router-deprecated": "2.0.0-rc.2",

"@angular/upgrade": "2.0.0-rc.5",

"systemjs": "0.19.27",

"core-js": "^2.4.0",

"reflect-metadata": "^0.1.3",

"rxjs": "5.0.0-beta.6",

"zone.js": "^0.6.12",

"angular2-in-memory-web-api": "0.0.15",

"bootstrap": "^3.3.6"

},

"devDependencies": {

"concurrently": "^2.2.0",

"lite-server": "^2.2.0",

"typescript": "^1.8.10",

"typings": "^1.0.4",

"canonical-path": "0.0.2",

"http-server": "^0.9.0",

"tslint": "^3.7.4",

"lodash": "^4.11.1",

"jasmine-core": "~2.4.1",

"karma": "^0.13.22",

"karma-chrome-launcher": "^0.2.3",

"karma-cli": "^0.1.2",

"karma-htmlfile-reporter": "^0.2.2",

"karma-jasmine": "^0.3.8",

"protractor": "^3.3.0",

"rimraf": "^2.5.2"

},

"repository": {}

}

Next file required to add tsconfig.json(typescript config json)

tsconfig.json

{

"compilerOptions": {

"target": "es5",

"module": "commonjs",

"moduleResolution": "node",

"sourceMap": true,

"emitDecoratorMetadata": true,

"experimentalDecorators": true,

"removeComments": false,

"noImplicitAny": true,

"suppressImplicitAnyIndexErrors": true

},

"compileOnSave": true

}

Then add next required file to add in project typings.json

typings.json

{

"globalDependencies": {

"angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",

"core-js": "registry:dt/core-js#0.0.0+20160602141332",

"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",

"node": "registry:dt/node#6.0.0+20160807145350",

"selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"

}

}

systemjs.config.js

/**

* System configuration for Angular 2 samples

* Adjust as necessary for your application needs.

*/

(function (global) {

// map tells the System loader where to look for things

var map = {

'app': '/app', // 'dist',

'@angular': '/node_modules/@angular',

'angular2-in-memory-web-api': '/node_modules/angular2-in-memory-web-api',

'rxjs': '/node_modules/rxjs'

};

// packages tells the System loader how to load when no filename and/or no extension

var packages = {

'app': { main: 'main.js', defaultExtension: 'js' },

'rxjs': { defaultExtension: 'js' },

'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },

};

var ngPackageNames = [

'common',

'compiler',

'core',

'forms',

'http',

'platform-browser',

'platform-browser-dynamic',

'router',

'router-deprecated',

'upgrade',

];

// Individual files (~300 requests):

function packIndex(pkgName) {

packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };

}

// Bundled (~40 requests):

function packUmd(pkgName) {

packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };

}

// Most environments should use UMD; some (Karma) need the individual index files

var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

// Add package entries for angular packages

ngPackageNames.forEach(setPackageConfig);

// No umd for router yet

packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };

var config = {

map: map,

packages: packages

};

System.config(config);

})(this);

Above all are required package and config file for angular2

Then we need to install all packages then follow the below steps.

Right click on package.json file--->Restore package then start to install packages background to see click view--> output

Then view the output of package install shown below.

Step 3 : Installing packages from npm

1. slect package.json file and right click
2. then select Restore Packages option
3. npm command completed with exit code 0.

exit code 0 then successfully install.

npm command completed with exit code 1 then installation not completed.

After complete the installation the first check the following process.

Go to-->>Tools--->options the open the below window.

Go to the Projects and Solutions---> External Web Tools

check Locations of external tools sequence $(PATH) is required on above the $(VSINSTALLDIR)\Web\External\git.

If it is last $(PATH) then visual studio install without external packages.

Then add the folders node module and typings folder in your project file.

Create folder App and add the component file shown below  

export class AppComponent { }

export use the another class then write export

Run angular 2 app using F5 from visual studio

then browser shows only :

Loading AppComponent content here.....

Check right click on page view go to console there showing error 404 (failed to load resource : the server responded with a status of 404(Not Found)

all these not found files are present in the src (source) folder 

First fix the error following changes.

In index.html change <base href="/"> to point /src/folder

<base href="/src/">

Then reload the error page the resolve the error 404

Then remaining file not found error resolve using following way

In index.html change script references to include a "/" just before node_modules

<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/system.js/dist/system.src.js"></script>

In systemjs.config.js CHANGE 'npm:':'node_modules/' To 'npm:':'/node_modules/'

'npm:':'/node_modules/'

code is present in the app.components.ts

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

@Component({

selector : 'my-app',

template: '<h1>Hello {{name}}</h1>',

})

export class AppComponent {name='Angular';}

Then reload the page application is running.

Hello Angular 2!

Here display Angular 2! but not display Angular because browser not understand the typescript code

So we required to convert type script to JavaScript then build the solution if any changes in the type script build automatically typescript convert to JavaScript then display the out put.

To compile Typescript to JavaScript when Typescript files are saved set "compileOnSave" to true in tsconfig.json file.

(to avoid every time build and reload the changes in the following file )

changes in the tsconfig.json file like

{

"compileOnSave" : true,

}

then changes in the app.component.ts file only save and run the application changes reflected directly.